for...of vs for...in JavaScript 中的循環

在 JavaScript 中有多種方法可以遍歷對象、數組和 DOM 元素。傳統上，基本的 for 循環用於執行迭代。但是，最近，其他迭代方法變得更流行了。

在本文中，我將描述 for...of 之間的區別 和 for...in 循環；現代 JavaScript 中最常用的兩種迭代方法。這兩個語句都用於循環目的。它們之間的主要區別在於它們迭代的內容。

for...in 循環

for...in 語句遍歷對象的所有可枚舉屬性，包括不按特定順序繼承的可枚舉屬性：

const book = {
    title: 'JavaScript for Beginners',
    price: '$9.99',
    year: 2018,
    pubisher: 'Amazon, Inc.'
};

// iterate over the object
for (const key in book) {
    console.log(`${key} --> ${book[key]}`);
}

// title --> JavaScript for Beginners
// price --> $9.99
// year --> 2018
// pubisher --> Amazon, Inc.

要跳過對象繼承的屬性，只需使用 hasOwnProperty() 方法：

for (const key in book) {
    if (book.hasOwnProperty(key)) {
        console.log(`${key} --> ${book[key]}`);
    }
}

for...of 循環

for...of 語句循環遍歷可迭代對象的值，如數組、字符串、映射、集合、NodeList 等。它不適用於對象，因為它們不可迭代。

這是一個例子：

const names = ['Alex', 'Emma', 'Atta', 'John'];

// iterate over names
for (const name of names) {
    console.log(`Hey ${name}!`);
}

// Hey Alex!
// Hey Emma!
// Hey Atta!
// Hey John!

經驗法則： 始終使用 for...in 循環遍歷對象。對於 JavaScript 中的各種可迭代對象，for...of 是要走的路！