[javascript]JS中數組方法map和ForEach的區別

一、定義

foreEach()方法：針對每一個元素執行提供的函數。
map()方法：創建一個新的數組，其中每一個元素由調用數組中的每一個元素執行提供的函數得來。

二、語法

foreEach

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

callback為數組中每個元素執行的函數，該函數接收一至三個參數：

currentValue

數組中正在處理的當前元素。

index 可選

數組中正在處理的當前元素的索引。

array 可選

forEach() 方法正在操作的數組。

thisArg 可選可選參數。當執行回調函數 callback 時，用作 this 的值。

map

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

callback生成新數組元素的函數，使用三個參數：

currentValue

callback 數組中正在處理的當前元素。

index 可選

callback 數組中正在處理的當前元素的索引。

array 可選

map 方法調用的數組。

thisArg可選執行 callback 函數時值被用作this。

例子

制作一個數組的平方
有如下一個數組

let arr =[1,2,3,4,5,6]

下面分別用forEach()和Map()

forEach()

注意，forEach是不會返回有意義的值的。
我們在回調函數中直接修改arr的值。

arr.forEach((value, key) => {
 return arr[key] = value * value;
});

執行結果如下：

 

map()

let list = arr.map(value => {
 return value * value;
});

執行結果如下：

 

執行速度對比

forEach()的執行速度 < map()的執行速度

 

map()適用於你要改變數據值的時候。不僅僅在於它更快，而且返回一個新的數組。這樣的優點在於你可以使用鏈式調用(map(), filter(), reduce()等組合使用)來玩出更多的花樣。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10);
// arr2 = [16, 25]

我們首先使用map將每一個元素乘以它們自身，然后緊接着篩選出那些大於10的元素。最終結果賦值給arr2。

三、區別

1、map速度比foreach快

2、map會返回一個新數組，不對原數組產生影響,foreach不會產生新數組，foreach返回undefined

3、map因為返回數組所以可以鏈式操作，foreach不能

4, map里可以用return ,而foreach里用return不起作用，foreach不能用break，會直接報錯

四、應用

1、反轉字符串

var str = '12345';
Array.prototype.map.call(str, function(x) {   //同時利用了call()方法
  return x;
}).reverse().join('');

2、一個筆試題。

['1', '2', '3'].map(parseInt) what & why ?

['1', '2', '3'].map(parseInt) 的輸出結果為 [1, NaN, NaN]。

因為 parseInt(string, radix) 將一個字符串 string 轉換為 radix 進制的整數， radix 為介於 2-36 之間的數。

在數組的 map 方法的回調函數中會傳入 item（遍歷項） 和 index（遍歷下標) 作為前兩個參數，所以這里的 parseInt 執行了對應的三次分別是

• parseInt(1, 0)
• parseInt(2, 1)
• parseInt(3, 2)

對應的執行結果分別為 1、NaN、NaN。

可改為：

['1', '2', '3'].map((item,index)=>{return parseInt(item,10)})// [1, 2, 3]

 參照：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map