JavaScript 数组方法 reduce 的妙用之处

大家好，我是 CUGGZ。,在 JavaScript 中，reduce 是最难理解的数组方法之一，它是一个强大而灵活的高阶函数，下面就来看看 reduce 的妙用之处！,reduce() 是 JavaScript 中一个很有用的数组方法，MDN 对其解释如下：,reduce() 方法对数组中的每个元素按序执行一个 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。,reduce() 方法的语法如下：,其中有两个参数：（1）reducer 函数，包含四个参数：,（2）initialValue 可选 作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。,下面是一个使用reduce() 求数组元素之和的例子：,reducer 会逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和），直到没有更多的元素被相加。,这段代码的输出如下：,,其执行过程如下：,,当我们给reduce()方法一个初始值12时：,其执行过程如下：,,如果数组为空且未提供初始值，reduce() 方法就会抛出 TypeError：,输出结果如下：,,reduce()方法最直接的用法就是对数组元素求和：,其输出结果如下：,reduce()方法还可以用来扁平化数组：,输出结果如下：,如果数组有不止一层嵌套数组，可以递归调用 reduce 函数来扁平化，然后将它们与最终的数组连接起来即可。,输出结果如下：,假设有一个国家对象数组，根据国家所在洲对数组中的每个国家进行分组。可以使用 reduce 方法来完成：,输出结果如下：,,在 Javascript 中，数组的 filter 方法可以通过回调过滤数组中的元素，map 方法可以通过回调内部传递的逻辑使用旧数组创建一个新数组。有时我们必须同时使用这两种方法，对某些条件过滤的结果创建一个新数组。,可以使用 reduce 方法来完成相同的工作，这样就只需要遍历数组一次。例如，要创建一个大于 30 的数字的平方根数组，使用 filter().map() 可能会这么写：,使用 reduce 实现：,输出结果如下：,可以使用reduce来统计数组中每个元素出现的次数：,输出结果如下：,有一组需要串行执行的异步函数，可以使用reduce()来调用执行：,这里的 res 就相当于执行了：,假设有一组简单的数学函数，这些函数允许我们增加、减少、加倍和减半：,如果想对一个值进行多次上述操作，就可以使用reduce()。管道是用于将某些初始值转换为最终值的函数列表的术语。我们只需将执行过程中每一步用到函数写在管道数组中即可。,可以使用reduce()实现字符串的反转：,有一个包含重复项的数组，可以使用 reduce() 来对数组进行去重：,其执行过程如下：,,当 reduce 方法遍历数组时，回调函数将应用于数组中的每一项。它会检查累加器中是否缺少当前值，如果是，则将当前值 push 到累加器中。,注：此示例仅用于说明 reduce 方法的工作原理，在实践中，通常会选择使用 Set 对数组进行去重，这是一种性能更高的方法：,