js数组遍历有哪些方法以及简单的代码实现

一、单纯遍历（无返回值）

1. forEach

• 作用：遍历数组，执行副作用（如修改外部变量）。
• 不改变原数组，无返回值。

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

---

二、返回新数组

2. map

• 作用：遍历数组，返回处理后的新数组。
• 不改变原数组。

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

3. flatMap（ES2019）

• 作用 ：先 map 再 flat（默认深度1）。

const arr = [1, [2], 3];
const result = arr.flatMap(item => item);
console.log(result); // [1, 2, 3]

---

三、返回布尔值

4. every

• 作用：检查是否所有元素都满足条件。

const arr = [2, 4, 6];
const isAllEven = arr.every(item => item % 2 === 0);
console.log(isAllEven); // true

5. some

• 作用：检查是否有至少一个元素满足条件。

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

---

四、查找元素

6. find（ES6）

• 作用：返回第一个满足条件的元素。

const arr = [1, 2, 3];
const found = arr.find(item => item > 1);
console.log(found); // 2

7. findIndex（ES6）

• 作用：返回第一个满足条件的元素的索引。

const arr = [1, 2, 3];
const index = arr.findIndex(item => item > 1);
console.log(index); // 1

---

五、过滤数组

8. filter

• 作用：返回满足条件的新数组。

const arr = [1, 2, 3];
const filtered = arr.filter(item => item > 1);
console.log(filtered); // [2, 3]

---

六、聚合计算

9. reduce

• 作用：从左到右累积计算结果。

const arr = [1, 2, 3];
const sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 6

10. reduceRight

• 作用：从右到左累积计算结果。

const arr = [1, 2, 3];
const str = arr.reduceRight((acc, cur) => acc + cur.toString(), '');
console.log(str); // '321'

---

七、迭代器方法

11. keys / values / entries（ES6）

• 作用：返回数组的键、值或键值对的迭代器。

//迭代器方法 for of 返回数组的值
for(const value of arr){
    console.log(value);
  }

const arr = ['a', 'b'];
// 获取索引（keys）
for (const key of arr.keys()) {
  console.log(key); // 0, 1
}
// 获取值（values）
for (const value of arr.values()) {
  console.log(value); // 'a', 'b'
}
// 获取键值对（entries）
for (const [index, value] of arr.entries()) {
  console.log(index, value); // 0 'a', 1 'b'
}

---

总结表

方法	作用	返回值	是否修改原数组
forEach	遍历执行副作用	undefined	否
map	返回处理后的新数组	新数组	否
filter	返回过滤后的新数组	新数组	否
every	检查是否所有元素满足条件	布尔值	否
some	检查是否有元素满足条件	布尔值	否
find	返回第一个匹配的元素	元素或undefined	否
findIndex	返回第一个匹配的索引	索引或-1	否
reduce	从左到右累积计算	任意类型	否
reduceRight	从右到左累积计算	任意类型	否
keys/values/entries	返回迭代器	迭代器对象	否

---

面试常见问题

1. forEach 和 map 的区别？

   • forEach 无返回值，用于执行副作用；map 返回新数组，用于数据转换。

2. 如何提前终止遍历？

   • for 循环可用 break，但 forEach/map 等无法终止，需改用 some/every 通过返回 true 终止。

3. reduce 能做什么？

   • 求和、扁平数组、统计频率、链式调用等复杂操作。