JS数组的reduce方法

nehcnil

已于 2022-06-09 16:37:50 修改

阅读量370

点赞数

文章标签： javascript 开发语言前端 vscode

于 2022-06-02 16:37:45 首次发布

本文链接：https://blog.youkuaiyun.com/linchen_00/article/details/125102843

版权

本文详细介绍了JavaScript的reduce()方法，通过实例演示了如何实现数组求和、重复元素计数和扁平化。理解回调函数的四个参数并应用在实际场景中，是数组处理中的高效工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

reduce()方法介绍

let arr=[1,2,3]
let res=arr.reduce((pre,cur,index,curArr)=>{
    console.log(pre,cur,index,curArr)
    return pre+1
},0)

//结果
//0 1 0 [ 1, 2, 3 ]
//1 2 1 [ 1, 2, 3 ]
//2 3 2 [ 1, 2, 3 ]

以上为例，reduce方法接收两个参数

第一个参数是想要执行的回调函数

第二个参数是返回值（pre）的初始值

而回调函数有四个可选参数：

1、pre：上一次执行的结果（若为第一次则是设定的初始值）

2、cur：当前在处理的元素

3、index：当前处理元素的下标

4、curArr：当前在处理的数组

reduce()方法使用实例

1、数组求和

let arr=[1,2,3]
let reslut=arr.reduce((pre,cur)=>{
    return pre+cur
})
console.log(reslut)//6

2、计算重复元素个数

let data=[
    {key:'a',id:'1'},
    {key:'b',id:'2'},
    {key:'b',id:'2'},
    {key:'c',id:'3'},
    {key:'a',id:'1'}
]

let reslut=data.reduce((pre,cur)=>{
    [cur.key] in pre ? ++pre[cur.key] : pre[cur.key]=1
    return pre
   
},{})
console.log(reslut) //{ a: 2, b: 2, c: 1 }

3、数组扁平化

let arr=[1,2,[3,4,[5,6]]];
let reslut=(arr)=>{
    return arr.reduce((pre,cur)=>{
           return  pre.concat(Array.isArray(cur) ? reslut(cur):cur);
    },[])
}


console.log(reslut(arr)) //[ 1, 2, 3, 4, 5, 6 ]