在 JavaScript 中使用 for..in 循环的缺点

在 JavaScript 中，我们经常会用到 for..in 循环来遍历对象或数组，然而，这种方法也存在一些缺点，下面我们来一一介绍。

1. 无法保证顺序

使用 for..in 循环遍历对象或数组时，无法保证属性或元素的顺序。例如：

const arr = [1,2,3,4];

for(let i in arr){
    console.log(i); // 0 1 2 3
}

虽然数组中的元素是按照从左到右的顺序排列的，但是 for..in 循环却并不保证输出的顺序，这样可能会导致一些问题。

2. 可枚举的属性

使用 for..in 循环只会遍历对象或数组可枚举的属性。如果这个对象或数组存在不可枚举的属性，那么这些属性就不会被遍历到。

例如，下面这个示例中的 obj 就存在一个不可枚举的属性：

const obj = Object.defineProperty({}, 'a', {
    value: 1,
    enumerable : false
});

for(let i in obj){
   console.log(i); // 没有输出
}

3. 原型链上的属性

使用 for..in 循环遍历对象时，会将对象原型链上的属性也一并遍历出来。这可能会导致一些问题。

例如，下面这个示例中的 obj 继承了 Array：

const obj = [];
obj.push(1);
obj.push(2);

for(let i in obj){
   console.log(i); // 0 1 2 push
}

很明显，obj 对象中并不存在 push 属性，这是因为 push 是继承自 Array 对象的。

4. 只适用于对象或数组

for..in 循环只适用于遍历对象或数组，不能遍历原始值（如字符串、数字、布尔值等）。

例如，下面这个示例中的 str 是一个字符串：

const str = 'hello';
str[Symbol.iterator] = function*(){
    yield 't';
    yield 'e';
    yield 's';
    yield 't';
};

for(let i in str){
    console.log(i); // 0 1 2 3 4
}

在这个示例中，我们给字符串对象添加了一个 Symbol.iterator 属性，这个属性返回一个迭代器对象，每次调用 next() 方法都会返回一个字符。但是，使用 for..in 循环并不能遍历这个迭代器对象。

总结

尽管 for..in 循环在某些情况下很方便，但是也存在种种缺点。我们在使用时需要注意这些缺点，以避免出现一些问题。