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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
JavaScript ES 模块的使用
Nov 12 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python入门篇之列表和元组
2014/10/17 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
django正续或者倒序查库实例
2020/05/19 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
文明教师事迹材料
2014/01/16 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
股东合作协议书范本
2014/04/14 职场文书
护理见习报告范文
2014/11/03 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers