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 网页水印(非图片水印)实现代码
Mar 01 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
YUI模块开发原理详解
Nov 18 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
分类解析jQuery选择器
Nov 23 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
vue组件生命周期详解
Nov 07 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
JavaScript oncopy事件用法实例解析
May 13 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中array_column函数简单实现方法
2016/07/11 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php依赖注入知识点详解
2019/09/23 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
js同时按下两个方向键
2007/12/01 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
团代会邀请函
2015/02/02 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android