reduce

• callback（一个在数组中每一项上挪用的函数，接收四个参数：）
  previousValue（上一次挪用回调函数时的返回值，或许初始值）
  currentValue（当前正在处置惩罚的数组元素）
  currentIndex（当前正在处置惩罚的数组元素下标）
  array（挪用reduce()要领的数组）
• initialValue（可选的初始值。作为第一次挪用回调函数时传给previousValue的值）

观点一搜一大把，我们聊点我碰到的和明白的，见代码

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

离别看一下回调参数 见下图

init默以为数组第一项，一次累加数组项，末了返回一项。
item轮回数组每一项
i数组下标
self当前挪用reduce数组自身

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)

转化后结果

这个栗子来自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逗号操作符

别急另有一个用法新颖刚发明的。

  //需求：推断数组每一项的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) => {
                if (pro.end >= next.start) {
                    status = false
                    return false
                }
                return next
            })
            return status
        }

        console.log(isTure(arr))

这里我们巧用了 reduce的返回值，每次返回当前项，如许两个参数一直为1，2 | 2，3|3，4顺次类推

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

//新加猎取数组反复次数最多的字符
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}
        
        

引荐个人专栏：https://segmentfault.com/blog…

您的吐槽or点赞是我的动力！