共计 2094 个字符，预计需要花费 6 分钟才能阅读完成。
| 导读 | reduce 方法是 JavaScript 中一个比较强大的方法，可能在平时开发中，有人根本没用过，通过下面的 8 个例子，学会 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=0 | |
| for (let i of [..."(())()(()())"]) {if(i === "(") | |
| status = status + 1 | |
| else if(i === ")") | |
| status = status - 1 | |
| if (status | |
| 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], | |
| [], | |
| [] | |
| ].flat(); | |
| 8. 反转字符串 | |
| 这也是一种很奇妙的实现方法 | |
| [..."hello world"].reduce((a,v) => v+a) | |
| 或者 | |
| [..."hello world"].reverse().join('') | |
| 阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配 | |
| 腾讯云新客低至 82 元 / 年，老客户 99 元 / 年 | |
| 代金券：在阿里云专用满减优惠券 | |
正文完
星哥玩云-微信公众号
