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 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
Node.js简单入门前传
Aug 21 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
比较node.js和Deno
Apr 27 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 json_encode奇怪问题说明
2011/09/27 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
js如何验证密码强度
2020/03/18 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
python 实现插入排序算法
2012/06/05 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python实现web方式logview的方法
2015/08/10 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
浅析python继承与多重继承
2018/09/13 Python
python中的测试框架
2020/11/13 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
教师的实习鉴定
2013/12/15 职场文书
网吧消防安全制度
2014/01/28 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
教师工作能力自我评价
2015/03/04 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
学生安全责任协议书
2016/03/22 职场文书