8个JS的reduce使用实例和reduce操作方式
更新时间:2021年9月29日 16:00 点击:1661
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('')
上一篇: vue实现页面打印自动分页的两种方法
下一篇: JS 4个超级实用的小技巧 提升开发效率
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了js实现文本框输入文字个数限制代码,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,如何限制,请看本文...2015-12-27
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06