for…in和for…of

for…in

遍历对象

获得对象的键名

for...in是为遍历对象而设计的，不适用于遍历数组。

遍历数组的缺点

• 数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
• for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
• 某些情况下，for…in循环会以任意顺序遍历键名。

语法

for (variable in object) {...}

for…in语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每个不同的属性，语句都会被执行。

for…in遍历哪些属性？

• 自有的：自带的属性
• 继承的：原型链上的属性（如果不需要继承的属性可用Object.keys()方法）
• 可枚举的
• 非Symbol的属性

for…of

获得键值

let arr = ['a', 'b', 'c', 'd'];
 
for (let a of arr) {
  console.log(a); // a b c d
}

可遍历包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

for...of可以响应break、continue、return语句

不可遍历普通对象（报错：obj is not iterable（obj不可迭代））

for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样。

例：

let arr = [3, 5, 7];
arr.foo = 'hello';
 
for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}
 
for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

for…of 循环(ES6)_zhangbin0027的博客-CSDN博客

JavaScript对象遍历 – SegmentFault 思否

彻底搞清楚 Iterator（遍历器）接口_毛小星的博客-CSDN博客