前言

使用過forEach的人大致有兩種：普通使用，簡(jiǎn)簡(jiǎn)單單；復(fù)雜使用，總想搞出點(diǎn)花樣來，結(jié)果一些莫名其妙的bug就出現(xiàn)了，解決這些bug所花費(fèi)的時(shí)間都可以換一種思路實(shí)現(xiàn)了，能用作for循環(huán)的，又不只是forEach。沒錯(cuò)，筆者就是后者，終究是自己“學(xué)藝不精”。于是乎，花點(diǎn)時(shí)間，結(jié)合自己的實(shí)際開發(fā)經(jīng)驗(yàn)，再來好好理理forEach。

語法

forEach()是數(shù)組對(duì)象的一個(gè)原型方法，該方法會(huì)對(duì)數(shù)組中的每一個(gè)元素執(zhí)行一次給定的回調(diào)函數(shù)，并且始終返回undefined。類數(shù)組對(duì)象是沒有forEach方法的，例如arguments。forEach的用法比較簡(jiǎn)單：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

實(shí)際例子：

const arr = [1,2,3];
arr.forEach(item => console.log(item)); // 1,2,3

參數(shù)說明：

callback：數(shù)組中每一個(gè)元素將要執(zhí)行的回調(diào)函數(shù)，可以有1-3個(gè)參數(shù)

• currentValue：當(dāng)前正在處理的元素，必傳
• index：當(dāng)前正在處理的元素的索引，可選參數(shù)
• array：forEach方法操作的原數(shù)組對(duì)象，可選參數(shù)

thisArg：當(dāng)前執(zhí)行callback回調(diào)函數(shù)時(shí)，回調(diào)函數(shù)的this指向，默認(rèn)指向的全局對(duì)象，可選參數(shù)

語法看起來并不復(fù)雜，那么看看是否會(huì)犯下面的錯(cuò)誤用法：

錯(cuò)誤用法

錯(cuò)誤用法指的是標(biāo)題所描述的操作，不是正文內(nèi)容，切記，切記。

添加或刪除原數(shù)組中的數(shù)據(jù)

forEach()在第一次調(diào)用callback時(shí)就會(huì)確定遍歷的范圍，一般來說會(huì)按照索引升序?yàn)閿?shù)組中的有效元素執(zhí)行一次callback函數(shù)。如果是未初始化的數(shù)組項(xiàng)或者在調(diào)用forEach()后添加到數(shù)組中的項(xiàng)都不會(huì)被訪問到，如果在遍歷時(shí)刪除數(shù)組中的元素，則可能會(huì)出現(xiàn)意外的情況。

無效的值會(huì)直接跳過

調(diào)用后添加元素，將不會(huì)被訪問到

const arr = [1,,,2,4];
console.log(arr.length); // 5
let callbackCounts = 0;
arr.forEach(item => {
    console.log(item); // 1 2 4
    callbackCounts++;
    arr.push(6); // 調(diào)用后添加元素，將不會(huì)被訪問到
})
console.log(callbackCounts); // 3
console.log(arr); // [1,,,2,4,6,6,6]

刪除數(shù)組中的元素

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.length); // 4
let callbackCounts = 0;
arr.forEach((item, index) => {
    // arr.shift();
    console.log(item); // 'a','b','d',其中'c'會(huì)被跳過
    if (item === 'b') {
        // arr.shift(); // 刪除頭部，arr的結(jié)果：['b', 'c', 'd']
        arr.splice(index, 1); // 刪除當(dāng)前元素，arr的結(jié)果：['a', 'c', 'd']
        // arr.splice(-1); // 刪除最后一個(gè)元素，arr的結(jié)果：['a', 'b', 'c']
    }
    callbackCounts++;
})
console.log(callbackCounts); // 3
console.log(arr); // ['b', 'c', 'd']

刪除元素時(shí)情況可能會(huì)比較復(fù)雜一點(diǎn)，感興趣的朋友可以自己測(cè)試，我們可以這么理解：

