掌握 Reduce 妙用，征服 JavaScript 数组处理

2023-11-08 05:37:33

Reduce 的基本用法

Reduce 的基本语法为：

reduce(callbackFn, initialValue)

其中：

callbackFn 是一个函数，它接受四个参数：
- accumulator：上一次 reduce 的返回值，或 initialValue（如果有的话）。
- currentValue：当前数组元素。
- currentIndex：当前数组元素的索引。
- array：正在处理的数组。
initialValue 是可选的，它是 reduce 的初始值。如果没有提供 initialValue，则第一个数组元素将作为初始值。

Reduce 的工作方式是将数组中的每个元素逐个传递给 callbackFn，并将其返回值作为下一次调用的 accumulator。这个过程一直持续到数组中的所有元素都已被处理。

Reduce 的应用场景

Reduce 可以用于各种数组处理任务，包括：

计算数组元素的总和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出：15

查找数组中的最大值或最小值：

const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue), Number.MIN_VALUE);
const min = numbers.reduce((accumulator, currentValue) => Math.min(accumulator, currentValue), Number.MAX_VALUE);
console.log(max); // 输出：5
console.log(min); // 输出：1

将数组元素连接成一个字符串：

const strings = ['a', 'b', 'c', 'd', 'e'];
const joinedString = strings.reduce((accumulator, currentValue) => accumulator + currentValue, '');
console.log(joinedString); // 输出：abcde

将数组元素分组：

const users = [
  { name: 'John', age: 30 },
  { name: 'Mary', age: 25 },
  { name: 'Bob', age: 40 },
  { name: 'Alice', age: 35 },
];

const groupedUsers = users.reduce((accumulator, currentValue) => {
  const ageGroup = Math.floor(currentValue.age / 10) * 10;
  accumulator[ageGroup] = accumulator[ageGroup] || [];
  accumulator[ageGroup].push(currentValue);
  return accumulator;
}, {});

console.log(groupedUsers);
// 输出：
// {
//   20: [{ name: 'Mary', age: 25 }],
//   30: [{ name: 'John', age: 30 }, { name: 'Alice', age: 35 }],
//   40: [{ name: 'Bob', age: 40 }]
// }