JS中forEach()和map()的区别讲解

土鱼龍

forEach()和map()的区别

相同点：

• 都是循环遍历数组中的每一项
  
• forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
  
• 匿名函数中的this都是指向window
  
• 只能遍历数组
  

接下来我们看看这两个方法

1.map()方法

map定义和用法：
map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
我的理解就是：原数组进行处理之后对应的一个新的数组。
map()方法按照原始数组元素顺序依次处理元素。
注意：map()方法不会对空数组进行检测。
map()方法不会改变原始数组。
浏览器支持：
chrome、safari、opera都支持
IE：>=9版本
safari： >=1.5
语法：

1. array.map(function(item,index,arr){},thisValue)

复制代码

参数说明：
item 当前元素的值
index 索引值
arr 原数组
举个小例子

1. var arr = [0,2,4,6,8];
   
2. var str = arr.map(function(item,index,arr){
   
3.     console.log(this);
   
4.     console.log("原数组arr：",arr); //注意这里执行5次
   
5.     return item / 2;
   
6. },this);
   
7. console.log(str);

复制代码

执行的结果如下：
[0,1,2,3,4,5]

2.forEach

定义和用法
forEach()方法用于调用数组的每个元素，将元素传给回调函数。
注意：forEach对于空数组是不会调用回调函数的。
语法：

1. Array.forEach(function(item,index,arr){},this)

复制代码

参数说明同map方法
代码实例如下：

1. var sum = 0;
   
2. var str = arr.forEach(function(item,index,arr){
   
3.     sum += item;
   
4.     console.log("sum的值为：",sum); //0 2 6 12 20
   
5. })

复制代码

补充：

forEach和map详细讲解

forEach和map 基本用法forEachmap 剖析原理forEachmap 总结

基本用法

1. forEach

复制代码

和

1. map

复制代码

都是JavaScript中常见的用于遍历数组的方法，它们都可以用于对数组中的每个元素执行某种操作，但它们的使用方式和返回结果略有不同。


forEach

1. forEach

复制代码

是一个用于数组的方法，它会对数组中的每个元素执行一次回调函数。该方法没有返回值，它只是遍历整个数组并执行回调函数。

1. forEach

复制代码

方法的语法如下：

1. array.forEach(callback(currentValue, index, array), thisArg);

复制代码

其中，

1. callback

复制代码

是要执行的函数，它会被传入三个参数：

• 1. currentValue

  复制代码
  ：当前处理的元素。
  
• 1. index

  复制代码
  ：当前处理元素的索引。
  
• 1. array

  复制代码
  ：当前正在遍历的数组。
  

1. thisArg

复制代码

是一个可选参数，用于指定执行回调函数时使用的

1. this

复制代码

值。

1. forEach

复制代码

方法返回的是

1. undefined

复制代码

，它不会生成新的数组。

1. forEach

复制代码

方法和

1. for

复制代码

循环在功能上类似，但它更简洁、易读，也更安全，因为它会避免循环时的一些常见问题，如数组越界、重复计算等。
下面是一个使用

1. forEach

复制代码

方法遍历数组并输出每个元素的例子：

1. const arr = [1, 2, 3];
   
2. arr.forEach((element) => {
   
3.   console.log(element);
   
4. });

复制代码

map

1. map

复制代码

方法也是一个用于数组的方法，它会对数组中的每个元素执行一次回调函数，并将回调函数的返回值存储在一个新的数组中。

1. map

复制代码

方法的语法如下：

1. array.map(callback(currentValue, index, array), thisArg);

复制代码

其中，

1. callback

复制代码

是要执行的函数，它会被传入三个参数：

• 1. currentValue

  复制代码
  ：当前处理的元素。
  
• 1. index

  复制代码
  ：当前处理元素的索引。
  
• 1. array

  复制代码
  ：当前正在遍历的数组。
  

1. thisArg

复制代码

是一个可选参数，用于指定执行回调函数时使用的 this 值。

1. map

复制代码

方法会返回一个新的数组，这个数组的长度和原数组相同，但是每个元素都是经过回调函数处理后的结果。
下面是一个使用

1. map

复制代码

方法将数组中的每个元素都加上 1 的例子：

1. const arr = [1, 2, 3];
   
2. const newArr = arr.map((element) => {
   
3.   return element + 1;
   
4. });
   
5. console.log(newArr); // 输出[2, 3, 4]

复制代码

可以看到，

1. map

复制代码

方法生成了一个新的数组，并将原数组中的每个元素都加上了 1。

