摘要：循環(huán)數(shù)組每一項(xiàng)數(shù)組下標(biāo)當(dāng)前調(diào)用數(shù)組本身可選初始值，作為回調(diào)函數(shù)第一個(gè)參數(shù)的默認(rèn)值，也是每次回調(diào)的返回值，見(jiàn)代碼首頁(yè)問(wèn)題轉(zhuǎn)化為數(shù)組首頁(yè)問(wèn)題轉(zhuǎn)化后效果這個(gè)栗子來(lái)自配置路由時(shí)遇到的，當(dāng)時(shí)也是優(yōu)化了好幾個(gè)版本。

callback（一個(gè)在數(shù)組中每一項(xiàng)上調(diào)用的函數(shù)，接受四個(gè)參數(shù)：）
previousValue（上一次調(diào)用回調(diào)函數(shù)時(shí)的返回值，或者初始值）
currentValue（當(dāng)前正在處理的數(shù)組元素）
currentIndex（當(dāng)前正在處理的數(shù)組元素下標(biāo)）
array（調(diào)用reduce()方法的數(shù)組）

initialValue（可選的初始值。作為第一次調(diào)用回調(diào)函數(shù)時(shí)傳給previousValue的值）

概念一搜一大把，我們聊點(diǎn)我遇到的和理解的，見(jiàn)代碼

callback

//reduce作為累加器
        let arr = [1, 2, 3, 4, 5]
        let sum = arr.reduce((init, item, i, self) => {
            console.log(`init---${init}, item---${item}, i---${i}, self---${self}`)
            return init + item
        })
        console.log(sum) //15

分別看一下回調(diào)參數(shù) 見(jiàn)下圖

init默認(rèn)為數(shù)組第一項(xiàng)，一次累加數(shù)組項(xiàng)，最后返回一項(xiàng)。
item循環(huán)數(shù)組每一項(xiàng)
i數(shù)組下標(biāo)
self當(dāng)前調(diào)用reduce數(shù)組本身

initialValue

可選初始值，作為回調(diào)函數(shù)第一個(gè)參數(shù)的默認(rèn)值，也是每次回調(diào)的返回值，見(jiàn)代碼

       let obj = {
            "/home": {
                meta: {
                    title: "首頁(yè)"
                },
                component: "@/page/home"
            },
            "/question": {
                meta: {
                    title: "問(wèn)題"
                },
                component: "@/page/question"
            }
        }
        // 轉(zhuǎn)化為數(shù)組
        let map = [{
            path: "/home",
            meta: {
                title: "首頁(yè)"
            },
            component: "@/page/home"
        }, {
            path: "/question",
            meta: {
                title: "問(wèn)題"
            },
            component: "@/page/question"
        }]

        let map1 = Object.keys(obj).reduce((arr, item) => {
            return (arr.push({
                path: item,
                ...obj[item]
            }), arr)
        }, [])
        console.log(map1)

轉(zhuǎn)化后效果

這個(gè)栗子來(lái)自vue配置路由時(shí)遇到的，當(dāng)時(shí)也是優(yōu)化了好幾個(gè)版本。

接下來(lái)詳細(xì)解釋一下

Object.keys(obj) //把obj轉(zhuǎn)化為內(nèi)容為key的數(shù)組

reduce((arr,item)=>{
})
//上邊已經(jīng)解釋過(guò)參數(shù)了，回調(diào)后邊的參數(shù)[]：返回值默認(rèn)值是一個(gè)空數(shù)組

關(guān)于 
        return (arr.push({
                path: item,
                ...obj[item]
            }), arr)

其實(shí)可以寫(xiě)成
       arr.push({
                path: item,
                ...obj[item]
            })
        return arr

      

具體請(qǐng)查看：javascript逗號(hào)操作符

別急還有一個(gè)用法新鮮剛發(fā)現(xiàn)的。

  //需求：判斷數(shù)組每一項(xiàng)的end和下一項(xiàng)的start是否是遞增的，返回ture or false
        let arr = [{
            start: 1,
            end: 3
        }, {
            start: 1,
            end: 3
        }, {
            start: 4,
            end: 5
        }]

      
        function isTure(arr) {
            let status = true
            arr.reduce((pro, next) => {
                if (pro.end >= next.start) {
                    status = false
                    return false
                }
                return next
            })
            return status
        }

        console.log(isTure(arr))

這里我們巧用了 reduce的返回值，每次返回當(dāng)前項(xiàng)，這樣兩個(gè)參數(shù)始終為1，2 | 2，3|3，4依次類(lèi)推

[map]https://segmentfault.com/a/11...

//新加獲取數(shù)組重復(fù)次數(shù)最多的字符
var arr = ["a", "s", "d", "f", "g", "r", "t", "h", "y", "t", "w", "w", "w", "w", "w", "r", "d", "s"]

        function getMaxLen(arr) {
            let str = ""
            let len = 0
            arr.reduce((map, item) => {
                map[item] ? ++map[item] : map[item] = 1
                if (map[item] > len) {
                    len = map[item]
                    str = item
                }
                return map
            }, {})
            return {
                str,
                len
            }
        }
        console.log(getMaxLen(arr))//{str: "w", len: 5}
        
        

推薦個(gè)人專(zhuān)欄：https://segmentfault.com/blog...

您的吐槽or點(diǎn)贊是我的動(dòng)力！