JavaScript中for...in、for...of和forEach的区别是什么?

for...in用于遍历对象的所有可枚举属性,包括继承的可枚举属性。这个迭代语句可以用于数组、字符串或普通对象,但不能用于MapSet对象。

for (let prop in ['a', 'b', 'c'])
  console.log(prop);            // 0, 1, 2 (数组索引)

for (let prop in 'str')
  console.log(prop);            // 0, 1, 2 (字符串索引)

for (let prop in {a: 1, b: 2, c: 3})
  console.log(prop);            // a, b, c (对象属性名)

for (let prop in new Set(['a', 'b', 'a', 'd']))
  console.log(prop);            // undefined (没有可枚举属性)

for...of用于遍历可迭代对象,遍历的是它们的值而不是属性。这个迭代语句可以用于数组、字符串、MapSet对象,但不能用于普通对象。

for (let val of ['a', 'b', 'c'])
  console.log(val);            // a, b, c (数组的值)

for (let val of 'str')
  console.log(val);            // s, t, r (字符串的字符)

for (let val of {a: 1, b: 2, c: 3})
  console.log(prop);           // TypeError (不可迭代)

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

最后,forEach()Array 原型的一个方法,它允许你遍历数组的元素。虽然 forEach() 只能遍历数组,但它可以在遍历时访问每个元素的值和索引。

['a', 'b', 'c'].forEach(
  val => console.log(val)     // a, b, c (数组的值)
);

['a', 'b', 'c'].forEach(
  (val, i) => console.log(i)  // 0, 1, 2 (数组的索引)
);