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