JS数组与对象的遍历方法大全

封面图 • 2025-04-23 • PHP

在 JavaScript 中，数组和对象都有多种遍历方式。以下是常见的遍历方法：

### 一、数组的遍历方法

1. **`for` 循环**
   ```javascript
   const arr = [1, 2, 3, 4];
   for (let i = 0; i < arr.length; i++) {
       console.log(arr[i]);
   }
   ```

2. **`for...of` 循环**
   ```javascript
   const arr = [1, 2, 3, 4];
   for (const item of arr) {
       console.log(item);
   }
   ```

3. **`forEach` 方法**
   ```javascript
   const arr = [1, 2, 3, 4];
   arr.forEach((item) => {
       console.log(item);
   });
   ```

4. **`map` 方法**
   ```javascript
   const arr = [1, 2, 3, 4];
   const newArr = arr.map((item) => item * 2);
   console.log(newArr); // [2, 4, 6, 8]
   ```

5. **`filter` 方法**
   ```javascript
   const arr = [1, 2, 3, 4];
   const filteredArr = arr.filter((item) => item > 2);
   console.log(filteredArr); // [3, 4]
   ```

6. **`reduce` 方法**
   ```javascript
   const arr = [1, 2, 3, 4];
   const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
   console.log(sum); // 10
   ```

7. **`every` 方法**
   ```javascript
   const arr = [1, 2, 3, 4];
   const allEven = arr.every((item) => item % 2 === 0);
   console.log(allEven); // false
   ```

8. **`some` 方法**
   ```javascript
   const arr = [1, 2, 3, 4];
   const hasEven = arr.some((item) => item % 2 === 0);
   console.log(hasEven); // true
   ```

9. **`find` 方法**
   ```javascript
   const arr = [1, 2, 3, 4];
   const foundItem = arr.find((item) => item > 2);
   console.log(foundItem); // 3
   ```

10. **`keys` 和 `values` 遍历**
    ```javascript
    const arr = [1, 2, 3, 4];
    for (const key of arr.keys()) {
        console.log(key); // 0, 1, 2, 3
    }

for (const value of arr.values()) {
        console.log(value); // 1, 2, 3, 4
    }
    ```

11. **`entries` 遍历**
    ```javascript
    const arr = [1, 2, 3, 4];
    for (const [index, value] of arr.entries()) {
        console.log(index, value); // 0 1, 1 2, 2 3, 3 4
    }
    ```

---

### 二、对象的遍历方法

1. **`for...in` 循环**
   ```javascript
   const obj = { a: 1, b: 2, c: 3 };
   for (const key in obj) {
       if (obj.hasOwnProperty(key)) {
           console.log(key, obj[key]); // "a" 1, "b" 2, "c" 3
       }
   }
   ```

2. **`Object.keys`**
   ```javascript
   const obj = { a: 1, b: 2, c: 3 };
   Object.keys(obj).forEach((key) => {
       console.log(key, obj[key]); // "a" 1, "b" 2, "c" 3
   });
   ```

3. **`Object.values`**
   ```javascript
   const obj = { a: 1, b: 2, c: 3 };
   Object.values(obj).forEach((value) => {
       console.log(value); // 1, 2, 3
   });
   ```

4. **`Object.entries`**
   ```javascript
   const obj = { a: 1, b: 2, c: 3 };
   Object.entries(obj).forEach(([key, value]) => {
       console.log(key, value); // "a" 1, "b" 2, "c" 3
   });
   ```

5. **`for...of` 循环配合 `Object.entries`**
   ```javascript
   const obj = { a: 1, b: 2, c: 3 };
   for (const [key, value] of Object.entries(obj)) {
       console.log(key, value); // "a" 1, "b" 2, "c" 3
   }
   ```

6. **`Object.getOwnPropertyNames`**
   ```javascript
   const obj = { a: 1, b: 2, c: 3 };
   Object.getOwnPropertyNames(obj).forEach((key) => {
       console.log(key, obj[key]); // "a" 1, "b" 2, "c" 3
   });
   ```

7. **`Object.assign` 和扩展运算符**
   ```javascript
   const obj = { a: 1, b: 2, c: 3 };
   const newObj = { ...obj };
   for (const key in newObj) {
       console.log(key, newObj[key]); // "a" 1, "b" 2, "c" 3
   }
   ```

---

### 总结

- 数组的遍历方法更侧重于功能性（如 `map`, `filter`, `reduce` 等）。
- 对象的遍历方法更灵活，可以根据需要选择遍历键值对或只遍历键。

根据具体需求选择合适的遍历方法，可以提高代码的可读性和性能。