Reduce解析指南：从新手到专家，轻松掌握JavaScript进阶技巧

2023-10-25 01:24:23

Reduce函数解析

1.1 语法

Reduce函数的语法如下：

reduce(callback(accumulator, currentValue, currentIndex, array))

callback ：回调函数，用于对数组中的每个元素进行操作。
accumulator ：累加器，用于保存每次回调函数执行后的结果。
currentValue ：当前元素。
currentIndex ：当前元素的索引。
array ：数组。

1.2 工作原理

Reduce函数的工作原理是：

将累加器和数组的第一个元素作为参数传入回调函数。
回调函数执行后，将结果作为新的累加器。
将新的累加器和数组的第二个元素作为参数传入回调函数。
重复步骤2和步骤3，直到数组中的所有元素都被处理完毕。
返回最终的累加器。

2. Reduce函数的高级用法

Reduce函数的高级用法有很多，这里介绍几个常见的用法：

2.1 求和

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

2.2 求最大值

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

2.3 求最小值

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

2.4 数组去重

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]

2.5 对象数组分组

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

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

console.log(usersGroupedByAge);
// 输出：
// {
//   '20-29': [{ name: 'John', age: 20 }, { name: 'Jane', age: 25 }],
//   '30-39': [{ name: 'Bob', age: 30 }],
//   '40-49': [{ name: 'Alice', age: 22 }]
// }