🚀詳解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;
});
//直接索引到當前元素去修改。
複製代碼

---

寫做不易，「點贊」+「評論」 謝謝支持❤

感謝閱讀，但願能對你有所幫助,文章如有錯誤或者侵權，能夠在評論區留言或在個人主頁添加公衆號聯繫我。