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


Posted in Javascript onOctober 05, 2021

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?","洋房住宅"],
  ["小米","白色","智能运动手表","心率血压血氧","来电信息提醒"], 
  ["官方发售","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('')

 

Javascript 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
小程序实现上传视频功能
Aug 18 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 #Javascript
JavaScript实现简单拖拽效果
Sep 15 #Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 #Javascript
Javascript之datagrid查询详解
Sep 15 #Javascript
Js类的构建与继承案例详解
Sep 15 #Javascript
JavaScript 数组去重详解
Sep 15 #Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 #Javascript
You might like
汉字转化为拼音(php版)
2006/10/09 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php递归json类实例
2014/12/02 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
python读取oracle函数返回值
2016/07/18 Python
利用Python破解验证码实例详解
2016/12/08 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
农村婚礼证婚词
2014/01/08 职场文书
职位说明书范文
2014/05/07 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
教师听课学习心得体会
2016/01/15 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang