# 深入理解全能的 Reducer

``````const nums = [1, 2, 3];
let value = 0;

for (let i = 0; i < nums.length; i++) {
value += nums[i];
}

``````const nums = [1, 2, 3];
const value = nums.reduce((ac, next) => ac + next, 0);

#### `reducer` 是什么

``````const nums = [1, 2, 3];
let value = 0;

for (let i = 0; i < nums.length; i++) {
value += nums[i];
}

``````const nums = [1, 2, 3];
const initialValue = 0;

const reducer = function (acc, item) {
return acc + item;
}

const total = nums.reduce(reducer, initialValue);

``````const nums = [1, 2, 3];
const initialValue = 0;

const reducer = (acc, item) => {
return acc + item;
}

const total = nums.reduce(reducer, initialValue);

``````const nums = [1, 2, 3];
const initialValue = 0;

const reducer = (acc, item) => acc + item;

const total = nums.reduce(reducer, initialValue);

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

const total = nums.reduce((acc, item) => acc + item, 0);

### 调用栈

``````const nums = [1, 3, 6];

const reducer4 = function (acc, item) {
console.log(`Acc: \${acc}, Item: \${item}, Return value: \${acc + item}`);
return acc + item;
}
const total4 = nums.reduce(reducer4, 0);

``````Acc: 0, Item: 1, Return value: 1
Acc: 1, Item: 3, Return value: 4
Acc: 4, Item: 6, Return value: 10

1. 累加器(`acc`)从初始值(`initialValue`)：0 开始的
2. 然后第一个 `item`是1，所以返回值是1（0+1=1）
3. 1在下次调用时成为累加器
4. 现在我们累加器是1(`acc`)，`item` (数组的第二项)是3
5. 返回值变为4（1+3=4）
6. 4在下次调用时成为累加器，调用时的下一项 `item` 是6
7. 结果是10（4+6=10），是我们的最终值，因为6是数组中的最后一项

### 简单示例

#### 我们有多少个X？

``````const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82];

const result = nums.reduce((tally, amt) => {
tally[amt] ? tally[amt]++ : tally[amt] = 1;
return tally;
}, {});

console.log(result);
//{ '1': 1, '3': 2, '4': 1, '5': 2, '6': 1, '82': 2 }

#### 获取一个数组并将其转换为显示某些条件的对象

``````const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82];

// we're going to make an object from an even and odd
// version of each instance of a number
const result = nums.reduce((acc, item) => {
acc[item] = {
odd: item % 2 ? item : item - 1,
even: item % 2 ? item + 1 : item
}
return acc;
}, {});

console.log(result);

``````
{ '1': { odd: 1, even: 2 },
'3': { odd: 3, even: 4 },
'4': { odd: 3, even: 4 },
'5': { odd: 5, even: 6 },
'6': { odd: 5, even: 6 },
'82': { odd: 81, even: 82 }
}

### 其它资源

1. MDN文档对此非常有用。说真的，这是他们最好的帖子之一，他们也更详细地描述了如果你不提供一个初始值会发生什么，我们在这篇文章中没有提到。
2. Coding Train
3. A Drip of JavaScript