js中for...in和for...of的区别

for...of是es6新增的遍历方式，允许遍历含有iterator接口的数据结构并返回各项的值，与for...in的区别如下：

for...in获取对象的键名（必须是可枚举的键），for...of遍历可迭代对象的键值。
for...in会遍历对象的整个原型链，性能较差，for...of只会遍历对象不会遍历原型链；

for...in会遍历数组的所有可枚举属性，for...of只返回数据下标对应的值；

Array.prototype.foo = "foo";
const foo = [1, 2, 3];

for (let item in foo) {
  console.log(item); // 0,1,2,foo
}

for (let item of foo) {
  console.log(item); // 0,1,2
}

这个例子for...in遍历了数组原型上的foo属性，而for...of没有。

总结：for...in是为了遍历对象而生，不适合遍历数组；for...of遍历可迭代对象（包括：Array，String、Set、Map、TypedArray以及Generator对象），非可迭代对象可循环Object.keys()的结果。

js中for...in和for...of的区别

答案

评论