💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴, 请点击【前端学习交流群】
在做项目时,经常会遇到数组处理
的情况,写个笔记总结一下,增加记忆。
forEach
forEach() 方法对数组的每个元素执行一次给定的函数。
目录
注意:
- 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]
总结:
- 能用forEach()做到的,map()同样可以。反之亦成立
- map()会分配内存空间存储新数组并返回,forEach()不会返回数组
- forEach()允许callback更改原始数组的元素。而map()返回新的数组