JavaScript中for...in、for...of 和 forEach 有什么区别？

        近期有哪些热门开源项目？https://awesometop.cn/hotlist

        JavaScript中for...in、for...of 和 forEach都是用于对象遍历，但适用的对象类型有所区别和限制。下面通过几个示例来直观看下。

1.forEach

forEach()是Array的原型方法，因此，forEach只能迭代数组，但它可以在迭代时访问每个元素的值和索引。

['a', 'b', 'c'].forEach(
  val => console.log(val)     // a, b, c (array values)
);

['a', 'b', 'c'].forEach(
  (val, i) => console.log(i)  // 0, 1, 2 (array indexes)
);

2.for...in

for...in用于迭代对象的所有可枚举属性，包括继承的可枚举属性。for...in可以迭代数组、字符串或普通对象，但不能迭代Map和Set对象。

for (let prop in ['a', 'b', 'c'])
  console.log(prop);            // 0, 1, 2 (array indexes)

for (let prop in 'str')
  console.log(prop);            // 0, 1, 2 (string indexes)

for (let prop in {a: 1, b: 2, c: 3})
  console.log(prop);            // a, b, c (object property names)

for (let prop in new Set(['a', 'b', 'a', 'd']))
  console.log(prop);            // undefined (no enumerable properties)

3.for...of

for...of用于迭代可迭代对象，迭代它们的值而不是它们的属性。for...of可以迭代数组、字符串、Map或Set对象，但不能迭代普通对象。

有关迭代器，可以查看：JS代码片段-手搓一个迭代器

for (let val of ['a', 'b', 'c'])
  console.log(val);            // a, b, c (array values)

for (let val of 'str')
  console.log(val);            // s, t, r (string characters)

for (let val of {a: 1, b: 2, c: 3})
  console.log(prop);           // TypeError (not iterable)

for (let val of new Set(['a', 'b', 'a', 'd']))
  console.log(val);            // a, b, d (Set values)

总体来说，forEach只能迭代数组，for...in不能迭代Map和Set对象，for...of不能迭代普通对象。