《用得上的前端知识》系列 - 你我都很忙，能用100字说清楚，绝不写万字长文

for in

for...in 语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性，包括继承的可枚举属性（对象本身的属性将覆盖原型属性）。

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

function TestFn(){}
TestFn.prototype = obj;

var obj2 = new TestFn();
obj2.color = 'blue';

for (var prop in obj2) {
  console.log(`obj2.${prop} = ${obj2[prop]}`);
}

// output:
// obj2.color = blue
// obj2.a = 1
// obj2.b = 2
// obj2.c = 3

for of

用于遍历部署了 iterator 接口的数据结构，比如：Array，Map，Set，String，TypedArray，arguments对象、dom节点。

const ary = ['a', 'b', 'c'];

for(const val of ary){
  console.log(val);
}

// output:
// a
// b
// c

区别

for...in 是无序的，常用于遍历对象，该循环将遍历对象的所有可枚举属性，包括继承的可枚举属性；for...of 是有序的，用于遍历部署了 iterator 接口的数据结构，如：Array，Map，Set，arguments对象、nodeList（dom节点）；
for...in 循环出的是 key，for...of 循环出的是value；

for in和for of的区别

for in

for of

区别

参考资料