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

reduce方法是一个数组的迭代方法,和map、filter不同,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. 处理不规则数组

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

 let data = [   ["红色","128g", "苹果手机"],   ["南北","两室一厅","128㎡","洋房住宅"],   ["小米","白色","智能运动手表","心率血压血氧","来电信息提醒"],    ["官方发售","2020年秋季","篮球","球鞋","品牌直邮"] ] let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))  // 输出结果: ["红色 128g 苹果手机" "南北 两室一厅 128㎡ 洋房住宅" "小米 白色 智能运动手表 心率血压血氧 来电信息提醒" "官方发售 2020年秋季 篮球 球鞋 品牌直邮"] 

4. 删除数据重复项

检查当前迭代项是否存在,如果不存在添加到数组中。

 let array = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c']; array.reduce((noDupes, curVal) => {   if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }   return noDupes }, [])  // 输出:[1, 2, 3, 'a', 'b', 'c'] 

5. 验证括号是否合法

这是一个很巧妙的用法,我在dev.to上看到的用法。如果结果等于0说明,括号数量是合法的。

 [..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0); // 输出:0  // 使用循环方式 let status=0 for (let i of [..."(())()(()())"]) {   if(i === "(")     status = status + 1   else if(i === ")")     status = status - 1   if (status < 0) {     break;   } } 

6. 按属性分组

按照指定key将数据进行分组,这里我用国家字段分组,在每次迭代过程中检查当前国家是否存在,如果不存在创建一个数组,将数据插入到数组中。并返回数组。

 let obj = [   {name: '张三', job: '数据分析师', country: '中国'},   {name: '艾斯', job: '科学家', country: '中国'},   {name: '雷尔', job: '科学家', country: '美国'},   {name: '鲍勃', job: '软件工程师', country: '印度'}, ]  obj.reduce((group, curP) => {   let newkey = curP['country']   if(!group[newkey]){     group[newkey]=[]   }   group[newkey].push(curP)   return group }, []) // 输出: [ 中国: [{…}, {…}]   印度: [{…}]   美国: [{…}] ]  

7. 数组扁平化

这里展示的数组只有一级深度,如果数组是多级可以使用递归来进行处理

 [[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce((singleArr, nextArray) => singleArr.concat(nextArray), []) // 输出:[3, 4, 5, 2, 5, 3, 4, 5, 6]  

当然也可以使用ES6的.flat方法替代

 [ [3, 4, 5],   [2, 5, 3],   [4, 5, 6] ].flat();  

8. 反转字符串

这也是一种很奇妙的实现方法

 [..."hello world"].reduce((a,v) => v+a)  

或者

 [..."hello world"].reverse().join('') 

本站由小牛团队全力维护,小牛十年了,大家已经步入中年 。本站源码全部经过团队成员测试并调试,价格可能比其它网站略贵几元钱,不解释!
小牛资源 » 8个JS的reduce使用实例和reduce操作方式

发表评论

全站资源亲测可用,价格略高几元,不解释

立即查看 了解详情