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

这就是为什么当你在编写JSX应用程序时,你几乎总是使用map而不是forEach来在React中显示内容。

其他回答

性能分析 随着数组中元素数量的增加,For循环比map或foreach执行得更快。

Let array = []; For (var I = 0;I < 20000000;我+ +){ array.push(我) } console.time(“映射”); 数组中。映射(num => { 返回num * 4; }); console.timeEnd(“映射”); console.time (' forEach '); 数组中。forEach((num, index) => { 返回数组[index] = num * 4; }); console.timeEnd (' forEach '); console.time(“的”); For (i = 0;I < array.length;我+ +){ 数组[i] =数组[i] * 2; } console.timeEnd(“的”);

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)

const arr = [...Array(100000000).keys()];

console.time("for");
for (let i = 0; i < arr.length; i++) {}
console.timeEnd("for");

console.time("while");
let j = 0;
while (j < arr.length) {
  j++;
}
console.timeEnd("while");

console.time("dowhile");
let k = 0;
do {
  k++;
} while (k < arr.length);
console.timeEnd("dowhile");

console.time("forEach");
arr.forEach((element) => {});
console.timeEnd("forEach");

VM35:6用于:45.998046875 ms

VM35:13 while: 154.581787109375 ms

VM35:20 dowhile: 141.97216796875 ms

VM35:24 forEach: 776.469970703125 ms

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