reduce()数组方法的使用场景

不爱吃糖的程序媛

发布于 2024-01-18 21:01:23

1940

发布于 2024-01-18 21:01:23

定义：reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。语法：arr.reduce(function(prev,cur,index,arr){undefined 一系列操作 }, init); prev：必需(初始值, 或者计算结束后的返回值)； cur：必需(当前元素)； index：可选(当前元素的索引)； arr：可选(当前元素所属的数组对象)； init：可选(传递给函数的初始值)；

场景一：数组累加、累乘

let arr1 = [1,2,3,4,5]
console.log(arr1.reduce((x,y)=>x+y));// 15
console.log(arr1.reduce((x,y)=>x*y));// 120

场景二：计算数组中每个元素出现的次数

let arr2 = ['a','b','c','d','a','b','c','a','b','a']
let num = arr2.reduce((prev,cur)=>{
    if(cur in prev){//如果prev(初始对象)包含cur(当前元素),数量累加
        prev[cur]++
    }else{
        prev[cur] = 1
    }
    return prev
},{});//初始值需要设置一个空的对象
console.log(num);// {a: 4, b: 3, c: 2, d: 1}

场景三：数组去重

let arr3 = [1,2,3,4,3,2,1,2,3,1]
let remo = arr3.reduce((prev,cur)=>{
    if(prev.indexOf(cur)==-1){//如果prev没找到cur
        return prev.concat(cur)
    }else{
        return prev
    }
    // if(!prev.includes(cur)){//如果prev不包含cur
    //     return prev.concat(cur)
    // }else{
    //     return prev
    // }
},[]);// 初始值设置一个空数组
console.log(remo);// [1,2,3,4]

场景四：将二维数组转化为一维数组

let arr4 = [[0, 1], [2, 3], [4, 5]]
let newArr1 = arr4.reduce((prev,cur)=>{
     return prev.concat(cur)
 },[])
 console.log(newArr1); // [0, 1, 2, 3, 4, 5]

场景五：将多维数组转化为一维数组

let arr5 = [[0, 1], [2, 3], [4,[5,6,7,8]]]
function newArr(arr5){
    return arr5.reduce((prev,cur)=>prev.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr5)); //[0, 1, 2, 3, 4, 5, 6, 7, 8]

场景六：累加对象数组中的值

let arr6 = [{a: 1}, {a:2}, {a:3}]
let sum = arr6.reduce( (prev, cur) => prev + cur.a ,0);
console.log(sum); // 6

场景七：求数组中最大的值

let arr7 = [1,5,9,4,3,7,12]
let maxNum = arr7.reduce((prev,cur)=>{
    return Math.max(prev,cur);// Math.max方法可以求出给定参数中最大的数,Math.min方法可以求出给定参数中最小的数
})
console.log(maxNum);// 12

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-18，如有侵权请联系 cloudcommunity@tencent.com 删除

reduce