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

2023-01-30 0 767

在本手册中,他们将如是说:

.reduce() 表达式是甚么?

建立他们的 .reduce() 表达式版

排序电商科季夫的货品数目和产品价格

为咖啡店工具栏建立几组独有的类型

从数组中删掉多次重复的第一类

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

按钮各组第一类(近似于 SQL GROUP BY 或 C# 的 .GroupBy())

貌似或许很纷乱

假如您曾为认知 .reduce() 表达式而默默彷徨,所以您并不孤独。 要或者说介绍它的组织工作基本原理并自信心地采用它,须要多花数次工夫。

绝大多数范例都采用两个单纯的位数或数组数组,但现实生活是他们一般来说采用极少牵涉的繁杂第一类。

但在他们歇会儿以后。

下列是怎样从那些文本中赢得更多重要信息。

关上您的标识符GUI并特地试著实例

修正它(更动值,向数组加进或从数组中删掉原素等)

假如您发觉沉沦在当中两个实例中,请采用笔和纸或在您的标识符GUI上跟踪表达式的值。

让他们已经开始吧!

.reduce() 表达式是甚么?

它是一类对数组的每一原素继续执行反弹表达式的方式。

排序的返回值传递给下两个原素。

在第一次迭代中,没有“上一次排序的返回值”,假如传入,可以用两个初始值代替。

否则,数组的第两个原素被用作初始值,迭代从下两个原素已经开始。

单纯的说,就是两个表达式和两个循环。

表达式保存新值

这个:

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

实现与此相同:

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

几乎每次须要采用表达式和循环时,都可以用 reduce 表达式代替它。

由于没有比实际试著更好的学习方式,让他们构建他们的 .reduce() 方式版,以便他们或者说认知它。

构建他们自己的 .reduce()

让他们通过解决两个单纯的问题来做到这一点:

他们有两个位数数组,他们想要所有位数的总和。

就像上面的表达式和循环的范例一样。

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

他们须要三样东西:

数组

保存总值 total 的表达式(一般来说称为累加器)

遍历数组的循环

假设你想把它变成两个表达式,这样你就可以很容易地采用它,你会怎么做?

也许沿着那些路线:

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

他们将数组作为参数传递给他们的表达式

他们最后返回数目。

这看起来不错,但是假如他们想要设置表达式总计初始值的选项怎么办?

他们可以将选项加进为另两个参数并将总计设置为它的值。

像这样:

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

但是这个表达式还有2个问题。

他们无法在循环内加进要继续执行的不同逻辑(它只会将当前原素加进到 sum 表达式)

它仅适用于单纯数组(当中每一项目都是值类型,而不是第一类)

我会告诉你我的意思。

这次让他们建立一个第一类数组

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

让他们调用传入第一类数组的 myReducer 表达式

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

它不起作用,因为他们要加进的值在第一类内部而不是第一类本身。

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

但是这个表达式没有考虑到这一点。

但是,假如他们加进两个反弹表达式作为第二个参数,他们可以:

对数组的每一原素继续执行反弹表达式

建立他们须要的任何自定义逻辑

让他们修正他们的 myReducer 表达式。

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

让他们用第一类数组再次测试它。

首先,声明反弹表达式并调用传入它的 myReduce。

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

请注意,他们根据 total 的值加进了 if 和 else 条件,这是他们的 initialValue 选项。

假如未给出初始值

它不会在第一次迭代时继续执行反弹

没有甚么要补充的,initialValue 是未定义的。

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

假如给出初始值

它在所有迭代中继续执行反弹

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

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

排序电商科季夫的总项目数和价格

假设你有两个像这样的数组:

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

您须要将此数组缩减为这样的第一类 { totalItems: 0, totalPrice: 0 } 以便他们可以在结帐页面上显示正确的重要信息。

这是他们可以做到的:

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

为咖啡店工具栏建立几组独有的类型

给定这个数组:

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

他们须要将其缩减为一系列独有的类型,例如 [Appetizer,Entree,Main]

这是他们可以做到的:

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

从数组中删掉多次重复的第一类

与上面的实例类似,但这次他们须要返回仅采用唯一第一类过滤的相同第一类数组。

这是具有多次重复第一类的数组:

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

注意:你必须有两个近似于 id 的属性,它对每一第一类都是唯一的

这就是他们怎样建立另两个仅包含唯一原素的数组:

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

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

过滤数组然后修正过滤后数组的原素是很常见的。

他们将采用上面工具栏类型的相同数组

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

但是这次他们想得到两个数组,当中只有类型为“Entree”的项目的 itemName

他们可以采用 .filter() 数组,然后采用 .map() 来完成它

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

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

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

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

按钮各组第一类(近似于 SQL GROUP BY 或 C# 的 .GroupBy())

这是我最喜欢的。 这是两个非常方便的表达式,可能会在下一次更新时包含在 JavaScript 的数组方式中(目前处于第 3 阶段以供批准)

这个 groupBy 表达式也可以用作解决更繁杂问题的中间步骤。

他们将再次采用工具栏类型数组:

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

这是他们的 groupBy 表达式:

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

假如他们加进将密钥作为表达式传递的选项,它会变得更加方便。

只需代替这一行:

有了这个:

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

这样他们就可以调用它并传递一个返回键的表达式,而不是自己编写数组,避免拼写错误。

结论

在这篇文章中,他们介绍到:

甚么是 .reduce() 表达式

怎样建立他们的 .reduce() 表达式版

排序电商科季夫的总项目数和产品价格

为咖啡店菜单建立几组独有的类型

从数组中删掉多次重复的第一类

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

怎样按钮对第一类进行各组(近似于 SQL GROUP BY 或 C# 的 .GroupBy())

谢谢阅读!

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务