JavaScript之reduce()的用法

一、JavaScript之reduce()的用法

首先，参考了这位大佬的总结，敲了一遍，收获很大。记录下来。参考链接

之前是接触vue源码的时候，发现使用reduce的地方很多。当时也是在看别人分享，简单带过，发现很好用。简单研究后，很少用到。导致理解不深。今天碰到到使用场景，特意花时间研究了一番，可以说理解的很到位了。

其中，\arr表示原数组；\prev表示上一次调用回调时的返回值，或者初始值init;\cur表示当前正在处理的数组元素；\index表示当前正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1；\init表示初始值。【这个初始值在很多技巧上要用到，要重点留意】

在实际使用当中，其实常用的参数只有两个：prev和cur。结合例子来分析一番。

以下举的例子除了用reduce来实现，还有很多其他的方法。不过使用reduce有它独有的技巧性和方便。

注意：方式二，由于传入了初始值0，所以pre的初始值就是0，cur的值，就是数组的第一个值为3；如果不传初始值的话，就如方式一，这时，pre的值是3，cur的值是4；相加后为7，作为下一轮的pre的值，cur是5，依次类推下去。

例子：各科成绩占比不一样，求结果

加大难度：商品对应不同国家汇率不同，求价格

二、JS数组reduce()方法详解及用法总结

1、在JavaScript中，数组的reduce方法用于对数组中的所有元素执行累积运算。这个方法接收一个回调函数作为参数，该回调函数会为数组中的每个元素执行操作，并将结果返回以累积一个最终结果。

2、首先，让我们了解一下reduce的基本语法。reduce方法的参数通常包括一个回调函数和可选的初始值。

3、在没有提供初始值的情况下，reduce会使用数组的第一个元素作为初始值。例如，在下面的实例中，我们有一个包含四个元素的数组arr。当使用reduce方法且不提供初始值时，arr的第一个元素会被作为初始值。由于数组长度为4，reduce会执行3次循环。

4、如果提供了初始值，reduce会从这个值开始执行操作。在另一个例子中，我们同样使用包含四个元素的数组arr，但这一次我们提供了初始值，因此reduce会执行4次循环。

5、重要的是要意识到，对于空数组，reduce不会执行回调函数。如果在空数组中不设置初始值，则会抛出错误。因此，通常建议在使用reduce时始终设置初始值。

6、接下来，我们探讨reduce的基本用法。首先，使用reduce可以方便地求和或求积。例如，我们可以计算数组中所有元素的和或乘积。

7、此外，reduce还适用于对象。可以利用它对对象中的属性进行求和或其他运算。

8、在更高级的应用场景中，reduce可以实现一些复杂操作。例如，我们可以使用它来计算数组中每个元素出现的次数，实现数组去重，将二维数组转换为一维数组，或者处理多维数组，将其转换为一维数组。

9、总结而言，reduce方法是JavaScript中一个非常强大的工具，能够帮助我们对数组元素执行各种累积运算。理解其工作原理和用法，将使我们在处理数组数据时更加高效和灵活。

三、JavaScript中array.reduce()数组方法的四种使用实例

Array.prototype.reduce()是数组中最强大的方法之一。它接受一个回调函数作为参数，该函数用于累计数组中的元素值。我们可以通过指定初始值来简化累加过程。例如，计算数组 ['a','b','c','d','e']中所有元素的连接结果：

function add(x, y){ return x+ y;}var arr= ['a','b','c','d','e'];var result= arr.reduce(add,'');console.log(result);//输出'abcde'

这里我们把空字符串作为初始值，这样可以避免将数组的第一个元素作为初始值。接下来，我们来解决一些实际问题。例如，计算一个数字数组的总和，可以使用以下代码：

function sum(arr){ return arr.reduce((x, y)=> x+ y, 0);}console.log(sum([1, 2, 3, 4, 5]));//输出 15

function product(arr){ return arr.reduce((x, y)=> x* y, 1);}console.log(product([2, 3, 4]));//输出 24

在处理带权重的分数时，可以使用如下方法：

const scores= [{ score: 90, subject:"HTML", weight: 0.2},{ score: 95, subject:"CSS", weight: 0.3},{ score: 85, subject:"JavaScript", weight: 0.5}];const result= scores.reduce((x, y)=> x+ y.score* y.weight, 0);console.log(result);//输出 89

接下来，我们来看如何获取数组中的最大值和最小值。使用reduce可以简化这个过程：

let arr= [3.24, 2.78, 999];console.log(arr.reduce((x, y)=> Math.max(x, y)));//输出 999console.log(arr.reduce((x, y)=> Math.min(x, y)));//输出 2.78

统计数组中每个元素出现的频率是另一个常见的应用场景：

function countFrequency(arr){ return arr.reduce((result, ele)=>{ if(result.get(ele)!== undefined){ result.set(ele, result.get(ele)+ 1)} else{ result.set(ele, 1);} return result;}, new Map());}const result= countFrequency([1, 1, 2, 3, 3, 3, 4, 4, 4, 4]);console.log(result);//输出 Map(4){1=> 2, 2=> 1, 3=> 3, 4=> 4}

最后，我们来看如何将多个数组展平为一个数组：

function flat(arr= []){ return arr.reduce((t, v)=> t.concat(Array.isArray(v)? flat(v): v), [])}const nestedArray= [1, [2, [3, 4], 5], 6];console.log(flat(nestedArray));//输出 [1, 2, 3, 4, 5, 6]

通过这些示例，我们可以看到 reduce方法的强大之处。它不仅简化了代码，还提供了灵活的方式来处理数组中的数据。希望这些例子对你有所帮助。