js Array api reduce 记录1. Array.reduce() Array.reduce(参数1 , 【

1. Array.reduce()

Array.reduce(参数1 , 【参数2】)

参数1：回调函数，

比如 `function xxx(total, currentValue , currentIndex , arr) {}`
回调函数内参数解释：
    `total`： 必填，初始值 或 计算结束后的 返回值
    `currentValue`： 必填， 当前元素
    `currentIndex`： 可选， 当前元素的下标
    `arr`： 可选， 当前数组

参数2：可选,传递给函数的初始值

2. 用法解释

假如数组 a 中是 4 个元素 var a = [2 , 3 , 5 , 6]

当没有 参数2 初始值是

var b = a.reduce((total , currentValue , currentIndex , arr)=>{
       // 该回调函数 走 3 遍
       第一遍： 
           total --> 就是a[0] 2
           currentValue  --> a[1] 3
           currentIndex  --> 下标 1
           arr ---> 当前数组
           
       第二遍： 
           total --> undefined  因为上一遍 没有return
           currentValue  --> a[2] 5
           currentIndex  --> 下标 2
           arr ---> 当前数组
          
       第三遍： 
           total --> undefined
           currentValue  --> a[3] 6
           currentIndex  --> 下标 3
           arr ---> 当前数组
           
})

简单点说就是，在 var b = a.reduce()的时候，

如果有第二个参数当初始值，则，回调函数走 4 遍，每一遍的 total ，都是上一遍的 return，第一次的total是初始值

如果没有第二个参数初始值，则，先找到 a[0], 然后再让回调函数走 3 遍，每一遍的 total 都是上一遍的 return ，第一次的total是a[0]

最终的结果 b 则是最后一遍 return 的值

3. 使用场景

3.1 求和或求积

// 求和
var a = [2 , 3 , 5 , 6]
var b = a.reduce((total , cur_value) => {
    return total + cur_value
})

// 求积
var a = [2 , 3 , 5 , 6]
var b = a.reduce((total , cur_value) => {
    return total * cur_value
})

3.2 数组扁平化

// 数组扁平化
var arr1 = [1 , 2 , [3 , 4] , [5 , 6 , 7]]
var arr2 = [8 , 9 , 10]

function flatten(arr) {
    return arr.reduce((res , cur)=>{
        return res.concat(Array.isArray(cur) ? flatten(cur) : cur)
    } , [])
}

console.log(flatten(arr1))
console.log(flatten(arr2))

3.3 计算数组中每个元素出现的次数

// 计算数组中每个元素出现的次数
var arr = ["1111" , "2222" , "2222" , "1111" , "3333" , "2222"]
var res = arr.reduce((pre , cur)=>{
    if (cur in pre) {
        pre[cur]++
    } else {
        pre[cur] = 1
    }
    return pre
} , {})
console.log(res)

3.4 数组去重

    // 数组去重
    var arr = ["1111" , "2222" , "2222" , "1111" , "3333" , "2222"]
    var res = arr.reduce((pre , cur)=>{
        if (!pre.includes(cur)) {
            return pre.concat(cur)
        } else {
            return pre
        }
    } , [])
    console.log(res)

3.5 链式获取对象的属性值

    var obj = {
        name: "zhangsan",
        age: 12,
        wife: {
            name: "凤姐",
            age: 32
        }
    }
    var str = "wife.name"

    var res = str.split(".").reduce((newObje , item)=>{
        return newObje[item]
    } ,obj)
    console.log(res)

js Array api reduce 记录