JS数组遍历的方法

封面图 • 2025-12-17 • JavaScript

在 JavaScript 中，数组（Array）有多种遍历方法，每种方法都有其特定的用途和特点。以下是一些常用的数组遍历方法：

---

### 一、常用数组遍历方法

#### 1. `for` 循环
```javascript
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
```
- **优点**：灵活，可以控制循环过程。
- **缺点**：代码较多。

---

#### 2. `for...of` 循环
```javascript
let arr = [1, 2, 3, 4, 5];
for (let item of arr) {
    console.log(item);
}
```
- **优点**：简洁，直接获取数组元素。
- **缺点**：不能直接获取索引。

---

#### 3. `forEach()` 方法
```javascript
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index) {
    console.log(`索引: ${index}, 值: ${item}`);
});
```
- **优点**：简洁易用。
- **缺点**：不能使用 `break` 或 `return` 来中断循环。

---

#### 4. `map()` 方法
```javascript
let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(item) {
    return item * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]
```
- **作用**：创建一个新数组，每个元素是原数组元素经过函数处理后的结果。
- **返回值**：新数组。

---

#### 5. `filter()` 方法
```javascript
let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(function(item) {
    return item > 2;
});
console.log(filtered); // [3, 4, 5]
```
- **作用**：过滤出满足条件的元素组成新数组。
- **返回值**：新数组。

---

#### 6. `find()` 方法
```javascript
let arr = [1, 2, 3, 4, 5];
let found = arr.find(function(item) {
    return item > 3;
});
console.log(found); // 4
```
- **作用**：查找第一个符合条件的元素。
- **返回值**：找到的元素或 `undefined`。

---

#### 7. `some()` 方法
```javascript
let arr = [1, 2, 3, 4, 5];
let hasEven = arr.some(function(item) {
    return item % 2 === 0;
});
console.log(hasEven); // true
```
- **作用**：判断数组中是否有至少一个元素满足条件。
- **返回值**：布尔值。

---

#### 8. `every()` 方法
```javascript
let arr = [2, 4, 6, 8];
let allEven = arr.every(function(item) {
    return item % 2 === 0;
});
console.log(allEven); // true
```
- **作用**：判断数组中所有元素是否都满足条件。
- **返回值**：布尔值。

---

#### 9. `reduce()` 方法
```javascript
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(total, item) {
    return total + item;
}, 0);
console.log(sum); // 15
```
- **作用**：对数组进行累积操作，常用于求和、拼接等。
- **返回值**：最终计算结果。

---

### 二、其他方式

#### 10. `while` 循环
```javascript
let arr = [1, 2, 3, 4, 5];
let i = 0;
while (i < arr.length) {
    console.log(arr[i]);
    i++;
}
```

---

### 三、总结表格

| 方法         | 是否修改原数组 | 是否返回新数组 | 是否支持 `break` |
|--------------|----------------|----------------|------------------|
| `for`        | 否             | 否             | 是               |
| `for...of`   | 否             | 否             | 否               |
| `forEach()`  | 否             | 否             | 否               |
| `map()`      | 否             | 是             | 否               |
| `filter()`   | 否             | 是             | 否               |
| `find()`     | 否             | 否             | 否               |
| `some()`     | 否             | 否             | 否               |
| `every()`    | 否             | 否             | 否               |
| `reduce()`   | 否             | 否             | 否               |

---

如果你有具体的使用场景，我可以帮你选择最合适的方法 😊