8个JS的reduce使用实例和reduce操作方式

 更新时间:2021年09月29日 11:57:51   作者:傲夫靠斯  
reduce方法是JavaScript中一个比较强大的方法,可能在平时开发中,有人根本没用过,通过下面的8个例子,学会reduce的用法以及它的常用场景,需要的朋友可以参考一下

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('')

相关文章

  • 微信小程序页面间通信的5种方式

    微信小程序页面间通信的5种方式

    这篇文章主要介绍了微信小程序页面间通信的5种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JS对象创建与继承的汇总梳理

    JS对象创建与继承的汇总梳理

    这篇文章主要为大家介绍了JS对象创建与继承的汇总梳理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 微信小程序 devtool隐藏的秘密

    微信小程序 devtool隐藏的秘密

    这篇文章主要介绍了微信小程序 devtool隐藏的秘密的相关资料,需要的朋友可以参考下
    2017-01-01
  • JavaScript执行机制详细介绍

    JavaScript执行机制详细介绍

    这篇文章主要介绍了JavaScript执行机制,想要搞懂JavaScript执行机制,便与进程与线程的概念脱不了干系,下面我们就来看看这JavaScript执行机制的具体介绍吧,需要的朋友可以参考一下
    2021-12-12
  • fabric.js图层功能独立显隐 添加 删除 预览实现详解

    fabric.js图层功能独立显隐 添加 删除 预览实现详解

    这篇文章主要为大家介绍了fabric.js图层功能独立显隐 添加 删除 预览实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 微信小程序 保留小数(toFixed)详细介绍

    微信小程序 保留小数(toFixed)详细介绍

    这篇文章主要介绍了 微信小程序 保留小数(toFixed)详细介绍的相关资料,这里附有实例,帮助大家学习参考此部分知识,需要的朋友可以参考下
    2016-11-11
  • 微信小程序后台解密用户数据实例详解

    微信小程序后台解密用户数据实例详解

    这篇文章主要介绍了 微信小程序后台解密用户数据实例详解的相关资料,需要的朋友可以参考下
    2017-06-06
  • js题解LeetCode1051 高度检查器哈希表对比

    js题解LeetCode1051 高度检查器哈希表对比

    这篇文章主要为大家介绍了JS题解LeetCode1051 高度检查器哈希表对比,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Typescript类型系统FLOW静态检查基本规范

    Typescript类型系统FLOW静态检查基本规范

    这篇文章主要为大家介绍了Typescript语言的类型系统FLOW静态检查基本规范,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • TypeScript 泛型推断实现示例详解

    TypeScript 泛型推断实现示例详解

    这篇文章主要为大家介绍了TypeScript 泛型推断实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论