map、filter 和 reduce 的作用是什么？

Question

Accepted Answer

它们是**不可变**的数组迭代器——它们返回一个新值而不是修改原始数组，这相比手动 `for` 循环能够产生更清晰、更具声明性的代码。

```js
const nums = [1, 2, 3, 4];

// map: transform each item → array of the SAME length
nums.map(n => n * 2);            // [2, 4, 6, 8]

// filter: keep items passing a test → SHORTER array
nums.filter(n => n % 2 === 0);  // [2, 4]

// reduce: fold the array into ONE value (accumulator + current)
nums.reduce((sum, n) => sum + n, 0); // 10
//          ^acc  ^item            ^initial value
```

## reduce 的工作原理（让人困惑的那个）

Reduce 遍历数组并携带一个"累加器"。每一步都返回新的累加器：

```js
// step 0: acc=0,  n=1 → 1
// step 1: acc=1,  n=2 → 3
// step 2: acc=3,  n=3 → 6
// step 3: acc=6,  n=4 → 10
```

它不仅仅用于求和——reduce 可以构建对象、分组元素或展平数组：

```js
users.reduce((acc, u) => { acc[u.id] = u; return acc; }, {}); // index by id
```

## 为什么这很重要

它们**链式**组合得很干净，并且不会修改原始数据，这在状态驱动的 UI 中很重要。只在有副作用时才使用 `forEach`（它不返回任何值）。对于大型数组，如果你需要链式调用多次遍历，单个 `reduce` 或普通循环可能会更高效。