为什么在数组迭代中使用“for...in”不是一个好主意？

我认为对于如 Triptych 的回答或 CMS 的回答中所述，关于在某些情况下应避免使用for...in, 我没有太多要补充的。

然而，我想要补充的是，在现代浏览器中，有一种可以替代for...in并可在for...in无法使用的情况下使用的方法。这种方法是使用for...of：

for (var item of items) {
    console.log(item);
}

注意：

很遗憾，任何版本的Internet Explorer都不支持for...of（Edge 12+可以），因此你需要等待一段时间才能在客户端生产代码中使用它。然而，在服务器端JS代码中使用它应该是安全的（如果您使用Node.js）。

任何对象都可以具有与其关联的任意属性。 尤其是将其他属性加载到数组实例上并没有什么可怕的事情。希望仅查看索引数组属性的代码因此必须坚持整数索引。 完全了解 for ... in 的工作原理和真正需要查看所有属性的代码，那么也可以。

1. 它也遍历继承属性： 首先，任何对Array.prototype的扩展都应该使用Object.defineProperty()进行，并且它们的enumerable描述符应设置为false。任何没有这样做的库都不应该被使用。
2. 后期添加到继承链中的属性也会被计数： 当通过Object.setPrototypeOf或Class extend进行数组子类化时。您应该再次使用Object.defineProperty()，默认情况下将writable、enumerable和configurable属性描述符设置为false。让我们在这里看一个数组子类化示例...

function Stack(...a){
  var stack = new Array(...a);
  Object.setPrototypeOf(stack, Stack.prototype);
  return stack;
}
Stack.prototype = Object.create(Array.prototype);                                 // now stack has full access to array methods.
Object.defineProperty(Stack.prototype,"constructor",{value:Stack});               // now Stack is a proper constructor
Object.defineProperty(Stack.prototype,"peak",{value: function(){                  // add Stack "only" methods to the Stack.prototype.
                                                       return this[this.length-1];
                                                     }
                                             });
var s = new Stack(1,2,3,4,1);
console.log(s.peak());
s[s.length] = 7;
console.log("length:",s.length);
s.push(42);
console.log(JSON.stringify(s));
console.log("length:",s.length);

for(var i in s) console.log(s[i]);

所以你看到了…… for in 循环现在是安全的，因为你关心你的代码。

3. for in 循环很慢：绝对不是。如果你需要间歇地循环稀疏数组，它是迭代速度最快的方法。这是一个非常重要的性能技巧，每个人都应该知道。让我们看一个例子，我们将循环遍历一个稀疏数组。

var a = [];
a[0] = "zero";
a[10000000] = "ten million";
console.time("for loop on array a:");
for(var i=0; i < a.length; i++) a[i] && console.log(a[i]);
console.timeEnd("for loop on array a:");
console.time("for in loop on array a:");
for(var i in a) a[i] && console.log(a[i]);
console.timeEnd("for in loop on array a:");

1. for...in 循环遍历它们自己所有可枚举的属性以及它们的原型的可枚举属性。在数组迭代中，我们通常只想遍历数组本身。即使您自己不向数组添加任何内容，您的库或框架可能会添加一些东西。

Array.prototype.hithere = 'hithere';

var array = [1, 2, 3];
for (let el in array){
    // the hithere property will also be iterated over
    console.log(el);
}

2. for...in循环不保证特定的迭代顺序。尽管这个顺序在大多数现代浏览器中是可见的，但仍不能100％地保证。
3. for...in循环会忽略undefined数组元素，即尚未被分配的数组元素。

示例::

const arr = []; 
arr[3] = 'foo';   // resize the array to 4
arr[4] = undefined; // add another element with value undefined to it

// iterate over the array, a for loop does show the undefined elements
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

console.log('\n');

// for in does ignore the undefined elements
for (let el in arr) {
    console.log(arr[el]);
}

另外，由于语义的原因，for in 处理数组的方式（即与任何其他JavaScript对象相同）与其他流行语言不一致。

// C#
char[] a = new char[] {'A', 'B', 'C'};
foreach (char x in a) System.Console.Write(x); //Output: "ABC"

// Java
char[] a = {'A', 'B', 'C'};
for (char x : a) System.out.print(x);          //Output: "ABC"

// PHP
$a = array('A', 'B', 'C');
foreach ($a as $x) echo $x;                    //Output: "ABC"

// JavaScript
var a = ['A', 'B', 'C'];
for (var x in a) document.write(x);            //Output: "012"

//Non-associative
var arr = ['a', 'b', 'c'];
for (var i in arr)
   alert(arr[i]);

//Associative
var arr = {
   item1 : 'a',
   item2 : 'b',
   item3 : 'c'
};

for (var i in arr)
   alert(arr[i]);

myobject.propertyIsEnumerable('myproperty')

或者获取所有四个属性:

Object.getOwnPropertyDescriptor(myobject,'myproperty')

这是 ECMAScript 5 中提供的一个功能 - 在早期版本中，无法更改可枚举属性的值（它始终设置为 true）。

var a = ["a"]
for (var i in a)
    alert(typeof i)  // 'string'
for (var i = 0; i < a.length; i++)
    alert(typeof i)  // 'number'