for...of 与 for...in

一. 请问，以下打印出什么东西？

const obj = {
  name: "Maning",
  age: "secret",
  hobby: "reading",
};

const arr = [
  { name: "XXX", age: "11", hobby: "singing" },
  { name: "YYY", age: "22", hobby: "dancing" },
];

for (const i in obj) {
  console.log(i);
}

for (const i in arr) {
  console.log(i);
}

for (const i of arr) {
  console.log(i);
}

for (const i of obj) {
  console.log(i);
}

反正，我第一眼看到的时候，我在想这不都一样吗？然后细细一看，是 in 和 of 不一样，还有 obj 和 arr 不一样。

直接上答案吧！

// for...in(obj)
name
age
hobby

// for...in(arr)
o
1

// for...of(obj)
TypeError: obj is not iterable

// for...of(arr)
{ name: 'XXX', age: '11', hobby: 'singing' }
{ name: 'YYY', age: '22', hobby: 'dancing' }

2. 为啥呢？

这里我直接上官方文档的解释吧；真的写的太精准太好了，导致我复制过来以后，都不想再解释一遍。自己品吧；

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句