forEach、map函数的功能和应用场景（超详细）

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

在做项目时，经常会遇到数组处理
的情况，写个笔记总结一下，增加记忆。

forEach

forEach() 方法对数组的每个元素执行一次给定的函数。

目录

forEach

map函数

---

注意：

•  forEach()会改变原数组的方法
• 参数：item数组中的当前项，index当前项的索引，array原始数组；
• 数组中有几项，那么传递进去的匿名回调函数就需要执行几次

使用场景：当我们对数组的元素进行处理时（例如：增加元素，元素值改变），可以使用这个函数。

map函数

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。不会改变原数组。

         var arr = [1,2,3,4,5,6];
         var new2Arr = arr.map((item,index,array) =>{
            console.log(item);
            console.log(index);
            console.log(array);
            return item *100
        })
        console.log(arr);    //[1, 2, 3, 4, 5, 6]
        console.log(new2Arr);    // [100, 200, 300, 400, 500, 600]

注意：

• item数组中的当前项，index当前项的索引，array原始数组
• map的回调函数中支持return返回值，return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆了一份，把克隆这一份的数组中的对应项改变了 ）；
• map会改变原数组的方法，
• map的执行速度更快，比forEach的执行速度快了70%；

使用场景：

map适用于你要改变数据值的时候，不仅在于它更快，而且返回一个新的数组，这样可以提高复用性（map(),filter(),reduce()）等组合使用。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(num => num * 2).filter(num => num > 5);
// newArr = [6, 8, 10]

总结：

1. 能用forEach()做到的，map()同样可以。反之亦成立
2. map()会分配内存空间存储新数组并返回，forEach()不会返回数组
3. forEach()允许callback更改原始数组的元素。而map()返回新的数组