javascript reduce詳解和應用

時間 2019-12-05

標籤 javascript reduce 詳解應用欄目 JavaScript 简体版

原文原文鏈接

reduce

callback（一個在數組中每一項上調用的函數，接受四個參數：） previousValue（上一次調用回調函數時的返回值，或者初始值） currentValue（當前正在處理的數組元素） currentIndex（當前正在處理的數組元素下標） array（調用reduce()方法的數組）
initialValue（可選的初始值。做爲第一次調用回調函數時傳給previousValue的值）

概念一搜一大把，咱們聊點我遇到的和理解的，見代碼javascript

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
複製代碼

分別看一下回調參數見下圖 vue

init默認爲數組第一項，一次累加數組項，最後返回一項。 item循環數組每一項 i數組下標 self當前調用reduce數組自己java

initialValue

可選初始值，做爲回調函數第一個參數的默認值，也是每次回調的返回值，見代碼數組

let obj = {
            '/home': {
                meta: {
                    title: '首頁'
                },
                component: '@/page/home'
            },
            '/question': {
                meta: {
                    title: '問題'
                },
                component: '@/page/question'
            }
        }
        // 轉化爲數組
        let map = [{
            path: '/home',
            meta: {
                title: '首頁'
            },
            component: '@/page/home'
        }, {
            path: '/question',
            meta: {
                title: '問題'
            },
            component: '@/page/question'
        }]

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

轉化後效果 bash

這個栗子來自vue配置路由時遇到的，當時也是優化了好幾個版本。函數

接下來詳細解釋一下優化

Object.keys(obj) //把obj轉化爲內容爲key的數組

reduce((arr,item)=>{
})
//上邊已經解釋過參數了，回調後邊的參數[]：返回值默認值是一個空數組

關於 
        return (arr.push({
                path: item,
                ...obj[item]
            }), arr)

其實能夠寫成
       arr.push({
                path: item,
                ...obj[item]
            })
        return arr

      
複製代碼

具體請查看：javascript逗號操做符

別急還有一個用法新鮮剛發現的。ui

//需求：判斷數組每一項的end和下一項的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) => {
                console.log(pro, next)
                if (pro.end >= next.start) {
                    status = false
                    return false
                }
                return next
            })
            return status
        }

        console.log(isTure(arr))
複製代碼