当前位置：首页 > news >正文

foreach、for in 和for of的区别

news 2025/6/30 8:34:46

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
}