<code>reduce()方法很强大，在很多时候都可以用到，这篇文章将会以十二种场景来演示它的使用方法，这将涵盖其90%以上的场景。还有很重要的一点，相信我，90%以上的人都不能熟练的运用reduce方法，所以掌握了它，你就可以出去装杯了哈哈。

1. 语法介绍

reduce()方法的基础语法如下：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

其中，arr是调用reduce()方法的数组。这个方法执行一个“reducer”回调函数（callback）在数组的每个元素上，最终将它们“归纳”为一个单一的输出值。

reduce()方法接受两个参数：

callback函数：在数组的每一项上执行的函数，接受四个参数：

accumulator：累加器累积回调的返回值。currentValue：当前处理的数组元素。index（可选）：当前处理的数组元素的索引。array（可选）：调用reduce()方法的数组本身。 initialValue（可选）：作为第一次调用callback函数时accumulator参数的值。

2. 分析参数

accumulator和currentValue

accumulator是一个“累加器”，它是callback函数从数组的第一项到当前项的累积返回值。在reduce()的第一次调用中，accumulator可以是initialValue（如果提供了此参数），或者是数组的第一个元素（如果没有提供initialValue）。

currentValue是数组中正在处理的当前元素。在reduce()的迭代过程中，它依次表示数组的每一个元素。

index和array

index是可选参数，表示currentValue在数组中的索引。reduce()的迭代从数组的第一项（或第二项，如果未提供initialValue）开始，因此index从0（或1）开始。

array是可选参数，表示调用reduce()方法的数组本身，这在某些情况下用于引用整个数组。

initialValue

initialValue是可选的初始值。提供initialValue时，accumulator将从这个值开始累积；否则，accumulator将从数组的第一个元素开始累积，并且迭代从数组的第二个元素开始。

3. 注意事项

返回值

在使用reduce()时，一定要注意回调函数必须有返回值，这个返回值将被用作下一次迭代的accumulator值。如果回调函数没有返回值，那么accumulator将会是undefined，这可能会导致逻辑错误。

空数组

对空数组使用reduce()时，如果没有提供initialValue，则会抛出TypeError。因此，当你不确定数组是否为空时，需要提供initialValue。

性能

尽管reduce()非常强大，但在处理大型数组或复杂的迭代逻辑时，应考虑其对性能的影响。在某些情况下，其他方法（如循环）可能更高效。

言归正传，接下来展示15种使用场景！

1. 数组求和与求积

// 数组求和

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((total, value) => total + value, 0);

console.log(sum); // 输出: 10

// 数组求积

const product = numbers.reduce((total, value) => total * value, 1);

console.log(product); // 输出: 24

2. 计算数组对象中某属性的总和

const items = [

{ name: 'Book', price: 15 },

{ name: 'Pen', price: 5 },

{ name: 'Notebook', price: 20 }

];

const total = items.reduce((sum, item) => sum + item.price, 0);

console.log(total); // 输出: 40

3. 实现数组的平均值计算

const grades = [87, 94, 68, 100];

const average = grades.reduce((total, grade, index, array) => {

total += grade;

if (index === array.length - 1) {

return total / array.length;

} else {

return total;

}

}, 0);

console.log(average); // 输出: 87.25

4. 数组去重

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = numbers.reduce((unique, item) => {

return unique.includes(item) ? unique : [...unique, item];

}, []);

console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]

5. 将数组转换为对象

const fruits = ['apple', 'banana', 'cherry'];

const fruitObj = fruits.reduce((obj, fruit, index) => {

obj[fruit] = index;

return obj;

}, { });

console.log(fruitObj); // 输出: { apple: 0, banana: 1, cherry: 2 }

6. 统计数组元素出现的次数

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

const nameCount = names.reduce((count, name) => {

count[name] = (count[name] || 0) + 1;

return count;

}, { });

console.log(nameCount); // 输出: { Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

7. 找出数组中的最大值或最小值

// 最大值

const numbersMax = [10, 5, 100, 2, 1000];

const max = numbersMax.reduce((a, b) => Math.max(a, b));

console.log(max); // 输出: 1000

// 最小值

const numbersMin = [10, 5, 100, 2, 1000];

const min = numbersMin.reduce((a, b) => Math.min(a, b));

console.log(min); // 输出: 2

8. 分组

const people = [

{ name: 'Alice', age: 21 },

{ name: 'Max', age: 20 },

{ name: 'Jane', age: 20 }

];

const groupByAge = people.reduce((group, person) => {

const { age } = person;

if (!group[age]) {

group[age] = [];

}

group[age].push(person);

return group;

}, { });

console.log(groupByAge);

/*

输出:

{

20: [{ name: 'Max', age: 20 }, { name: 'Jane', age: 20 }],

21: [{ name: 'Alice', age: 21 }]

}

*/

9. 链式调用函数

const increment = x => x + 1;

const double = x => x * 2;

const functions = [increment, double];

const result = functions.reduce((value, func) => func(value), 3);

console.log(result); // 输出: 8

10. 展平数组

const nestedArray = [1, [2, [3, [4,5]]], 6];

const flatArray = nestedArray.reduce((acc, val) => acc.concat(Array.isArray(val) ? flattenArray(val) : val), []);

console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

### 11. 实现Promise串行执行

```javascript

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const tasks = [delay(1000), delay(2000), delay(3000)];

tasks.reduce((prev, task) => {

return prev.then(() => task);

}, Promise.resolve()).then(() => console.log('All tasks completed!'));

12. 对象属性求和

const result = [

{ subject: 'math', score: 78 },

{ subject: 'english', score: 82 },

{ subject: 'science', score: 95 }

];

const totalScore = result.reduce((total, current) => total + current.score, 0);

console.log(totalScore); // 输出: 255

13. 构造查询字符串

const params = { name: 'John', age: 30, city: 'New York' };

const queryString = Object.entries(params).reduce((str, [key, value], index) => {

const delimiter = index === 0 ? '?' : '&';

return `${ str}${ delimiter}${ key}=${ value}`;

}, '');

console.log(queryString); // 输出: "?name=John&age=30&city=New York"

14. 条件累加

const numbers = [1, 2, 3, 4, 5, 6];

const evenSum = numbers.reduce((sum, num) => {

return num % 2 === 0 ? sum + num : sum;

}, 0);

console.log(evenSum); // 输出: 12

15. 实现自定义的map()或filter()

// 自定义 map 使用 reduce

const numbersMap = [1, 2, 3, 4, 5];

const doubled = numbersMap.reduce((acc, cur) => {

acc.push(cur * 2);

return acc;

}, []);

console.log(doubled); // 输出: [2, 4, 6, 8, 10]

// 自定义 filter 使用 reduce

const numbersFilter = [1, 2, 3, 4, 5];

const evens = numbersFilter.reduce((acc, cur) => {

if (cur % 2 === 0) {

acc.push(cur);

}

return acc;

}, []);

console.log(evens); // 输出: [2, 4]