JS中map与forEach的区别

很多同学可能对于map与forEach的区别不是太了解，今天我们介绍一下JS中的map与forEach方法，

我对map的理解是，这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组，参数为(item，index，arr1))，返回值保存到另一个数组中，遍历结束后，整个方法返回这个数组

map与forEach其实都是JS中，对array进行遍历的方法，区别在于map是存在返回值的，而forEach返回值为undefined

接下来我们来看map代码实例

let L1 = [1, 4, 7, 11] 
let res1 = L1.map((item, index, arr) => {
    console.log(item);  //该参数为遍历的元素本身
    console.log(index);  //该参数为遍历的元素的下标
    console.log(arr);  //该参数为原数组本身
    return item + 2  //返回值会作为储存到另一个数组当作总体的返回值
})
console.log(res1);
console.log(L1);

输出为下图。可以看到，map方法确实有返回值，用res1接收后输出为修改过的数组。

map接收的函数有三个参数，可以只写一个两个，也可以三个都写，但是要注意先后顺序。

然后我们来看forEach代码实例

let L1 = [1, 4, 7, 11]
let res1 = L1.forEach((item, index, arr) => {
    console.log(item);
    console.log(index);
    console.log(arr);
    return item + 2
})
console.log(res1);
console.log(L1);

输出为下图。可以看到，forEach方法无返回值，用res1接收后输出undefined，但是细心的同学可能发现了，为什么对item进行了return，但是L1数组依旧没有变化呢？那是因为对于forEach也是不能修改原数组的，如果需要修改原数组，可以使用索引进行修改

let L1 = [1, 4, 7, 11]
let res1 = L1.forEach((item, index, arr) => {
    console.log(item);
    console.log(index);
    console.log(arr);
    arr[index] += 1
})
console.log(res1);
console.log(L1);

输出为：

 

 

 但是forEach作为ES5提出的方法，性能异常的差

所以大家如果是想对数组进行遍历输出之类简单的操作，可以使用forEach，但是想批量修改数组值，推荐使用map方法