這篇文章主要介紹JS中數(shù)組遍歷方法 for 、forEach() 、for/in、for/of有什么區(qū)別，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)常山,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

我們有多種方法來遍歷 JavaScript 的數(shù)組或者對(duì)象，而它們之間的區(qū)別非常讓人疑惑。Airbnb 編碼風(fēng)格禁止使用 for/in 與 for/of，你知道為什么嗎？

這篇文章將詳細(xì)介紹以下 4 種循環(huán)語法的區(qū)別：

• 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，我們可以訪問數(shù)組的下標(biāo)，而不是實(shí)際的數(shù)組元素值：

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

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

使用for/of，則可以直接訪問數(shù)組的元素值：

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

使用forEach()，則可以同時(shí)訪問數(shù)組的下標(biāo)與元素值：

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

非數(shù)字屬性

JavaScript 的數(shù)組就是 Object，這就意味著我們可以給數(shù)組添加字符串屬性：

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

typeof arr; // 'object'

arr.test = "bad"; // 添加非數(shù)字屬性

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

4 種循環(huán)語法，只有for/in不會(huì)忽略非數(shù)字屬性：

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

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

正因?yàn)槿绱?，使?code>for/in遍歷數(shù)組并不好。

其他 3 種循環(huán)語法，都會(huì)忽略非數(shù)字屬性：

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);
}

要點(diǎn)：避免使用for/in來遍歷數(shù)組，除非你真的要想要遍歷非數(shù)字屬性。可以使用 ESLint 的guard-for-in規(guī)則來禁止使用for/in。

數(shù)組的空元素

JavaScript 數(shù)組可以有空元素。以下代碼語法是正確的，且數(shù)組長(zhǎng)度為 3：

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

arr.length; // 3

讓人更加不解的一點(diǎn)是，循環(huán)語句處理['a',, 'c']與['a', undefined, 'c']的方式并不相同。

對(duì)于['a',, 'c']，for/in與forEach會(huì)跳過空元素，而for與for/of則不會(huì)跳過。

// 打印"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);
}

對(duì)于['a', undefined, 'c']，4 種循環(huán)語法一致，打印的都是"a, undefined, c"。

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

// 等價(jià)于`['a', 'b', 'c',, 'e']`
const arr = ["a", "b", "c"];
arr[5] = "e";

還有一點(diǎn)，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

要點(diǎn)：for/in與forEach會(huì)跳過空元素，數(shù)組中的空元素被稱為"holes"。如果你想避免這個(gè)問題，可以考慮禁用forEach:

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

函數(shù)的 this

for，for/in與for/of會(huì)保留外部作用域的this。

對(duì)于forEach， 除非使用箭頭函數(shù)，它的回調(diào)函數(shù)的 this 將會(huì)變化。

使用 Node v11.8.0 測(cè)試下面的代碼，結(jié)果如下：

"use strict";

const arr = ["a"];

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

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

要點(diǎn)：使用 ESLint 的no-arrow-callback規(guī)則要求所有回調(diào)函數(shù)必須使用箭頭函數(shù)。

Async/Await 與 Generators

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

不能在forEach回調(diào)函數(shù)中使用 await：

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

不能在forEach回調(diào)函數(shù)中使用 yield：

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

對(duì)于for/of來說，則沒有這個(gè)問題:

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);
    }
}

當(dāng)然，你如果將forEach()的回調(diào)函數(shù)定義為 async 函數(shù)就不會(huì)報(bào)錯(cuò)了，但是，如果你想讓forEach按照順序執(zhí)行，則會(huì)比較頭疼。

下面的代碼會(huì)按照從大到小打印 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();

要點(diǎn)：盡量不要在forEach中使用 aysnc/await 以及 generators。

結(jié)論

簡(jiǎn)單地說，for/of是遍歷數(shù)組最可靠的方式，它比for循環(huán)簡(jiǎn)潔，并且沒有for/in和forEach()那么多奇怪的特例。for/of的缺點(diǎn)是我們?nèi)∷饕挡环奖?，而且不能這樣鏈?zhǔn)秸{(diào)用forEach(). forEach()。

使用for/of獲取數(shù)組索引，可以這樣寫：

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

以上是JS中數(shù)組遍歷方法 for 、forEach() 、for/in、for/of有什么區(qū)別的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：JS中數(shù)組遍歷方法for、forEach()、for/in、for/of有什么區(qū)別
URL標(biāo)題：http://aaarwkj.com/article32/ihppsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、域名注冊(cè)、網(wǎng)站排名、網(wǎng)站策劃、用戶體驗(yàn)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)