JS中reduce怎么用

这篇文章给大家分享的是有关JS中reduce怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

reduce方法是一个数组的迭代方法，和map、filter不同，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. 处理不规则数组

通过map和reduce配合使用，返回每个子数组拼接好的结果。

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=0for (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('')

感谢各位的阅读！关于"JS中reduce怎么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！