JavaScript 的 4 種數組遍歷方法： for VS forEach() VS for/in VS for/of

譯者按： JS 騷操做。

• 原文：For vs forEach() vs for/in vs for/of in JavaScript
• 譯者: Fundebug

本文采用意譯，版權歸原做者全部

咱們有多種方法來遍歷 JavaScript 的數組或者對象，而它們之間的區別很是讓人疑惑。Airbnb 編碼風格禁止使用 for/in 與 for/of，你知道爲何嗎？

這篇文章將詳細介紹如下 4 種循環語法的區別：

• for (let i = 0; i < arr.length; ++i)
• arr.forEach((v, i) => { /* ... */ })
• for (let i in arr)
• for (const v of arr)

語法

使用for和for/in，咱們能夠訪問數組的下標，而不是實際的數組元素值：

for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]);
}

for (let i in arr) {
    console.log(arr[i]);
}

使用for/of，則能夠直接訪問數組的元素值：

for (const v of arr) {
    console.log(v);
}

使用forEach()，則能夠同時訪問數組的下標與元素值：

arr.forEach((v, i) => console.log(v));

非數字屬性

JavaScript 的數組就是 Object，這就意味着咱們能夠給數組添加字符串屬性：

const arr = ["a", "b", "c"];

typeof arr; // 'object'

arr.test = "bad"; // 添加非數字屬性

arr.test; // 'abc'
arr[1] === arr["1"]; // true, JavaScript數組只是特殊的Object

4 種循環語法，只有for/in不會忽略非數字屬性：

const arr = ["a", "b", "c"];
arr.test = "bad";

for (let i in arr) {
    console.log(arr[i]); // 打印"a, b, c, bad"
}

正由於如此，使用for/in遍歷數組並很差。

其餘 3 種循環語法，都會忽略非數字屬性：

const arr = ["a", "b", "c"];
arr.test = "abc";

// 打印 "a, b, c"
for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]);
}

// 打印 "a, b, c"
arr.forEach((el, i) => console.log(i, el));

// 打印 "a, b, c"
for (const el of arr) {
    console.log(el);
}

要點： 避免使用for/in來遍歷數組，除非你真的要想要遍歷非數字屬性。可使用 ESLint 的guard-for-in規則來禁止使用for/in。

數組的空元素

JavaScript 數組能夠有空元素。如下代碼語法是正確的，且數組長度爲 3：

const arr = ["a", , "c"];

arr.length; // 3

讓人更加不解的一點是，循環語句處理['a',, 'c']與['a', undefined, 'c']的方式並不相同。

對於['a',, 'c']，for/in與forEach會跳過空元素，而for與for/of則不會跳過。

// 打印"a, undefined, c"
for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]);
}

// 打印"a, c"
arr.forEach(v => console.log(v));

// 打印"a, c"
for (let i in arr) {
    console.log(arr[i]);
}

// 打印"a, undefined, c"
for (const v of arr) {
    console.log(v);
}

對於['a', undefined, 'c']，4 種循環語法一致，打印的都是"a, undefined, c"。

還有一種添加空元素的方式：

// 等價於`['a', 'b', 'c',, 'e']`
const arr = ["a", "b", "c"];
arr[5] = "e";

還有一點，JSON 也不支持空元素：

JSON.parse('{"arr":["a","b","c"]}');
// { arr: [ 'a', 'b', 'c' ] }

JSON.parse('{"arr":["a",null,"c"]}');
// { arr: [ 'a', null, 'c' ] }

JSON.parse('{"arr":["a",,"c"]}');
// SyntaxError: Unexpected token , in JSON at position 12

要點： for/in與forEach會跳過空元素，數組中的空元素被稱爲"holes"。若是你想避免這個問題，能夠考慮禁用forEach:

parserOptions:
    ecmaVersion: 2018
rules:
    no-restricted-syntax:
        - error
        - selector: CallExpression[callee.property.name="forEach"]
          message: Do not use `forEach()`, use `for/of` instead

函數的 this

for，for/in與for/of會保留外部做用域的this。

對於forEach， 除非使用箭頭函數，它的回調函數的 this 將會變化。

使用 Node v11.8.0 測試下面的代碼，結果以下：

"use strict";

const arr = ["a"];

arr.forEach(function() {
    console.log(this); // 打印undefined
});

arr.forEach(() => {
    console.log(this); // 打印{}
});

要點： 使用 ESLint 的no-arrow-callback規則要求全部回調函數必須使用箭頭函數。

Async/Await 與 Generators

還有一點，forEach()不能與 Async/Await 及 Generators 很好的"合做"。

不能在forEach回調函數中使用 await：

async function run() {
  const arr = ['a', 'b', 'c'];
  arr.forEach(el => {
    // SyntaxError
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(el);
  });
}

不能在forEach回調函數中使用 yield：

function* run() {
  const arr = ['a', 'b', 'c'];
  arr.forEach(el => {
    // SyntaxError
    yield new Promise(resolve => setTimeout(resolve, 1000));
    console.log(el);
  });
}

對於for/of來講，則沒有這個問題:

async function asyncFn() {
    const arr = ["a", "b", "c"];
    for (const el of arr) {
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log(el);
    }
}

function* generatorFn() {
    const arr = ["a", "b", "c"];
    for (const el of arr) {
        yield new Promise(resolve => setTimeout(resolve, 1000));
        console.log(el);
    }
}

固然，你若是將forEach()的回調函數定義爲 async 函數就不會報錯了，可是，若是你想讓forEach按照順序執行，則會比較頭疼。

下面的代碼會按照從大到小打印 0-9：

async function print(n) {
    // 打印0以前等待1秒，打印1以前等待0.9秒
    await new Promise(resolve => setTimeout(() => resolve(), 1000 - n * 100));
    console.log(n);
}

async function test() {
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(print);
}

test();

要點： 儘可能不要在forEach中使用 aysnc/await 以及 generators。

結論

簡單地說，for/of是遍歷數組最可靠的方式，它比for循環簡潔，而且沒有for/in和forEach()那麼多奇怪的特例。for/of的缺點是咱們取索引值不方便，並且不能這樣鏈式調用forEach(). forEach()。

使用for/of獲取數組索引，能夠這樣寫：

for (const [i, v] of arr.entries()) {
    console.log(i, v);
}

參考

• For-each over an array in JavaScript?
• Why is using 「for…in」 with array iteration a bad idea?
• Array iteration and holes in JavaScript

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等衆多品牌企業。歡迎你們免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址：
https://blog.fundebug.com/2019/03/11/4-ways-to-loop-array-inj-javascript/