了解 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中文网其他相关文章！