JS中map与forEach的区别

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

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

map

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

 })
 console.log(result);
 console.log(array );

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

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

forEach

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

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

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

输出为：

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