剖析原理

1. forEach

复制代码

和

1. map

复制代码

方法的原理都是基于数组的迭代器，实际上它们都是通过调用迭代器实现对数组的遍历。
JavaScript数组有一个内置的迭代器，即

1. Array.prototype[@@iterator]

复制代码

方法。该方法返回一个迭代器对象，可以使用该对象对数组进行迭代。

1. forEach

复制代码

和

1. map

复制代码

方法都会调用

1. Array.prototype[@@iterator]

复制代码

方法返回迭代器对象，然后使用该迭代器对象进行遍历。
forEach

当调用

1. forEach

复制代码

方法时，JavaScript引擎会执行以下步骤：

• 检查数组是否存在，如果不存在，则抛出TypeError异常。
  
• 检查第一个参数是否是一个函数，如果不是，则抛出TypeError异常。
  
• 检查第二个参数是否是一个对象，如果是，则将该对象作为this值传递给回调函数，否则this值为undefined。
  
• 获取迭代器对象，通过调用Array.prototype[@@iterator]方法获得。
  
• 对于迭代器对象中的每个元素，依次执行回调函数，并将当前元素的值、索引和原数组作为参数传递给回调函数。
  
• forEach方法不会返回任何值。
  

下面是一个简化的

1. forEach

复制代码

实现代码：

1. Array.prototype.myForEach = function(callback, thisArg) {
   
2.   if (typeof callback !== 'function') {
   
3.     throw new TypeError(callback + ' is not a function');
   
4.   }
   
5.   for (var i = 0; i < this.length; i++) {
   
6.     callback.call(thisArg, this[i], i, this);
   
7.   }
   
8. };

复制代码

可以看到，该实现代码使用了

1. for

复制代码

循环来遍历数组，并使用

1. call

复制代码

方法调用回调函数，并将当前元素的值、索引和原数组作为参数传递给回调函数。
map

1. map

复制代码

方法的原理与

1. forEach

复制代码

方法类似，也是通过调用迭代器实现对数组的遍历，只不过

1. map

复制代码

方法在遍历时会将回调函数的返回值存储在一个新的数组中。下面我们以

1. map

复制代码

方法为例来剖析其原理。
当调用

1. map

复制代码

方法时，JavaScript引擎会执行以下步骤：

• 检查数组是否存在，如果不存在，则抛出TypeError异常。
  
• 检查第一个参数是否是一个函数，如果不是，则抛出TypeError异常。
  
• 检查第二个参数是否是一个对象，如果是，则将该对象作为this值传递给回调函数，否则this值为undefined。
  
• 创建一个新的空数组，用于存储回调函数的返回值。
  
• 获取迭代器对象，通过调用Array.prototype[@@iterator]方法获得。
  
• 对于迭代器对象中的每个元素，依次执行回调函数，并将当前元素的值、索引和原数组作为参数传递给回调函数。
  
• 将回调函数的返回值存储在新数组中。
  
• 返回新数组。
  

下面是一个简化的

1. map

复制代码

实现代码：

1. Array.prototype.myMap = function(callback, thisArg) {
   
2.   if (typeof callback !== 'function') {
   
3.     throw new TypeError(callback + ' is not a function');
   
4.   }
   
5.   var newArray = [];
   
6.   for (var i = 0; i < this.length; i++) {
   
7.     newArray.push(callback.call(thisArg, this[i], i, this));
   
8.   }
   
9.   return newArray;
   
10. };

复制代码

可以看到，该实现代码除了使用

1. for

复制代码

循环遍历数组之外，还创建了一个新的数组，并将回调函数的返回值存储在新数组中，最后返回新数组。

总结

总的来说，

1. forEach

复制代码

和

1. map

复制代码

方法都是基于数组的迭代器实现的，它们的主要区别在于对回调函数的处理方式。

1. forEach

复制代码

方法执行回调函数时，不会将回调函数的返回值存储起来，而是直接忽略。

1. map

复制代码

方法执行回调函数时，会将回调函数的返回值存储在一个新数组中，最后将该数组返回。因此，如果我们需要对数组中的每个元素执行一个操作，并将操作的结果存储在新数组中，那么应该使用

1. map

复制代码

方法。如果我们只是需要对数组中的每个元素执行一些操作，而不需要将操作的结果存储起来，那么应该使用

1. forEach

复制代码

方法。
到此这篇关于JS中forEach()和map()的区别解析的文章就介绍到这了,更多相关forEach()和map()的区别：内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316231mdg.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！