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

JavaScript中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,2if (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自增加1index++; });

當第一次遍歷結束，此時數組為[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++) {// 刪除數組中所有的1if (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]

總結

以上是生活随笔為你收集整理的JavaScript中foreach()用法及使用的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。