🚀详解JavaScript系列之数组(八)

---

---

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

---

说明:文章部份内容及图片出自网络，若有侵权请与我本人联系(主页有公众号:小攻城狮学前端)

做者：小只前端攻城狮、 主页：小只前端攻城狮的主页、 来源：掘金

GitHub：P-J27、 CSDN：PJ想作前端攻城狮

著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

---

前言

接上一篇文章，咱们来详细解读js数组的内容，本篇幅讲述“数组的遍历(3)”，上一篇传送门

---

forEach() 遍历

forEach()方法须要一个函数做为参数。这种函数，是由咱们建立可是不禁咱们调用的，咱们称为回调函数。数组中有几个元素，该回调函数就会执行几回。

回调函数中传递三个参数：

• 第一个参数，就是当前正在遍历的元素
• 第二个参数，就是当前正在遍历的元素的索引
• 第三个参数，就是正在遍历的数组

示例

let myArr = ['小只前端攻城狮', 'PJ想作前端攻城狮', 'CSDN：https://blog.csdn.net/weixin_43745075'];
myArr.forEach((item, index, arr) => {
    console.log('item:' + item);
    console.log('index:' + index);
    console.log('arr:' + JSON.stringify(arr));
    console.log('----------');
});
​
/* item:小只前端攻城狮 index:0 arr:["小只前端攻城狮","PJ想作前端攻城狮","CSDN：https://blog.csdn.net/weixin_43745075"] ---------- item:PJ想作前端攻城狮 index:1 arr:["小只前端攻城狮","PJ想作前端攻城狮","CSDN：https://blog.csdn.net/weixin_43745075"] ---------- item:CSDN：https://blog.csdn.net/weixin_43745075 index:2 arr:["小只前端攻城狮","PJ想作前端攻城狮","CSDN：https://blog.csdn.net/weixin_43745075"] ---------- */
复制代码

注意:forEach() 没有返回值。也能够理解成：forEach() 的返回值是 undefined。若是你尝试 tempArry = myArr.forEach()这种方式来接收，是达不到效果的。

forEach() 能不能改变原数组？

关于这个问题，大部分人会搞错。咱们来看看下面的代码。正常来讲，咱们通常不用forEach来改变原数组，forEach用于咱们纯粹的遍历操做。但咱们知道回调函数中有三个参数，其中包含index和arr，这样咱们也能实现改变原数组。因此咱们常说的能不能改变是说咱们会不会用它去改变，而不是可不能够改变。

一、数组的元素是基本数据类型：（没法改变原数组）

let numArr = [1, 2, 3];
​
numArr.forEach((item) => {
    item = item * 2;
});
console.log(JSON.stringify(numArr)); // 打印结果：[1, 2, 3]
复制代码

上面这段代码，你可要看仔细了，打印结果是 [1, 2, 3]，不是 [2, 4, 6]。

二、数组的元素是引用数据类型：（直接修改整个元素对象时，没法改变原数组）

let objArr = [
    { name: '小只前端攻城狮', age: 20 },
    { name: 'PJ想作前端攻城狮', age: 30 },
];

objArr.forEach((item) => {
    item = {
        name: '秋秋',
        age: '29',
    };
});
console.log(JSON.stringify(objArr)); 
// 打印结果：
[{"name":"小只前端攻城狮","age":20},
 {"name":"PJ想作前端攻城狮","age":30}]
复制代码

三、数组的元素是引用数据类型：（修改元素对象里的某个属性时，能够改变原数组）

let objArr = [
    { name: '小只前端攻城狮', age: 28 },
    { name: 'PJ想作前端攻城狮', age: 30 },
];
​
objArr.forEach((item) => {
    item.name = '秋秋';
});
console.log(JSON.stringify(objArr)); 
// 打印结果：
[{"name":"秋秋","age":28},{"name":"秋秋","age":30}]
复制代码

分析：是否是以为很奇怪，其实很容易理解，每当咱们遍历一个元素时，而回调函数的三个参数的实参从何而来的呢，后两个参数就不说了，他们本就能够用来改变数组，而item实际上对js新定义了一个变量当作实参,而变量的值是对当前元数的一个浅拷贝，因为对象的浅拷贝只是引用关系的拷贝，因此经过成员访问能够改变原对象的属性。

四、forEach() 经过参数 二、参数 3 修改原数组：（标准作法）

let numArr = [1, 2, 3];
numArr.forEach((item, index, arr) => {
    arr[index] = arr[index] * 2;
});
//直接索引到当前元素去修改。
复制代码

---

写做不易，「点赞」+「评论」 谢谢支持❤

感谢阅读，但愿能对你有所帮助,文章如有错误或者侵权，能够在评论区留言或在个人主页添加公众号联系我。