javascript 中数组方法 reduce 实践5. 一个树形结构要把子节点的属性挂载到父节点上例如vuex 中

Javascript数组方法reduce在项目中不是很常用，但是源码中还是比较常用的，vuex, redux 都用到了reduce方法

1.最常用的就是用他来计算数组求和,这是最基本的用法

var arr = [1,2,3]
let sum = arr.reduce(function(prev, cur){
    return prev + cur
})

2.数组变成对象，工作中会遇到这种需求，需要把 [{id:1},{id:2}]变成对象{1:{id:1}}

var arr = [{id: 1}, {id:2}]
let newArr = arr.reduce(function(prev, cur){
    prev[cur.id] = cur
    return prev
}, {})

3.数组扁平化

var arr = [1, 2, [3, 4, [5,6]]]
function flat(arr) {
   return arr.reduce(function(prev, cur){
      return prev.concat(Array.isArray(cur) ? flat(cur) : cur )    }, [])
}

4.同时计算出数组的最大值和最小值

var arr = [1,2,3,4,5,6]
arr.reduce( (prev, cur) => {
    return {
        maxNum: Math.max(prev.maxNum, cur),
        minNum: Math.min(prev.minNum, cur)
    }
}, { maxNum: Number.MIN_VALUE, minNum: Number.MAX_VALUE} )

5. 一个树形结构要把子节点的属性挂载到父节点上例如vuex 中 store的state,需要把modules的state都代理到state下面

数据结构如下
var store = {
    state: { id: 1},
    modules: {
        a: {
            state: {
                id: 2
            }
        },
        b: {
            state: {
                id: 3
            }
        }
    }
}

接下来递归一个树形结构

function initState(store, path, state) {
   if( path.length > 0 ) {
        let parent = path.slice(0, -1).reduce((state, cur) => {
            return state[cur]
        }, state)
        parent[path[path.length - 1]] = store.state
    }else{
        state = store.state
    }
    if( store.modules ) {
        for( let item in store.modules ) {          initState(store.modules[item], path.concat(item), state)     
        }
    }
    return state
}

运行上面的函数就变成了想要的结果

initState(store, [], {})
{
    state: {
        id: 1,
        a: {id: 2},
        b: {id: 3}
    }

}

这样就可以取到 store.state.a.id vuex 中modules 就是这样实现的