Javascript 数组循环遍历之forEach

封面图 • 2025-04-23 • PHP

在 JavaScript 中，`forEach` 是一种用于数组的高阶函数，它会对数组中的每个元素执行一次提供的回调函数。与传统的 `for` 循环相比，`forEach` 提供了更简洁、更直观的方式来遍历数组。

### 语法
```javascript
array.forEach(callback(currentValue, index, array), thisArg);
```

- **callback**：为数组中每个元素调用的函数，该函数接收以下三个参数：
  - `currentValue`：当前正在处理的元素。
  - `index`（可选）：当前元素的索引。
  - `array`（可选）：调用 `forEach` 的数组本身。
  
- **thisArg**（可选）：执行回调函数时，用作 `this` 的值。

---

### 示例

#### 1. 基本用法
```javascript
const numbers = [1, 2, 3, 4];

numbers.forEach(function (num) {
  console.log(num);
});

// 输出:
// 1
// 2
// 3
// 4
```

#### 2. 使用箭头函数简化代码
```javascript
const numbers = [1, 2, 3, 4];

numbers.forEach((num) => {
  console.log(num);
});

// 输出同上
```

#### 3. 使用索引和数组
```javascript
const numbers = [10, 20, 30];

numbers.forEach((num, index, arr) => {
  console.log(`Index: ${index}, Value: ${num}, Array: ${arr}`);
});

// 输出:
// Index: 0, Value: 10, Array: [10, 20, 30]
// Index: 1, Value: 20, Array: [10, 20, 30]
// Index: 2, Value: 30, Array: [10, 20, 30]
```

#### 4. 使用 `thisArg`
```javascript
const obj = {
  multiplier: 2,
};

const numbers = [1, 2, 3];

numbers.forEach(function (num) {
  console.log(this.multiplier * num);
}, obj);

// 输出:
// 2
// 4
// 6
```

---

### 注意事项

1. **无法中断循环**  
   `forEach` 不会因为返回 `false` 或使用 `break` 而停止循环。如果需要提前退出循环，可以使用 `for` 或 `some` 等其他方法。

```javascript
   const numbers = [1, 2, 3, 4];
   numbers.forEach(() => {
     return; // 这不会中断 forEach 循环
   });
   ```

如果需要中断循环，可以改用 `for` 或 `some`：

```javascript
   const numbers = [1, 2, 3, 4];
   for (let i = 0; i < numbers.length; i++) {
     if (numbers[i] === 3) break;
     console.log(numbers[i]);
   }

// 或者使用 some
   numbers.some(num => {
     console.log(num);
     return num === 3;
   });
   ```

2. **不支持返回值**  
   `forEach` 不会返回任何值，它只是对数组的每个元素执行操作。如果需要将结果收集到一个新的数组中，可以考虑使用 `map` 或其他方法。

```javascript
   const numbers = [1, 2, 3];
   const doubled = [];

numbers.forEach(num => {
     doubled.push(num * 2); // 手动收集结果
   });

console.log(doubled); // [2, 4, 6]

// 更简洁的方式是使用 map
   const doubledMap = numbers.map(num => num * 2);
   console.log(doubledMap); // [2, 4, 6]
   ```

---

### 总结
`forEach` 是一个非常方便的工具，适合简单的遍历任务。但对于需要提前退出或返回值的情况，建议使用 `for` 或其他更适合的数组方法（如 `map`、`filter`、`reduce` 等）。