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语句在可迭代对象(包括 ArrayMapSetStringTypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

你可能感兴趣的:(for...of 与 for...in)