• forEach在調(diào)用時(shí)就確定了遍歷范圍，傳遞給callback的值是forEach在遍歷到該元素時(shí)的值，即使在callback中刪除了數(shù)組中該元素，但是值已經(jīng)傳遞進(jìn)來
• 如果是有效的值，callbackCounts會(huì)遞增。在下一輪循環(huán)時(shí)，forEach會(huì)根據(jù)上一輪循環(huán)時(shí)的索引得到當(dāng)前循環(huán)對(duì)應(yīng)的值，注意此時(shí)數(shù)組長(zhǎng)度已經(jīng)改變，就會(huì)出現(xiàn)“跳過”的現(xiàn)象
• 然后重復(fù)操作，知道數(shù)組遍歷完畢

搞懂了”跳過“，你還敢想當(dāng)然的刪除數(shù)組中的數(shù)據(jù)嗎？

修改原數(shù)組中的數(shù)據(jù)

既然不能添加和刪除，那我要是修改呢？其實(shí)修改數(shù)組中的元素，不是不可以，只是要注意使用方法。

• 如果數(shù)組中是基本數(shù)據(jù)類型：string、number、boolean等，只使用回調(diào)函數(shù)的第一個(gè)參數(shù)修改數(shù)組中的值是不會(huì)影響原數(shù)組的

  const arr = [1,2,3,4,5]
  arr.forEach((item, index, array) => {
      item+=1; // [1,2,3,4,5]
      // arr[index]+=1; // [2,3,4,5,6]
      // array[index]+=1; // [2,3,4,5,6]
  })
  console.log(arr);

• 如果數(shù)組中的是引用數(shù)據(jù)類型：object等，直接替換數(shù)組項(xiàng)是不會(huì)影響原數(shù)組的

  const arr = [
      {name: '張三', id: 1},
      {name: '李四', id: 2}
  ]
  arr.forEach((item, index, array) => {
      if (item.id === 2) {
          item = {name: '王五', id: item.id}; // 張三、李四
          // Object.assign(item, {name: '王五', id: item.id}); // 張三、王五
          // arr[index] = {name: '王五', id: item.id}; // 張三、王五
          // array[index] = {name: '王五', id: item.id}; // 張三、王五
      }
  })
  console.log(arr);

  數(shù)組對(duì)象在遍歷時(shí)，實(shí)際上是將數(shù)組項(xiàng)的引用地址賦值給item，如果將另一個(gè)對(duì)象的引用地址重新賦值給item，并不會(huì)改變?cè)玫刂返臄?shù)據(jù)，也就不會(huì)影響原數(shù)組。

• 如果數(shù)組中的是引用數(shù)據(jù)類型：object等，此時(shí)我們只修改數(shù)組項(xiàng)的某一個(gè)屬性，這個(gè)時(shí)候是會(huì)影響原數(shù)組的

  const arr = [
      {name: '張三', id: 1},
      {name: '李四', id: 2}
  ]
  arr.forEach((item, index, array) => {
  if (item.id === 2) {
      item.name = '王五';
      // arr[index].name = '王五'; // 張三、王五
      // array[index].name = '王五'; // 張三、王五
  }
  })
  console.log(arr); // 張三、王五

  道理呢也和2類似，item指向的是引用地址，修改屬性相當(dāng)于是修改了引用地址中對(duì)象的屬性，也就會(huì)修改原數(shù)組

綜上我們可以發(fā)現(xiàn)，如果要在forEach中修改原數(shù)組，那么需要在其回調(diào)函數(shù)中，通過索引index或者借助Object.assgin()才可以實(shí)現(xiàn)，最終原理都是修改引用地址中的數(shù)據(jù)，而不是直接修改。

回調(diào)函數(shù)中使用異步函數(shù)

異步函數(shù)和同步函數(shù)的執(zhí)行順序此處就不細(xì)說，詳情可以移步：搞不清楚事件循環(huán)，那就看看這篇文章，簡(jiǎn)單來說就是同步代碼先于異步代碼執(zhí)行。

看一個(gè)例子：

