JavaScript中foreach是用于遍歷數(shù)組的方法，將遍歷到的元素傳遞給回調(diào)函數(shù)，遍歷的數(shù)組不能是空的要有值。

foreach 語(yǔ)法：

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

forEach()方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。

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

輸出為：

a;b;c;

forEach()方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。總是返回undefined；

var arr = [1,2,3,4];   arr.forEach(alert);  //等價(jià)于：var arr = [1, 2, 3, 4];for (var k = 0, length = arr.length; k < length; k++) {  alert(array[k]);}

forEach方法中的function回調(diào)有三個(gè)參數(shù)：
第一個(gè)參數(shù)是遍歷的數(shù)組內(nèi)容，
第二個(gè)參數(shù)是對(duì)應(yīng)的數(shù)組索引，
第三個(gè)參數(shù)是數(shù)組本身

forEach使用的坑

1、forEach不支持break

大家都知道，在使用for循環(huán)時(shí)可以使用break跳出循環(huán)，比如我希望找到數(shù)組中符合條件的第一個(gè)元素就跳出循環(huán)，這對(duì)于優(yōu)化數(shù)組遍歷是非常棒的。很遺憾，forEach并不支持break操作，使用break會(huì)導(dǎo)致報(bào)錯(cuò)。

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; //報(bào)錯(cuò)    };});

那forEach能不能跳出循環(huán)呢？可以，不過(guò)不是使用break，而是結(jié)合try catch操作

2、forEach中使用return無(wú)效

首先需要確定的，直接再for循環(huán)中使用return會(huì)報(bào)錯(cuò)（函數(shù)中使用for可以return），forEach中使用return不會(huì)報(bào)錯(cuò)，但rerutn并不會(huì)生效，我們來(lái)看個(gè)例子：

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

上述代碼想要找到數(shù)字2在數(shù)組中的索引，但return并不會(huì)起到終止代碼運(yùn)行并返回值的作用。

當(dāng)然如果我們真的要用return返回某個(gè)值，那就只能將return操作放在函數(shù)中，而不是forEach循環(huán)中，像這樣：

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

3、forEach刪除自身元素index不會(huì)被重置

還記得文章開頭的問(wèn)題嗎，那段代碼其實(shí)只會(huì)執(zhí)行一次，數(shù)組也不會(huì)被刪除干凈，這是因?yàn)閒orEach在遍歷跑完回調(diào)函數(shù)后，會(huì)隱性讓index自增，像這樣：

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

當(dāng)?shù)谝淮伪闅v結(jié)束，此時(shí)數(shù)組為[2]而index變成了1，此時(shí)數(shù)組最大索引只是0，不滿足條件，所以跳出了循環(huán)。

靈機(jī)一動(dòng)，有沒(méi)有什么辦法讓此時(shí)的forEach不跳出循環(huán)呢，當(dāng)然有，使用ES6的拓展運(yùn)算符。

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

通過(guò)拓展運(yùn)算符重置數(shù)組arr，達(dá)到不跳出循環(huán)的目的，你會(huì)發(fā)現(xiàn)內(nèi)部確實(shí)執(zhí)行了兩次，很遺憾的是index依舊沒(méi)被重置，所以數(shù)組arr還是無(wú)法在遍歷的同時(shí)刪空自己。

因?yàn)樵趯?shí)際開發(fā)中，遍歷數(shù)組同時(shí)刪除某項(xiàng)的操作十分常見(jiàn)，所以對(duì)于習(xí)慣了forEach的同學(xué)，這一點(diǎn)一定要注意。

for與forEach的區(qū)別

那么說(shuō)到這里，for循環(huán)與forEach有什么區(qū)別呢？我想大家應(yīng)該都能說(shuō)上幾點(diǎn)了吧，比如：

1）、for循環(huán)可以使用break跳出循環(huán)，但forEach不能。

2）、for循環(huán)可以控制循環(huán)起點(diǎn)（i初始化的數(shù)字決定循環(huán)的起點(diǎn)），forEach只能默認(rèn)從索引0開始。

3）、for循環(huán)過(guò)程中支持修改索引（修改 i），但forEach做不到（底層控制index自增，我們無(wú)法左右它）。

數(shù)組遍歷并刪除自身

好了，我們回歸問(wèn)題的本質(zhì)，怎么在遍歷一個(gè)數(shù)組的同時(shí)，并刪除符合條件的所有項(xiàng)呢？

其實(shí)很簡(jiǎn)單，我們可以使用for循環(huán)，像這樣：

let arr = [1, 2, 1],    i = 0,    length = arr.length;
for (; i < length; i++) {    // 刪除數(shù)組中所有的1    if (arr[i] === 1) {        arr.splice(i, 1);        //重置i，否則i會(huì)跳一位        i--;    };};console.log(arr);//[2]

刪除符合條件的所有項(xiàng)，不就是過(guò)濾嗎？過(guò)濾，本能想到filter方法，也很簡(jiǎn)單：

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

更少的代碼量，只是得新建一個(gè)變量來(lái)接受filter方法的返回值。

你說(shuō)，我這個(gè)人就比較倔強(qiáng)，forEach因?yàn)閕ndex索引無(wú)法重置，對(duì)于刪除數(shù)組項(xiàng)真的很困難，那我非要用forEach去做這個(gè)功能行不行，當(dāng)然行，只是我們得讓數(shù)組反過(guò)來(lái)遍歷：

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

當(dāng)然我們并不推薦這么做，因?yàn)閿?shù)組方法繁多，并沒(méi)有絕對(duì)的好與不好，什么情況下使用對(duì)的方法才是更棒的做法，這里使用forEach雖然達(dá)到了目的，但代碼閱讀體驗(yàn)并不太好。

請(qǐng)點(diǎn)擊下方公眾號(hào)