foreach、for in 和for of的区别

遍历方法概述

foreach、for in 和 for of 是 JavaScript 中常见的遍历方法，各自适用于不同的场景和数据类型。以下是它们的核心区别：

遍历数组：forEach 与 for of

forEach 是数组原型的方法，用于遍历数组元素，无法中断遍历（如使用 break 或 return）。

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

for of 是 ES6 引入的遍历语法，支持可迭代对象（如数组、字符串、Map、Set），允许使用 break 或 continue 控制流程。

for (const item of arr) {
  if (item === 2) break;
  console.log(item); // 输出：1
}

遍历对象：for in

for in 用于遍历对象的可枚举属性（包括原型链上的属性），通常需要配合 hasOwnProperty 过滤。

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

注意：for in 不推荐用于数组，因为会遍历非索引属性（如自定义添加的属性）。

关键区别总结

• 适用对象

  • forEach：仅限数组。
  • for in：对象（包括原型链属性）。
  • for of：可迭代对象（数组、字符串、Map 等）。

• 中断控制

  • forEach 无法中断；for of 和 for in 可通过 break 或 continue 控制。

• 返回值

  • forEach 无返回值；for of 和 for in 直接获取元素或键名。

示例对比

// 遍历数组
const arr = [10, 20, 30];
arr.forEach(v => console.log(v)); // 10, 20, 30
for (const v of arr) console.log(v); // 10, 20, 30

// 遍历对象
const obj = { x: 1, y: 2 };
for (const k in obj) console.log(k, obj[k]); // x 1, y 2

通过选择合适的方法，可以更高效地处理不同数据结构的遍历需求。