前端开发Map和Foreach区别，Map遍历方式用法介绍

Map方法和ForEach方法都是用于数组遍历的常用方法，但它们的返回值和对原数组的影响是不同的。在使用时需要根据具体情况选择合适的方法。

【资料图】

前端开发中的map和forEach都是JavaScript中常用的数组遍历方法，它们的区别主要在于返回值和对原数组的影响。

具体介绍如下：

1、map方法介绍

map方法会遍历数组中的每一个元素，执行回调函数，并返回执行结果组成的新数组，原数组不会被修改。其中回调函数可以接收三个参数：当前元素、当前元素的索引、原始数组。

map方法的使用方式如下：

const newArray = array.map(function(currentValue, index, array) {// 对当前元素进行处理，并返回处理结果});

示例代码：

const array = [1, 2, 3];const newArray = array.map(function(item) {return item * item;});console.log(newArray); // [1, 4, 9]console.log(array); // [1, 2, 3]

上面的代码中，map方法遍历了原数组array，对每个元素进行了平方操作，并将平方结果作为新数组newArray的元素返回。原数组array没有被修改。

2、forEach方法介绍

forEach方法会遍历数组中的每一个元素，执行回调函数，但是没有返回值，也不能改变原数组。其中回调函数可以接收三个参数：当前元素、当前元素的索引、原始数组。

forEach方法的使用方式如下：

array.forEach(function(currentValue, index, array) {// 对当前元素进行处理，但是不能有返回值});

示例代码：

const array = [1, 2, 3];array.forEach(function(item) {console.log(item * item);});console.log(array); // [1, 2, 3]

上面的代码中，forEach方法遍历了原数组array，对每个元素进行了平方操作，但是没有返回值，并且原数组array也没有被修改。

综上所述，map方法和forEach方法都是用于数组遍历的常用方法，但它们的返回值和对原数组的影响是不同的。在使用时需要根据具体情况选择合适的方法。

标签：