for…of

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

1
2
3
4
5
6
7
8
9
const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// "a"
// "b"
// "c"

for…in

for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。for ... in是为遍历对象属性而构建的，不建议与数组一起使用，遍历数组的时候不一定可以保证顺序。

1
2
3
4
5
6
7
8
9
var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log(prop);
}

// "a"
// "b"
// "c"

区别

  • for...in语句循环获取的是key。
  • for...in会遍历数组所有的可枚举属性，包括原型。
  • for...in会遍历顺序可能不是按照数组的内部顺序遍历。
  • for...of语句循环获取的是value。
  • for...of不能循环普通对象。