JavaScript：for...in和for...of的区别

首先举两个个简单的例子：

//数组
let arrs = ['a', 'b', 'c']
//用const确保这个局部变量不被修改
for (const arr in arrs) { 
  console.log(arr);  //0,1,2
}
for (const arr of arrs) { 
  console.log(arr);  //a,b,c
}

//对象
  const objs = {"a": 1, "b": 2, "c": 3};
  for (const obj in objs) {
    console.log(obj) // a, b, c
  }
  for (const obj of objs) {
    console.log(obj) //报错
  }

总结一下

for…in 得到的是对象的key或数组、字符串的下标。
ECMAScript 中对象的属性是无序的，因此 for-in 语句不能保证返回对象属性的顺序。

for…of 得到对象的value或数组、字符串的值。
for-of 循环会按照可迭代对象的 next()方法产生值的顺序迭代元素。

为什么会报错呢？

是因为，for…of 循环的数据结构必须包含Symbol.iterator 属性，即具有interator接口，这些数据结构如下：

• Array
• Map
• Set
• String
• arguments对象
• Nodelist对象