ES12 中数组新增的 reduce 可选参数

ES12 中数组新增了一个可选参数——initialValue，它允许我们传递一个初始值给 Reducer，这样就可以更加灵活地使用 reduce 函数了。

reduce 函数简介

reduce 是 JavaScript 中常用的方法之一，它可以将数组中的元素经过指定的操作（Reducer）后得到一个单一的值。reduce 方法接收两个参数：

1. Reducer 函数，即对数组中的每个元素执行的操作函数，该函数包含 4 个参数：累加器（acc）、当前值（cur）、当前索引（idx）和原数组（srcArr）；
2. （可选）累加器的初始值。

简单来说，reduce 函数的作用就是将一个数组中的元素一项一项地遍历，对其中每一项执行一个操作，最终将它们合并成为一个单一的值。

initialValue 的作用

在 ES12 中，我们还可以通过传递一个初始值给 Reducer 函数，来更精准地控制累加器的初始值。比如，如果我们不传递初始值，那么 JS 引擎会选择数组中的第一个元素作为初始累加器的值。但有些场景下，我们需要手动指定初始值，如下所示：

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

const result1 = arr.reduce((acc, cur) => acc + cur); // 不传递 initialValue
const result2 = arr.reduce((acc, cur) => acc + cur, 100); // 传递初始值 initialValue = 100

这里，我们传递了初始值为 100，因此 reduce 方法的返回值就是 100 + 1 + 2 + 3 + 4 + 5 = 115。

initialValue 举例

下面，我们通过一个实际例子来说明 initialValue 的作用。假设我们有一个博客网站，现在想要统计每个用户发布的博客数量，我们可以这样做：

const articles = [
  { user: "user1", title: "article1" },
  { user: "user1", title: "article2" },
  { user: "user2", title: "article3" },
  { user: "user1", title: "article4" },
  { user: "user2", title: "article5" },
  { user: "user3", title: "article6" },
];

// 获取每个用户发布的博客数量
const result = articles.reduce((acc, cur) => {
  if (acc[cur.user]) {
    acc[cur.user]++;
  } else {
    acc[cur.user] = 1;
  }
  return acc;
}, {});

console.log(result); // { user1: 3, user2: 2, user3: 1 }

这里我们可以看到，我们传递了一个空对象 {} 作为初始值，遍历文章数组，对于每篇文章，如果当前用户已经存在于累加器中，则把该用户的博客数量加 1，否则将该用户的博客数量设置为 1。

总结

有了 initialValue 参数，我们可以更加细致地控制累加器的初始值，从而更加灵活地使用 reduce 方法。应用场景非常广泛，如统计、合并等等。同时，对于初学者来说，掌握 reduce 及其可选参数是一个重要的学习和提高点。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a25cdfadd4f0e0ffa7eb23