iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
1
Modern Web

一個 JS 學習者的日常系列 第 2

一個 JS 學習者的日常 day1

想法:
總有很多機會去處理連續的資料,無論是一個導覽列、
一份清單、或一整筆的會員資料。我們會用很多的陣列
處理方法。forEach、map、reduce、filter。

先拿到一筆資料:

var people = [
  {
    name: 'Jim',
    nickname: 'Hamburger',
    age: 28
  },
  {
    name: 'Andy',
    nickname: 'Spaghetti',
    age: 27
  },
  {
    name: 'Kevin',
    nickname: 'Curry',
    age: 27
  },
  {
    name: 'Arel',
    like: 'Sushi',
    age: 27
  }
];

過了一年之後,所有人都長了一歲怎麼辦?
要在每一個 age 上面加 1 歲。

先將資料簡化成更單純的樣子:

var age = [28, 27, 27, 27]

age.forEach(function(item, index){
  console.log(item, index);
})
// 28 0
// 27 1
// 27 2
// 27 3

先想想:
什麼是陣列?一段連續數據,而裡面的東西是類似的、
重複的。所以我們需要重複的做一個動作或計算,也因為
陣列的資料特性,讓使用者可以使用迴圈輕鬆處理類似的
連續資料。

forEach

只把資料丟給內部的 callback function 去進行處理

map

把資料丟給內部的 callback function 去進行處理,
並回傳一組陣列資料

age.map(function(item, index){
  item = item + index
  return item
})
// 28 + 0 = 28
// 27 + 1 = 28
// 27 + 2 = 29
// 27 + 3 = 30
//結果:(4) [28, 28, 29, 30]

reduce

抓取初始值,與下一個值,並回傳一個結果值

age.reduce(function(item, item2){
  item = item + item2
  return item
})
// 28 + 27 + 27 + 27 = 109
//結果:109

filter

回傳 Boolean 值 true 或 false 判斷引入處理後
是否為要回傳的值,最後回傳一組陣列

age.filter(function(item){
  if ( item < 28 )
  return true
})
// 28 < 28  //false
// 27 < 28  //true
// 27 < 28  //true
// 27 < 28  //true
//結果:(3) [27, 27, 27]

但回到原本的資料,如何把所有的年齡加 1

people.forEach(function(item){
  item.age += 1 
})
console.log(people)

結果:

完成!其實也沒有那麼難!


上一篇
一個 JS 學習者的日常 前導
下一篇
一個 JS 學習者的日常 day2
系列文
一個 JS 學習者的日常30

1 則留言

0
shavenking
iT邦新手 5 級 ‧ 2017-12-21 09:11:50

Hi 樓主早安,請問如果我的資料是一個陣列的數字,而不是物件的狀況下,用 map 和 forEach 會有差別嗎?

舉例:

var test = [1,2,3]

test = test.map(function (i) {
  return i += 1
})

console.log(test)

test = test.forEach(function (i) {
  i += 1
})

console.log(test)
Andy Tsai iT邦新手 5 級 ‧ 2017-12-22 19:38:02 檢舉

forEach能夠遍歷陣列,但不會修改值
而map能夠修改值

我要留言

立即登入留言