JavaScript reduce() 方法详解

reduce() 是 JavaScript 数组的一个非常强大的高阶函数，它可以将数组中的所有元素归纳（或称 "reduce"）为一个单一的值。

语法

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

参数说明

• callback: 一个函数，数组中每个元素都会执行这个函数。它接受四个参数：
  • accumulator (累加器): 累加器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
  • currentValue (当前值): 数组中正在处理的元素。
  • currentIndex (当前索引, 可选): 数组中正在处理的元素的索引。
  • array (源数组, 可选): 调用 reduce() 的数组。
• initialValue (初始值, 可选): 作为第一次调用 callback 函数时的第一个参数 accumulator 的值。 如果没有提供初始值，则将使用数组中的第一个元素作为初始 accumulator 值，并且迭代将从第二个元素开始。

箭头函数作为回调

在现代 JavaScript 中，我们通常使用箭头函数 () => {} 来让代码更简洁。

示例 1: 数组求和

这是 reduce 最常见的用法之一。

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

// 使用箭头函数作为 reducer
// 0 是 initialValue，作为 accumulator 的初始值
const sum = numbers.reduce((accumulator, currentValue) => {
  console.log(`accumulator: ${accumulator}, currentValue: ${currentValue}`);
  return accumulator + currentValue;
}, 0);

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

执行过程拆解

accumulator	currentValue	返回值 (accumulator + currentValue)
0	1	1
1	2	3
3	3	6
6	4	10
10	5	15

最后，reduce 方法返回最后一次迭代的结果 15。

简洁写法

如果箭头函数只有一条返回语句，可以省略花括号 {} 和 return。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, val) => acc + val, 0);
console.log(sum); // 15

示例 2: 将数组转换为对象

reduce 的强大之处在于 initialValue 可以是任何类型，比如对象。这让我们可以实现一些有趣转换。

const users = [
  { id: 'a', name: 'Alice' },
  { id: 'b', name: 'Bob' },
  { id: 'c', name: 'Charlie' }
];

// 初始值是一个空对象 {}
const usersById = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});

console.log(usersById);
/*
输出:
{
  a: { id: 'a', name: 'Alice' },
  b: { id: 'b', name: 'Bob' },
  c: { id: 'c', name: 'Charlie' }
}
*/

在这个例子中，累加器 acc 初始化为一个空对象，每次迭代都将当前用户对象 user 添加到 acc 中，并以 user.id 作为键。

注意事项

• 如果不提供 initialValue，reduce 会将数组的第一个元素作为 accumulator 的初始值，并从第二个元素开始迭代。
• 如果在一个空数组上调用 reduce 且没有 initialValue，会抛出 TypeError。

reduce 是一个非常灵活的工具，掌握它可以让你用更少的代码完成更多的工作。