您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

8个JS的reduce使用实例和reduce操作方式

51自学网 2022-02-21 13:40:39
  javascript

reduce方法是一个数组的迭代方法,和mapfilter不同,reduce方法可缓存一个变量,迭代时我们可以操作这个变量,然后返回它。

这是我大白话的解释,可能还是不容易理解,下面看例子吧

1. 数组累加

数组累加是项目经常遇到的,比如计算商品总价等,使用reduce就可以一行代码搞定,而且不用定义外部变量,reduce是完全无副作用的函数。

// 累加[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i);// 输出:36// 累加,默认一个初始值[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i, 5);// 输出:41// 累乘[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a * i);// 输出:40320

2. 找出数组最大值

在数组每次的迭代中,我们使用Math.max获取最大值并返回,最后我们将得到数组所有项目的最大值。

[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));

当然如果数组每项都是数字我们可以使用...展开运算符和Math.max配合。

Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);

3. 处理不规则数组

通过mapreduce配合使用,返回每个子数组拼接好的结果。

let data = [  ["红色","128g", "苹果手机"],  ["南北","两室一厅","128
下载地址:
JS 4个超级实用的小技巧 提升开发效率
vue实现页面打印自动分页的两种方法
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。