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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
javascript this指向相关问题及改变方法
Nov 19 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
附件名前加网站名
2008/03/23 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
python实现问号表达式(?)的方法
2013/11/27 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
会议主持词
2014/03/17 职场文书
文秘求职信范文
2014/04/10 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2015学校年度工作总结
2015/05/11 职场文书