Why is using " for ... In " for array iteration a bad idea?

在JavaScript中，使用“for...in”循环来迭代数组通常不是一个好的做法，主要有以下几个原因：

1. 非数组元素的迭代：“for...in”循环是为遍历对象属性而设计的，而不仅仅是数组。当使用“for...in”来遍历数组时，它不仅会遍历数组中的所有元素，还可能遍历到数组对象的其他可枚举属性。这意味着除了数组元素，可能还会遍历到一些非预期的属性，导致代码出现意外行为。

   示例:

   javascript
   Array.prototype.newProp = 'test';
   let arr = [10, 20, 30];
   
   for (let index in arr) {
       console.log(arr[index]); // 会输出 10, 20, 30, test
   }

2. 顺序问题：“for...in”循环不能保证按照数组索引的顺序进行迭代。这可能会导致一些基于顺序的逻辑出现错误。

3. 性能问题：与其他数组迭代方法（如“for”循环或“Array.prototype.forEach”）相比，“for...in”循环的效率通常较低。这是因为它需要处理对象的键的额外复杂性，而不仅仅是处理简单的数组索引。

因此，如果你需要迭代数组，更推荐使用专门为数组设计的迭代方法，如“for”循环、forEach()、for...of等，这些方法提供了更清晰、更高效、更可靠的迭代方式。

更好的选择示例:

javascript
let arr = [10, 20, 30];

// 使用 forEach
arr.forEach(function(value, index) {
    console.log(value);
});

// 使用 for...of
for (let value of arr) {
    console.log(value);
}

// 使用传统的 for 循环
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

这些方法都可以更加直接和安全地遍历数组元素，而无需担心非元素属性的干扰或顺序问题。