JavaScript:.forEach(）和.map(）之间的区别

JavaScript: Difference between .forEach() and .map()

本文关键字：之间 区别 map JavaScript forEach      更新时间：2023-09-26

我知道有很多这样的主题。我知道一些基本知识：.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：它迭代一个列表，转换该列表的每个成员，并返回另一个与转换后的成员大小相同的列表（例如：将字符串列表转换为大写）。它不会改变调用它的数组（尽管回调函数可能会这样做）。

参考

Array.prototype.forEach（）-JavaScript|MDN

Array.prototype.map（）-JavaScript|MDN

  • Array.forEach"每个数组元素执行一次所提供的函数。"

  • Array.map"创建一个新数组，其结果是在此数组中的每个元素上调用所提供的函数。"

因此，forEach实际上并没有返回任何内容。它只是为每个数组元素调用函数，然后就完成了。因此，在被调用的函数中返回的任何内容都将被丢弃。

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

这也意味着，无论您在哪里使用forEach，都可以使用map，但您仍然不应该这样做，因此您不会在没有任何目的的情况下收集返回值。如果你不需要它们，不收集它们会更有效率。

forEach（）映射（）
功能对数组的每个元素执行给定的操作执行给定的"；变换"；在"；复制"；每个元素的
返回值返回undefined返回包含已转换元素的新数组，保留原始数组不变
首选使用场景和示例对每个元素执行非变形处理

例如，保存数据库中的所有元素		获取数组，该数组包含对数组的每个元素进行的某些处理的输出

例如，获取数组中每个字符串的长度数组

您需要知道的主要区别是.map()返回一个新数组，而.forEach()不返回。这就是你在输出中看到这种差异的原因。.forEach()只是对数组中的每个值进行运算。

读取：

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

您可能还想查看：-Array.prototype.every()-JavaScript|MDN

性能分析随着数组中元素数量的增加，For循环的执行速度快于map或foreach。

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}
console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');

console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');
console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;
}
console.timeEnd('for');

map返回一个新数组。

forEach没有返回值。

这就是区别的核心。这里的大多数其他答案都有效地说明了这一点，但方式要复杂得多。

forEach：如果你想对数组的元素执行一个操作，它与你用于循环的操作相同。这个方法的结果不会给我们一个输出buy-just循环通过元素。

map：如果您想对数组的元素执行操作，并且还想将操作的输出存储到数组中。这类似于函数中的for循环，该函数在每次迭代后返回结果。

希望这能有所帮助。

forEach（）：

  • 返回值：未定义

  • originalArray:在方法调用后未修改

  • newArray不是在方法调用结束后创建的。

map（）：

  • 返回值：new数组，填充调用数组中每个元素上提供的函数的结果

  • originalArray:在方法调用后未修改

  • newArray是在方法调用结束后创建的。

结论：

由于map构建了一个新的数组，所以在不使用返回的数组时使用它是一种反模式；使用forEach或for代替。

区别在于它们返回的内容。执行后：

arr.map()

返回从所处理的函数得到的元素数组；而：

arr.forEach()

返回undefined。

forEach（）与；map（）

forEach（）只是循环遍历元素。它丢弃返回值，并且总是返回未定义的值。这个方法的结果没有给我们一个输出。

map（）元素循环通过迭代主数组来分配内存并存储返回值

示例：

   var numbers = [2,3,5,7];
   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined
   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map（）比forEach（）快

Foreach和amp；地图：

Map（）：如果使用Map，则Map可以通过迭代主数组来返回新数组。

Foreach（）：如果使用Foreach，则它不能为每个can迭代的主数组返回任何内容。

使用Ful链接：使用此链接了解差异

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

这里没有提到的一个穿梭机区别是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将它们保留在返回的数组中。

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];

.map和.forEach将做同样的事情，直到您开始在具有数百万元素的数组上操作。map将创建另一个具有相同大小（可能是类型，取决于阵列物种）的集合，这可能会占用大量内存。for Each不会这么做。

性能分析（同样-不太科学）
根据我的经验，.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
  • .地图时间444

Map隐式返回，而forEach则不返回

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

相关文章：