我知道有很多这样的话题。我知道基本原理:. 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。 如果这是一个愚蠢的问题,我很抱歉,但我对这门语言很陌生,到目前为止我找到的答案并不能让我满意。


当前回答

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

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

希望这能有所帮助。

其他回答

forEach ():

返回值:undefined originalArray:方法调用后未修改 方法调用结束后不会创建newArray。


map ():

返回值:新数组,在调用数组中的每个元素上调用所提供函数的结果 originalArray:方法调用后未修改 在方法调用结束后创建newArray。


结论:

因为map构建了一个新的数组,所以当你不使用返回的数组时使用它是一种反模式;用forEach或for-of代替。

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

读:

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

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

需要指出的一点是,这两个方法都跳过未初始化的值,但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()可以在静态(不是活动的)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));

Foreach和map的区别:

Map():如果你使用Map,那么Map可以通过迭代主数组返回新的数组。

Foreach():如果你使用Foreach,那么它不能为每个can迭代主数组返回任何东西。

有用的链接:使用这个链接来理解差异

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f