我知道有很多这样的话题。我知道基本原理:. foreach()操作原始数组,.map()操作新数组。

在我的例子中:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

这是输出:

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

我不明白为什么使用practice会改变b的值为undefined。 如果这是一个愚蠢的问题,我很抱歉,但我对这门语言很陌生,到目前为止我找到的答案并不能让我满意。


当前回答

性能分析(同样-不是很科学) 根据我的经验,有时候.map()比.foreach()更快。

let rows = []; for (let i = 0; i < 10000000; i++) { // console.log("here", i) rows.push({ id: i, title: 'ciao' }); } const now1 = Date.now(); rows.forEach(row => { if (!row.event_title) { row.event_title = `no title ${row.event_type}`; } }); const now2 = Date.now(); rows = rows.map(row => { if (!row.event_title) { row.event_title = `no title ${row.event_type}`; } return row; }); const now3 = Date.now(); const time1 = now2 - now1; const time2 = now3 - now2; console.log('forEach time', time1); console.log('.map time', time2);

在我的macbook pro上(2013年底)

在1909年 .map时间444

其他回答

需要指出的一点是,这两个方法都跳过未初始化的值,但map将它们保留在返回的数组中。

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];
forEach() map()
Functionality Performs given operation on each element of the array Performs given "transformation" on a "copy" of each element
Return value Returns undefined Returns new array with transformed elements, leaving back original array unchanged.
Preferrable usage scenario and example Performing non-tranformation like processing on each element.

For example, saving all elements in the database.
Obtaining array containing output of some processing done on each element of the array.

For example, obtaining array of lengths of each string in the array

forEach()例子

chars = ['Hello', 'world!!'); var retVal = char . foreach(函数(字){ console.log(" save to db: " + word) }) console.log (retVal) / /定义

map()例子

chars = ['Hello', 'world!!'); Var长度= char .map(函数(单词){ 返回word.length }) console.log(长度)/ /(5、8)

forEach:如果你想对数组的元素执行一个操作,它与你使用for循环相同。这个方法的结果并没有给我们一个输出,只是循环遍历元素。

map:如果你想在一个数组的元素上执行一个操作,并且你想将你的操作的输出存储到一个数组中。这类似于函数中的for循环,在每次迭代后返回结果。

希望这能有所帮助。

这里没有提到的一个穿梭的区别是forEach()可以在静态(不是活动的)NodeList上循环,而map()不能

//works perfectly
      document.querySelectorAll('.score').forEach(element=>console.log(element));
    
    
  //Uncaught TypeError: document.querySelectorAll(...).map is not a function        
      document.querySelectorAll('.score').map(element=>console.log(element));

你需要知道的主要区别是.map()返回一个新数组,而. foreach()不返回。这就是为什么在输出中会看到这种差异。. foreach()只是对数组中的每个值进行操作。

读:

Array.prototype.forEach() - JavaScript | MDN Array.prototype.map() - JavaScript | MDN

你可能还想看看: - Array.prototype.every() - JavaScript | MDN