js forEach參數詳解，forEach與for循環區別，forEach中如何刪除數組元素

 壹 ❀ 引

在JS開發工做中，遍歷數組的操做可謂十分常見了，那麼像for循環，forEach此類方法天然也不會陌生，我我的也以爲forEach不值得寫一篇博客記錄，直到我遇到了一個有趣的問題，咱們來看一段代碼：

let arr = [1, 2]; arr.forEach((item, index) => { arr.splice(index, 1); console.log(1); //輸出幾回？ }); console.log(arr) //?

請問，這段代碼執行完畢後arr輸出爲多少？循環體內的console操做會執行幾回？

本文會從forEach介紹開始，談到forEach使用中可能會踩的坑，以及for循環與forEach的區別，讓咱們從新感覺forEach，那麼本文開始。

 貳 ❀ forEach參數

與for循環同樣，forEach也屬於完整遍歷數組的方法，並會對數組每項元素執行提供的回調函數，一個完整的forEach應該是這樣，咱們一一解釋回調函數的參數，與後方的this有何做用。

arr.forEach(function(self,index,arr){},this);

self：數組當前遍歷的元素，默認從左往右依次獲取數組元素。

index：數組當前元素的索引，第一個元素索引爲0，依次類推。

arr：當前遍歷的數組。

this：回調函數中this指向。

咱們來看個簡單的forEach例子，增強對於這四個參數的印象：

let arr1 = [1, 2, 3, 4]; let obj = { a: 1 }; arr1.forEach(function (self, index, arr) { console.log(`當前元素爲${self}索引爲${index},屬於數組${arr}`); //作個簡單計算
    console.log(self + this.a); }, obj)

能夠看到，arr參數其實就是咱們正在遍歷的數組，而回調函數中的this指向咱們提供的obj。是否是很是簡單？

你確定在想，第三個參數arr有啥意義，遍歷本身還提供本身做爲參數，其實這個參數還挺好用，好比咱們能夠利用它作數組去重，像這樣：

let arr1 = [1, 2, 1, 3, 1]; let arr2 = []; arr1.forEach(function (self, index, arr) { arr.indexOf(self) === index ? arr2.push(self) : null; }); console.log(arr2); //[1,2,3]

OK，forEach介紹完畢，咱們來講說forEach在使用中有哪些坑（我目前遇到的）。

 叄 ❀ forEach使用的坑

1.forEach不支持break

你們都知道，在使用for循環時可使用break跳出循環，好比我但願找到數組中符合條件的第一個元素就跳出循環，這對於優化數組遍歷是很是棒的。很遺憾，forEach並不支持break操做，使用break會致使報錯。

let arr = [1, 2, 3, 4], i = 0, length = arr.length; for (; i < length; i++) { console.log(arr[i]); //1,2
    if (arr[i] === 2) { break; }; }; arr.forEach((self,index) => { console.log(self); if (self === 2) { break; //報錯
 }; });

那forEach能不能跳出循環呢？能夠，不過不是使用break，而是結合try catch操做，有興趣但是看看博主這篇文章 js forEach跳出循環

2.forEach中使用return無效

首先須要肯定的，for循環中使用return會報錯，forEach中使用return不會報錯，但rerutn並不會生效，咱們來看個例子：

let arr = [1, 2, 3, 4]; function find(array, num) { array.forEach((self, index) => { if (self === num) { return index; }; }); }; let index = find(arr, 2);// undefined

上述代碼想要找到數字2在數組中的索引，但return並不會起到終止代碼運行並返回值的做用。

固然若是咱們真的要用return返回某個值，那就只能將return操做放在函數中，而不是forEach循環中，像這樣：

function find(array, num) { let _index; array.forEach((self, index) => { if (self === num) { _index = index; }; }); return _index; };

3.forEach刪除自身元素index不會被重置

還記得文章開頭的問題嗎，那段代碼其實只會執行一次，數組也不會被刪除乾淨，這是由於forEach在遍歷跑完回調函數後，會隱性讓index自增，像這樣：

arr.forEach((item, index) => { arr.splice(index, 1); console.log(1); //這裏隱性讓index自增長1
    index++; });

當第一次遍歷結束，此時數組爲[2]而index變成了1，此時數組最大索引只是0，不知足條件，因此跳出了循環。

靈機一動，有沒有什麼辦法讓此時的forEach不跳出循環呢，固然有，使用ES6的拓展運算符。

[...arr].forEach((item, index) => { arr.splice(index, 1); console.log(1); });

經過拓展運算符重置數組arr，達到不跳出循環的目的，你會發現內部確實執行了兩次，很遺憾的是index依舊沒被重置，因此數組arr仍是沒法在遍歷的同時刪空本身。

由於在實際開發中，遍歷數組同時刪除某項的操做十分常見，因此對於習慣了forEach的同窗，這一點必定要注意。

 肆 ❀ for與forEach的區別

那麼說到這裏，for循環與forEach有什麼區別呢？我想你們應該都能說上幾點了吧，好比：

1.for循環可使用break跳出循環，但forEach不能。

2.for循環能夠控制循環起點（i初始化的數字決定循環的起點），forEach只能默認從索引0開始。

3.for循環過程當中支持修改索引（修改 i），但forEach作不到（底層控制index自增，咱們沒法左右它）。

 伍 ❀ 數組遍歷並刪除自身

好了，咱們迴歸問題的本質，怎麼在遍歷一個數組的同時，並刪除符合條件的全部項呢？

其實很簡單，咱們可使用for循環，像這樣：

let arr = [1, 2, 1], i = 0, length = arr.length; for (; i < length; i++) { // 刪除數組中全部的1
    if (arr[i] === 1) { arr.splice(i, 1); //重置i，不然i會跳一位
        i--; }; }; console.log(arr);//[2]

刪除符合條件的全部項，不就是過濾嗎？過濾，本能想到filter方法，也很簡單：

var arr1 = arr.filter((index) => { return index !== 1; }); console.log(arr1); //[2]

更少的代碼量，只是得新建一個變量來接受filter方法的返回值。

你說，我這我的就比較倔強，forEach由於index索引沒法重置，對於刪除數組項真的很困難，那我非要用forEach去作這個功能行不行，固然行，只是咱們得讓數組反過來遍歷：

arr.slice().reverse().forEach(function (item, index, arr1) { if (item === 1) { arr.splice(arr1.length - 1 - index, 1); } }); console.log(arr);//[2]

固然咱們並不推薦這麼作，由於數組方法繁多，並無絕對的好與很差，什麼狀況下使用對的方法纔是更棒的作法，這裏使用forEach雖然達到了目的，但代碼閱讀體驗並不太好。

好了，介紹完了forEach，順便解決了文章開頭的問題。

那麼本文結束。

 陸 ❀ 參考

javascript – 如何從forEach循環中的數組中刪除元素？