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和jquery判断浏览器版本等信息
Jul 04 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
jquery获取节点名称
Apr 26 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
js date 格式化
Feb 15 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
基于javascript实现放大镜特效
Dec 03 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字符串截取函数用法分析
2014/11/25 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
vue实现信息管理系统
2020/05/30 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python上下文管理器全实例详解
2019/11/12 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python Paramiko使用示例
2020/09/21 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
学校七一活动方案
2014/01/19 职场文书
临床护士自荐信
2014/01/31 职场文书
商务英语广告词大全
2014/03/18 职场文书
门前三包责任书
2014/04/15 职场文书
幼师辞职信范文
2015/02/27 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js