const arr = [1,2,3,4,5]
let sum = 0;
let callbackCounts = 0;
function Sum(a, b) {
    return new Promise((resovle) => {
        resovle(a + b)
    })
}
arr.forEach(async (item, index, array) => {
    sum = await Sum(sum, item)
})
console.log(sum); // 0

實(shí)際得到的求和的值并不是我們期待的15，而是0。

如果我們需要實(shí)現(xiàn)異步求和，可以使用for循環(huán)實(shí)現(xiàn)：

const arr = [1,2,3,4,5]
let sum = 0;
let callbackCounts = 0;
function Sum(a, b) {
    return new Promise((resovle) => {
        resovle(a + b)
    })
}
(async function() {
    for (let item of arr) {
        sum = await Sum(sum, item)
    }
    console.log(sum); // 15
})();

使用return結(jié)束循環(huán)

在使用for循環(huán)時(shí)，我們一般可使用break、return來跳出循環(huán)，拋出異常也可以，但是這不是正常的開發(fā)流程。我們來試一下在forEach中使用break、return有沒有作用：

forEach結(jié)束循環(huán)

const arr = [1,2,3,4,5]
let callbackCounts = 0;
arr.forEach((item, index, array) => {
    callbackCounts++;
        if (item === 2) {
        return; // forEach中不能使用break，即使使用return，也無法中止循環(huán)
    }
})
console.log(arr.length, callbackCounts); // 5 5

如果非得要跳出forEach循環(huán)，首先建議的是使用其他循環(huán)方法，例如：for、for of、for in、map等，其次我們可以考慮拋出一個(gè)異常來跳出forEach循環(huán)：

const arr = [1,2,3,4,5]
let callbackCounts = 0;
try {
    arr.forEach((item, index, array) => {
        callbackCounts++;
        if (item === 2) {
            throw 'throw forEach';
        }
    })
} catch (e) {
    console.log(arr.length, callbackCounts); // 5 2
}

如果真要使用throw來拋出異常，那么使用其他循環(huán)方法不香嗎

未傳入this

forEach()也可能存在this指向問題，例如：

function Counter() {
    this.sum = 0;
}
Counter.prototype.add = function (array) {
    array.forEach(function(element) {
        this.sum += element;
    });
}
const obj = new Counter();
obj.add([1,2,3,4,5])
console.log(obj.sum); // 0

未指定this，則默認(rèn)未window對(duì)象，此時(shí)的this.sum為undefined，而我們想的是this指向傳入的數(shù)組。那么需要傳入this或者使用箭頭函數(shù)。

array.forEach((element) => {
    this.sum += element;
});
array.forEach(function(element) {
    this.sum += element;
}, this);

正確用法

避免錯(cuò)誤用法，當(dāng)然就是正確用法咯。

其實(shí)forEach在設(shè)計(jì)出來只是為了簡(jiǎn)化for循環(huán)的遍歷，如果要過多的進(jìn)行其他操作，就違背了設(shè)計(jì)初衷了。每一個(gè)API都有自己的適用范圍，如果堅(jiān)持要一把梭，可能就會(huì)踩很多坑。

簡(jiǎn)單總結(jié)一下正確的使用方法：

• 最好只限于遍歷原數(shù)組，不涉及修改原數(shù)組中的數(shù)據(jù)
• 避免在回調(diào)函數(shù)中存在異步操作
• 不能使用return
• forEach()的回調(diào)函數(shù)使用箭頭函數(shù)，可避免this指向問題

總結(jié)

• forEach本身并不會(huì)改變?cè)瓟?shù)組，但是其回調(diào)函數(shù)可能會(huì)修改。如果真要修改原數(shù)組，建議使用map、filter等方法
• forEach方法始終返回undefined，這使得forEach無法像map、filter一樣可以鏈?zhǔn)秸{(diào)用
• 除了拋出異常外，forEach無法被中止或者跳出循環(huán)，如果要跳出循環(huán)，建議使用其他for循環(huán)方法
• 如果是涉及異步函數(shù)，可以考慮使用for await of代替forEach

到此這篇關(guān)于JavaScript中forEach錯(cuò)誤用法的文章就介紹到這了,更多相關(guān)js forEach錯(cuò)誤用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論