forEach()與map()的對比

forEach()與map()都是ECMAScript5中遍歷的數組方法，它們在實際開發中會大量用到；那它們到底有着怎樣的區別呢？一塊兒來來看吧！

一.forEach()

forEach() 經過數組中的元素進行遍歷迭代；對數組中的每一個元素調用一次提供的回調函數.

該回調函數接受三個參數：

• 元素的值
• 元素索引
• 數組對象自己

let arr = [3, 6, 8, 9];
let res = arr.forEach((item, index) => {
  return arr[index] = item * 2;
});
console.log(res);   // undefined 注意：返回值是undefined
console.log(arr);   // [6, 12, 16, 18] 注意：這裏的原數組已經發生改變
複製代碼

二.map()

map() 依次爲數組中的每一個元素調用提供的回調函數，而後從結果中構造一個新數組.

該回調函數接受三個參數：

• 元素的值
• 元素索引
• 數組對象自己

let arr = [1, 3, 6];
let res = arr.map((item) => {
 return item * 3;
});
console.log(res);   // [3, 9, 18]
console.log(arr);   // [1, 3, 6] 注意：原數組未發生改變
複製代碼

三.它們的區別

主要區別：

• forEach()會更改原始數組，而map()返回一個新數組，不更改原始數組
• 兩個方法沒有哪一個更好，具體場景取決於你實際的開發環境