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

小知识：for of，for in与forEach

ops 2025/8/15 18:43:55

1. for of 循环

作用：

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

特点：

- 直接获取元素的值，而非索引或键。

- 支持 break 、 continue 中断循环。

- 不能直接遍历对象（普通对象不可迭代，需配合 Object.keys() 等）。

示例：

const arr = [10, 20, 30];
for (const value of arr) {
console.log(value); // 10、20、30
if (value === 20) break; // 可中断循环
}

// 遍历字符串
const str = "hello";
for (const char of str) {
console.log(char); // h、e、l、l、o
}

2. for in 循环

作用：

遍历对象的可枚举属性（包括继承的属性），或数组的索引。

特点：

- 主要用于遍历对象，获取属性名；遍历数组时获取索引（字符串类型）。

- 会遍历原型链上的属性，需用 hasOwnProperty() 过滤自身属性。

- 支持 break 、 continue 中断循环。

示例：

// 遍历对象
const obj = { name: "Tom", age: 18 };
for (const key in obj) {
// 过滤继承的属性
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key]); // name Tom、age 18
}
}

// 遍历数组（不推荐，索引是字符串）
const arr = [10, 20, 30];
for (const index in arr) {
console.log(index, arr[index]); // 0 10、1 20、2 30（index 是字符串 "0"、"1" 等）
}

3. forEach 方法

作用：

数组的内置方法，用于遍历数组的每个元素。

特点：

- 仅适用于数组（或类数组对象），接收回调函数，参数为 (value, index, array) 。

- 无法用 break 、 continue 中断循环（ return 仅跳过当前次循环）。

- 没有返回值（默认返回 undefined ）。

示例：

const arr = [10, 20, 30];
arr.forEach((value, index, array) => {
console.log(value, index); // 10 0、20 1、30 2
if (value === 20) return; // 仅跳过当前次，不会中断整个循环
});