JS中for…in、for…of、forEach用法和适用条件总结

在JavaScript中，for...in、for...of 和 forEach 都是常用的遍历语句或方法，但它们的用途和适用范围有所不同。下面分别解释这三种用法。

1. for...in 循环

• 用途: 用于遍历对象的可枚举属性，包括对象本身的属性以及从原型链上继承的属性。

• 语法:

  for (let key in object) {
    // 代码块
  }
  

• 特点:

  • 遍历对象的键名（key）。
  • 如果遍历数组，会返回数组的索引（index）作为键名。
  • 不建议用于数组遍历，因为它可能会遍历数组的非数字键名和继承的属性。

• 示例:

  const person = { name: 'Alice', age: 25, city: 'New York' };
  
  for (let key in person) {
    console.log(key); // 输出 'name', 'age', 'city'
    console.log(person[key]); // 输出 'Alice', 25, 'New York'
  }
  

2. for...of 循环

• 用途: 用于遍历可迭代对象（如数组、字符串、Map、Set等）的值。

• 语法:

  for (let value of iterable) {
    // 代码块
  }
  

• 特点:

  • 遍历数组时，返回元素的值。
  • 不适用于普通对象（除非对象实现了可迭代协议）。

• 示例:

  const arr = [10, 20, 30];
  
  for (let value of arr) {
    console.log(value); // 输出 10, 20, 30
  }
  

3. forEach 方法

• 用途: 用于遍历数组中的每个元素，并对每个元素执行一次提供的函数。

• 语法:

  array.forEach(function(currentValue, index, array) {
    // 代码块
  });
  

• 特点:

  • 仅适用于数组（或类数组对象，现代浏览器部分支持，考虑兼容性可以先转化成真正的数组）。
  • 不能被break、continue或return控制。
  • 不返回任何值（即返回undefined）。

• 示例:

  const arr = [1, 2, 3];
  
  arr.forEach(function(value, index) {
    console.log(index, value); // 输出 0 1, 1 2, 2 3
  });
  

总结

• for...in: 用于遍历对象的可枚举属性（不推荐用于数组）。
• for...of: 用于遍历可迭代对象的值（常用于数组、字符串等）。
• forEach: 专门用于数组的遍历，且执行提供的回调函数。