本文深入解析JavaScript中数组reduce()方法。从基础语法与参数含义入手，演示如何计算求和、乘积及平均值。进一步展示如何利用reduce替代map与filter组合以提升性能，并深入探讨对象数组去重与按属性分组的高级应用场景，帮助开发者掌握这一核心高阶函数。
reduce()基础语法与参数解析
语法：
reduce()方法用于对数组中的每个元素执行累加操作，最终返回一个累积值。该方法支持传入初始值，且不会修改原始数组。需要注意的是，如果数组为空且未提供初始值，回调函数将不会被执行。
arr.reduce(function(tmp, value, [index]) {
// dosomething...
}, [startValue]) // 提供初始值通常更安全- tmp：表示上一次调用回调函数时的累加结果。若外部传入了初始值startValue，则初始值为该值；否则默认为数组的第一个元素。
- value：当前正在处理的数组元素。如果累加值tmp被初始化为数组的第一个元素，则value从数组的第二个元素开始遍历。
- index：当前元素的索引值，为可选参数。
- startValue：外部传入的初始值，为可选参数。提供初始值通常能避免空数组报错，使代码更健壮。
reduce()常见应用场景
用法：
基础数值计算：求和、乘积与平均值
1、简单用法：求和、乘积、平均值
let arr = [1, 2, 3, 4]
let sum = arr.reduce((x,y) => x + y) // 求和
let mul = arr.reduce((x,y) => x * y) // 求乘积
let average = arr.reduce((x, y) => (x + y) / arr.length) // 求平均值性能优化：用reduce替代map与filter组合
2、升级用法：使用reduce代替map和filter的组合
例如，筛选出数组中年龄大于18岁的成员并添加新属性。若使用filter和map组合，需要对数组进行两次遍历。
const list = [
{ name:'张三', age:20 },
{ name:'李四', age:15 },
{ name:'王五', age:35}
]
const newList = list.filter(item => item.age > 18).map(item => {
return Object.assign({}, item, {
is: '成年'
})
})而使用reduce方法，仅需遍历数组一次即可完成筛选与转换，提升了执行效率。
const newList = list.reduce((tmp, item) => {
return item.age > 18 ? tmp.concat(Object.assign({}, item, { is: '成年' })) : tmp
}, [])
console.log(newList)返回结果：
对象数组去重实现
3、高级用法：对象数组去重
let person = [
{id: 0, name: "小明"},
{id: 1, name: "小张"},
{id: 2, name: "小李"},
{id: 3, name: "小孙"},
{id: 1, name: "小周"},
{id: 2, name: "小陈"},
]
let obj = {}
person = person.reduce((prev,item)=>{
if(obj[item.id] === undefined) {
prev.push(item)
obj[item.id] = 1
}
return prev
}, [])
console.log(person)返回结果：
按属性对对象进行分组
4、高级用法：按属性分组对象
const result = [
{subject: '物理', marks: 41},
{subject: '化学', marks: 59},
{subject: '高等数学', marks: 36},
{subject: '应用数学', marks: 90},
{subject: '英语', marks: 64},
]
let initialValue = {
pass: [],
fail: []
}
const groupedResult = result.reduce((accumulator, current) => {
(current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current)
return accumulator
}, initialValue)
console.log(groupedResult)返回结果：
到此这篇关于JavaScript中数组reduce()方法使用详情的文章就介绍到这了,更多相关JS reduce内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！