JS中Map和ForEach的区别

心已赠人 2023-02-17 01:29 22阅读 0赞

# 定义 #

*  foreEach()方法:

针对每一个元素执行提供的函数。

*  map()方法:

创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。  
原数组不变

# 区别 #

*  **forEach()方法不会返回执行结果，而是undefined**。也就是说，**forEach()会修改**原来的数组。
 *  **map()方法会得到一个新的数组并返回**，原数组不变。

# 例子 #

//forEach修改原来的数组
    let arr =[1,2,3,4,5,6];
            let foreach=arr.forEach((value, key) => { 
                return arr[key] = value * value;
                });
            console.log(arr);//[1, 4, 9, 16, 25, 36]
            console.log(foreach);//undefined
            
    //map得到一个新的数组并返回，原数组不变
            let arr1 =[1,2,3,4,5,6]
            let list = arr1.map(value => { 
                return value * value;
                });
            console.log(arr1);// [1, 2, 3, 4, 5, 6]
            console.log(list);// [1, 4, 9, 16, 25, 36]

# 执行速度对比 #

forEach()的执行速度 < map()的执行速度

# 如何使用 #

forEach适合于你并**不打算改变数据**的时候，而只是想用数据做一些事情 – 比如存入数据库或者**打印出来**。

let arr = ['a', 'b', 'c', 'd'];
    arr.forEach((letter) => { 
     console.log(letter);
    });
    // a
    // b
    // c
    // d

map()适用于**你要改变数据值**的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以**使用复合**(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

let arr = [1, 2, 3, 4, 5];
    let arr2 = arr.map(value => value * value).filter(value => value > 10);
    // arr2 = [16, 25]

# 总结 #

*  forEach()可以做到的东西，map()也同样可以。反过来也是如此。
 *  map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
 *  forEach()允许callback更改原始数组的元素。map()返回新的数组。