javascript中for...in和for...of的區別

for...of循環是ES6引入的新的語法。

for...in遍歷拿到的x是鍵（下標）。而for...of遍歷拿到的x是值，但在對象中會提示不是一個迭代器報錯。例子如下：

let x;
let a = ['A','B','C'];
let b = {name: '劉德華',age: '18'};

console.log(a.length);
for(x of a){
　　console.log(x); //A,B,C
}
for(x in a){
　　console.log(x+':'+a[x]); //0:A,1:B,2:C
}
/*for(x of b){
　　console.log(x); //報錯
}*/
for(x in b){
　　console.log(x); //name,age
}

for...in由於歷史遺留問題，它遍歷的實際上是對象的屬性名稱，一個Array數據也是一個對象，數組中的每個元素的索引被視為屬性名稱。

所以我們可以看到使用for...in循環Array數組時，拿到的其實是每個元素的索引。如下，把name包括在內，但是Array的length屬性卻不包括在內，for...of循環則完全修復了這些問題，它只循環集合本身的元素

a.name = "Hello";
for(x in a){
　　console.log(x); //0,1,2,name
}

console.log(a.length); //3