Js中foreach()用法及使用的坑


foreach 語法:

[ ].forEach(function(value,index,array){
  //code something
});

forEach()方法對數組的每個元素執行一次提供的函數。

var array = ['a', 'b', 'c'];
array.forEach(function(element) {
console.log(element);
});

輸出為:

a;
b;
c;

forEach()方法對數組的每個元素執行一次提供的函數。總是返回undefined;

var arr = [1,2,3,4]; 
arr.forEach(alert);

//等價於:
var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
alert(array[k]);
}

forEach方法中的function回調有三個參數:
第一個參數是遍歷的數組內容,
第二個參數是對應的數組索引,
第三個參數是數組本身

 

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操作

2.forEach中使用return無效

首先需要確定的,直接再for循環中使用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自增,我們無法左右它)。

http://www.bijianshuo.com 軟文發稿平台

數組遍歷並刪除自身

好了,我們回歸問題的本質,怎么在遍歷一個數組的同時,並刪除符合條件的所有項呢?

其實很簡單,我們可以使用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]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM