JavaScript: .forEach()和.map()的区别

我知道有很多这样的话题。我知道基本原理:. 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()	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)

2018-03-29 06:56:47

其他回答

不同之处在于他们的回报。执行后:

arr.map()

返回由已处理函数生成的元素数组;而:

arr.forEach()

返回未定义。

2017-09-08 13:40:28

这里没有提到的一个穿梭的区别是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));

2021-09-07 09:52:13

需要指出的一点是，这两个方法都跳过未初始化的值，但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];

2019-09-12 11:48:13

	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)

2018-03-29 06:56:47

数组中。forEach“对每个数组元素执行一次所提供的函数。” 数组中。Map“创建一个新数组，其中包含对该数组中的每个元素调用所提供的函数的结果。”

forEach实际上不返回任何东西。它只是为每个数组元素调用函数，然后就完成了。所以无论你在被调用的函数中返回什么都会被丢弃。

另一方面，map将类似地为每个数组元素调用函数，但它不会丢弃它的返回值，而是捕获它并构建一个包含这些返回值的新数组。

这也意味着你可以在使用forEach的任何地方使用map，但你仍然不应该这样做，这样你就不会毫无目的地收集返回值。如果你不需要它们，不收集它们会更有效率。

2015-12-23 00:00:45

JavaScript: .forEach()和.map()的区别

推荐文章

最新文章

标签