本文深入解析 JavaScript 数组方法 reduce 的多种应用场景。通过8个具体实例，展示如何利用 reduce 实现数组累加、查找最大值、处理不规则数组、数据去重、括号合法性验证、按属性分组、数组扁平化及字符串反转。文章结合代码示例，详细说明 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 < 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('')