了解 JavaScript 中可迭代屬性和可枚舉屬性之間的差異

使用 JavaScript 時，您經常需要循環存取資料集合。執行此操作的兩種常見方法是 for-in 和 for-of 系統。但是，這些循環用於不同的上下文和不同類型的集合。理解可迭代屬性和可枚舉屬性之間的差異對於有效使用這些循環至關重要。

1. for-in 迴圈：迴圈遍歷所有可列舉屬性

for-in 迴圈旨在迭代物件的可枚舉屬性。可枚舉屬性是指那些在循環物件或呼叫 Object.keys() 等方法時可見的屬性。

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

for (const key in obj) {
    console.log(key); // Outputs: name, age, isMarried
}

在此範例中，for-in 循環迭代 obj 物件的所有可枚舉屬性，包括動態新增的 isMarried 屬性。

2. for-of 記憶：循環所有可迭代對象

另一方面，for-of 記憶環用於迭代可迭代物件。可迭代物件是具有 Symbol.iterator 方法的物件。可迭代物件的常見範例包括陣列、字串、映射和集合。

const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

這裡，for-of 記憶體迭代數組 arr，忽略 anotherFruit 屬性，因為它不是可迭代序列的一部分。

3. 數組是可迭代的，物件是不可迭代的

預設情況下，JavaScript 中的陣列是可迭代的，因為它們有一個內建的 Symbol.iterator 方法。然而，普通物件沒有此方法，因此不可迭代。

const arr = ['apple', 'pear'];

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

const obj = {
    name: 'john',
    age: '24'
};

for (const key of obj) {
    console.log(key); // Throws TypeError: obj is not iterable
}

在上面的程式碼中，嘗試在物件上使用 for-of 連結會導致 TypeError，因為物件沒有實作 Symbol.iterator 方法。

4.錯誤解釋：TypeError: obj is not iterable

當您嘗試在不可迭代物件上使用 for-of 系統時，JavaScript 會拋出 TypeError。出現此錯誤的原因是該物件沒有 for-of 系統所需的 Symbol.iterator 方法。

const obj = {
    name: 'john',
    age: '24'
};

try {
    for (const key of obj) {
        console.log(key);
    }
} catch (e) {
    console.error(e); // Outputs: TypeError: obj is not iterable
}

程式碼範例

以下是一個完整的範例，示範了 for-in 和 for-of 記憶體之間的差異：

const log = console.log;
const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

log('Using for-of loop:');
for (const fruit of arr) {
    log(fruit); // Outputs: apple, pear
}

log('Using for-in loop:');
for (const fruit in arr) {
    log(fruit); // Outputs: 0, 1, anotherFruit
}

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

log('Using for-in loop:');
for (const key in obj) {
    log(key); // Outputs: name, age, isMarried
}

log('Using for-of loop:');
try {
    for (const key of obj) {
        log(key);
    }
} catch (e) {
    log(e); // Outputs: TypeError: obj is not iterable
}

結論

理解可迭代屬性和可枚舉屬性之間的差異對於有效使用 JavaScript 的 for-in 和 for-of 記憶體至關重要。 for-in 迴圈用於迭代物件的可枚舉屬性，而 for-of 連結旨在迭代可迭代物件（如陣列）。濫用這些循環可能會導致錯誤，例如嘗試在不可迭代物件上使用 for-of 系統時遇到 TypeError。透過掌握這些差異，您可以編寫更健壯且無錯誤的 JavaScript 程式碼。

以上是了解 JavaScript 中可迭代屬性和可枚舉屬性之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！