foreach、for in 和for of的区别

foreach、for...in 和 for...of 的区别

在 JavaScript 中，forEach、for...in 和 for...of 是三种不同的循环方式，适用于不同的场景和数据结构。以下是它们的核心区别：

适用对象

forEach

• 是数组的方法，仅适用于数组或类似数组的对象（如 NodeList）。
• 不能用于普通对象或其他可迭代对象。

for...in

• 用于遍历对象的可枚举属性（包括原型链上的属性）。
• 也可以用于数组，但会遍历数组的索引（字符串形式）和其他自定义属性。

for...of

• 用于遍历可迭代对象（如数组、字符串、Map、Set、arguments 等）。
• 不能直接用于普通对象（除非对象实现了 [Symbol.iterator] 方法）。

遍历内容

forEach

• 遍历数组的每个元素，回调函数接收三个参数：(value, index, array)。

for...in

• 遍历对象的键（key），对于数组会返回索引（如 "0", "1"）。
• 可能包含原型链上的属性，需配合 hasOwnProperty 过滤。

for...of

• 遍历可迭代对象的值（value），直接获取元素而非索引。

中断循环的能力

forEach

• 无法通过 break 或 return 中断循环，除非抛出异常。

for...in 和 for...of

• 支持 break、continue 和 return 控制循环流程。

示例代码

// forEach 示例
const arr = [1, 2, 3];
arr.forEach(item => console.log(item)); // 输出: 1, 2, 3

// for...in 示例（对象）
const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key); // 输出: "a", "b"
}

// for...in 示例（数组）
for (const index in arr) {
  console.log(index); // 输出: "0", "1", "2"（字符串形式）
}

// for...of 示例（数组）
for (const value of arr) {
  console.log(value); // 输出: 1, 2, 3
}

性能与使用场景

• forEach：简洁但无法中断，适合数组遍历且无需控制流程的场景。
• for...in：需注意过滤原型属性，适合遍历对象键名。
• for...of：推荐用于数组或其他可迭代对象，直接获取值且支持中断。