想法:
總有很多機會去處理連續的資料,無論是一個導覽列、
一份清單、或一整筆的會員資料。我們會用很多的陣列
處理方法。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
先想想:
什麼是陣列?一段連續數據,而裡面的東西是類似的、
重複的。所以我們需要重複的做一個動作或計算,也因為
陣列的資料特性,讓使用者可以使用迴圈輕鬆處理類似的
連續資料。
只把資料丟給內部的 callback function 去進行處理
把資料丟給內部的 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]
抓取初始值,與下一個值,並回傳一個結果值
age.reduce(function(item, item2){
item = item + item2
return item
})
// 28 + 27 + 27 + 27 = 109
//結果:109
回傳 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)
結果:
完成!其實也沒有那麼難!
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)
forEach能夠遍歷陣列,但不會修改值
而map能夠修改值