JavaScript 的 .reduce() 函数的完整指南（带有真实示例）

大家好，欢迎来到IT知识分享网。

在本指南中，我们将介绍：

.reduce() 函数是什么？

创建我们的 .reduce() 函数版本

计算电子商务购物车的商品总数和价格

为餐厅菜单创建一组独特的类别

从数组中删除重复的对象

用 .reduce() 替换 .filter().map()

按键分组对象（类似于 SQL GROUP BY 或 C# 的 .GroupBy()）

乍一看似乎很混乱

如果您曾经为理解 .reduce() 函数而苦苦挣扎，那么您并不孤单。 要真正了解它的工作原理并自信地使用它，需要多花几次功夫。

大多数例子都使用一个简单的数字或字符串数组，但现实是我们通常使用很少涉及的复杂对象。

但在我们跳进去之前。

以下是如何从这些内容中获得更多信息。

打开您的代码编辑器并亲自尝试示例

修改它（更改值，向数组添加或从数组中删除元素等）

如果您发现自己迷失在其中一个示例中，请使用笔和纸或在您的代码编辑器上追踪变量的值。

让我们开始吧！

.reduce() 函数是什么？

它是一种对数组的每个元素执行回调函数的方法。

计算的返回值传递给下一个元素。

在第一次迭代中，没有“上一次计算的返回值”，如果传入，可以用一个初始值代替。

否则，数组的第一个元素被用作初始值，迭代从下一个元素开始。

简单的说，就是一个变量和一个循环。

变量保存新值

循环遍历数组，因此我们可以从每个元素中获取我们想要的内容

这个：

实现与此相同：

几乎每次需要使用变量和循环时，都可以用 reduce 函数替换它。

由于没有比实际尝试更好的学习方法，让我们构建我们的 .reduce() 方法版本，以便我们真正理解它。

构建我们自己的 .reduce()

让我们通过解决一个简单的问题来做到这一点：

我们有一个数字数组，我们想要所有数字的总和。

就像上面的变量和循环的例子一样。

我们需要三样东西：

数组

保存总值 total 的变量（通常称为累加器）

遍历数组的循环

假设你想把它变成一个函数，这样你就可以很容易地使用它，你会怎么做？

也许沿着这些路线：

我们将数组作为参数传递给我们的函数

我们最后返回总数。

这看起来不错，但是如果我们想要设置变量总计初始值的选项怎么办？

我们可以将选项添加为另一个参数并将总计设置为它的值。

像这样：

但是这个函数还有2个问题。

我们无法在循环内添加要执行的不同逻辑（它只会将当前元素添加到 sum 变量）

它仅适用于简单数组（其中每个项目都是值类型，而不是对象）

我会告诉你我的意思。

这次让我们创建一个对象数组

让我们调用传入对象数组的 myReducer 函数

它不起作用，因为我们要添加的值在对象内部而不是对象本身。

我们必须以 total += arr[i].number 的形式访问它

但是这个函数没有考虑到这一点。

但是，如果我们添加一个回调函数作为第二个参数，我们可以：

对数组的每个元素执行回调函数

创建我们需要的任何自定义逻辑

让我们修改我们的 myReducer 函数。

让我们用对象数组再次测试它。

首先，声明回调函数并调用传入它的 myReduce。

请注意，我们根据 total 的值添加了 if 和 else 条件，这是我们的 initialValue 选项。

如果未给出初始值

它不会在第一次迭代时执行回调

没有什么要补充的，initialValue 是未定义的。

只需将 total 设置为当前元素的值

如果给出初始值

它在所有迭代中执行回调

这几乎就是原始 Array.prototype.reduce() 所做的。

主要区别在于不需要将数组作为参数传递，因为原始 .reduce() 绑定到 Array.prototype，因此数组始终是调用 .reduce() 的数组。

计算电子商务购物车的总项目数和价格

假设你有一个像这样的数组：

您需要将此数组缩减为这样的对象 { totalItems: 0, totalPrice: 0 } 以便我们可以在结帐页面上显示正确的信息。

这是我们可以做到的：

为餐厅菜单创建一组独特的类别

给定这个数组：

我们需要将其缩减为一系列独特的类别，例如 [‘Appetizer’,’Entree’,’Main’]

这是我们可以做到的：

从数组中删除重复的对象

与上面的示例类似，但这次我们需要返回仅使用唯一对象过滤的相同对象数组。

这是具有重复对象的数组：

注意：你必须有一个类似于 id 的属性，它对每个对象都是唯一的

这就是我们如何创建另一个仅包含唯一元素的数组：

将 .filter().map() 替换为 .reduce()

过滤数组然后修改过滤后数组的元素是很常见的。

我们将使用上面菜单类别的相同数组

但是这次我们想得到一个数组，其中只有类别为“Entree”的项目的 itemName

我们可以使用 .filter() 数组，然后使用 .map() 来完成它

或者我们可以用 .reduce() 来做

使用 .reduce() 的优点是您只迭代数组一次。

按键分组对象（类似于 SQL GROUP BY 或 C# 的 .GroupBy()）

这是我最喜欢的。 这是一个非常方便的函数，可能会在下一次更新时包含在 JavaScript 的数组方法中（目前处于第 3 阶段以供批准）

这个 groupBy 函数也可以用作解决更复杂问题的中间步骤。

我们将再次使用菜单类别数组：

这是我们的 groupBy 函数：

如果我们添加将密钥作为函数传递的选项，它会变得更加方便。

只需替换这一行：

有了这个：

这样我们就可以调用它并传递一个返回键的函数，而不是自己编写字符串，避免拼写错误。

结论

在这篇文章中，我们了解到：

什么是 .reduce() 函数

如何创建我们的 .reduce() 函数版本

计算电子商务购物车的总项目数和价格

为餐厅菜单创建一组独特的类别

从数组中删除重复的对象

将 .filter().map() 替换为 .reduce()

如何按键对对象进行分组（类似于 SQL GROUP BY 或 C# 的 .GroupBy()）

谢谢阅读！