forof forin foreach for 区别

for...of、for...in、forEach 和 for 是 JavaScript 中常用的遍历语句，但它们的用途和行为各有不同，适合不同的数据结构和场景。以下是它们的详细区别和用法：

1. for...of

• 作用: 用于遍历 可迭代对象（如数组、字符串、Map、Set 等），迭代的是对象的 值。
• 适用对象: 数组、字符串、Map、Set 等实现了迭代器接口的对象。
• 遍历内容: 可迭代对象的元素值。

示例:

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

• 优点: 可以直接访问数组或可迭代对象的值，代码简洁。
• 注意: 不能遍历对象（普通对象非可迭代），适用于遍历可迭代对象的值。

2. for...in

• 作用: 用于遍历对象的可枚举属性（包括继承的属性），迭代的是对象的 键（属性名）。
• 适用对象: 对象、数组等。
• 遍历内容: 对象的键（数组的索引/对象的属性名）。

示例:

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // 输出: "a", "b", "c"
  console.log(obj[key]); // 输出: 1, 2, 3
}

• 优点: 可遍历对象的键，适合遍历普通对象的属性。
• 缺点: 也会遍历原型链中的属性（可以用 hasOwnProperty() 来过滤），不适合遍历数组，因为它会遍历数组的索引，而不是值。

3. forEach

• 作用: 数组的原型方法，用于遍历数组中的每一个元素，执行回调函数。
• 适用对象: 数组、Map、Set（forEach 也是它们的方法）。
• 遍历内容: 数组或集合的每个元素。

示例:

const arr = [10, 20, 30];
arr.forEach((value, index) => {
  console.log(value, index); // 输出: 10 0, 20 1, 30 2
});

• 优点: 简洁，内置了对每个元素的操作，适合数组的遍历。
• 缺点:
  • 无法中途停止循环（forEach 中不能使用 break 或 continue，只能通过 return 退出当前迭代）。
  • 只能用于数组等具备 forEach 方法的对象。

4. for

• 作用: 最基本的循环语句，灵活度最高，可以用来遍历任何数据结构，只要通过索引或计数器控制。
• 适用对象: 数组、对象、字符串等。
• 遍历内容: 需要手动定义遍历的逻辑，如数组的索引或对象的属性。

示例:

const arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 输出: 10, 20, 30
}

• 优点: 灵活，可以完全控制遍历过程（如遍历顺序、步长等）。
• 缺点: 语法相对冗长，不如 for...of 和 forEach 简洁，且容易出错（如忘记更新计数器）。

比较总结

循环类型	用途	遍历内容	适用对象	其他特点
for...of	遍历可迭代对象	值	数组、字符串、Map、Set等	适合遍历数组或集合中的元素值，不能用于普通对象
for...in	遍历对象的可枚举属性	键（属性名/索引）	对象、数组	会遍历对象原型链上的属性，遍历数组时输出索引而非值
forEach	遍历数组并执行回调	值（可获取索引）	数组、Map、Set	不可中断，无法使用 break 或 continue，仅用于数组等具有 forEach 方法的对象
for	基本循环语句，灵活控制遍历过程	手动定义（如索引）	数组、对象、字符串等	最灵活，但代码相对冗长，易出错

使用建议

• 如果你要遍历数组中的元素，推荐使用 for...of 或 forEach。
• 如果你要遍历对象的属性，使用 for...in，并结合 hasOwnProperty() 来过滤继承的属性。
• 对于灵活性要求高的场景，或者需要中途打断循环的情况，可以使用 for 循环。