Array.reduce()的优雅简洁及其实际应用

2023-09-12 14:39:51

在广阔的 JavaScript 数组方法世界中，Array.reduce() 就像一颗璀璨的宝石，闪耀着独特的光芒。虽然乍看之下，它似乎平淡无奇，但一旦深入了解，你就会发现它的强大之处和无穷潜力。

Array.reduce()简介

Array.reduce() 方法接收一个回调函数作为参数，该函数对数组中的每个元素进行运算，并将运算结果累积到一个单一的返回值中。

它的基本语法如下：

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);

callback : 一个函数，接受四个参数：
- accumulator : 累积器，即上一次 reduce() 调用的返回值或初始值。
- currentValue : 当前正在处理的数组元素。
- currentIndex : 当前元素在数组中的索引。
- array : 调用 reduce() 的数组。
initialValue : 可选参数，指定初始累积值。如果未提供，则以数组的第一个元素作为初始值。

Array.reduce()的实际应用

Array.reduce() 的应用场景非常广泛，从简单的数组求和到复杂的数据转换，它都能轻松应对。

数组求和

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

数组最大值和最小值

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

const min = numbers.reduce((accumulator, currentValue) => Math.min(accumulator, currentValue));
console.log(min); // 输出：1

数组去重

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = numbers.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueNumbers); // 输出：[1, 2, 3, 4, 5]

数组分组

const people = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Alice', age: 22 },
];

const groupedByAge = people.reduce((accumulator, person) => {
  const ageGroup = accumulator[person.age] || [];
  ageGroup.push(person);
  accumulator[person.age] = ageGroup;
  return accumulator;
}, {});

console.log(groupedByAge);
// 输出：
// {
//   20: [{ name: 'John', age: 20 }],
//   22: [{ name: 'Alice', age: 22 }],
//   25: [{ name: 'Jane', age: 25 }],
//   30: [{ name: 'Bob', age: 30 }]
// }

Array.reduce()原理

为了更深入地理解 Array.reduce() 的工作原理，让我们从一个简单的例子入手：数组求和。

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

在这个例子中，Array.reduce() 方法接收了一个回调函数，该函数负责累加数组中的每个元素。当方法第一次被调用时，累加器 accumulator 被初始化为数组的第一个元素，也就是 1。然后，回调函数对数组中的每个元素进行迭代，将它们逐个累加到累加器中。最终，累加器中的值就是数组中所有元素的总和。