遍历整个数组的forEach()方法

2017-05-10  本文已影响182人  趁你还年轻233

一.起因

群里某个小伙伴抛出一个问题:

var arr=[1,2,3];
arr.forEach(item=>
    item++
);
console.log(arr);

输出结果:
     [1, 2, 3]

二.经过

于是大家开始了激烈的讨论,我也做了几个小的尝试,总结出以下两个结论:
1.forEach()只对当前值进行操作时,不会修改原数组内容

var arr=[1,2,3];
arr.forEach(currentValue=>{
    currentValue++;
    console.log(currentValue);
});
console.log(arr);

输出结果:
    2
    3
    4
    [1, 2, 3]

2.forEach()对数组原始值操作时,才会修改原数组内容

var arr=[1,2,3];
arr.forEach((currentValue,index,array)=>{
    array[index]++;
    console.log(array[index]);
});
console.log(arr);

输出结果:
    2
    3
    4
    [2, 3, 4]

三.结尾

分析出现上述情况的原因:
  forEach方法只是将数组中的每一项的值复制了一份,专业角度来说是引用,因此在对值处理完后,不会改变自身的数据。只有通过array[index]方法,才会对内存中的数据进行修改。
所以forEach()的正确使用姿势是:
1.只传一个currentValue,产生新数组
forEach()方法只传一个参数的应用场景是,基于当前数组中的每个值进行操作并且产生一个新数组,例如:

var arr=[1,2,3];
var arrnew=[];
arr.forEach(currentValue=>{ 
    arrnew.push(++currentValue);
});
console.log(arrnew);

输出结果: [2, 3, 4]
2.传三个参数时,修改原数组
实例见经过中的2.forEach()对数组原始值操作时,才会修改原数组内容

努力成为优秀的前端工程师!

上一篇下一篇

猜你喜欢

热点阅读