JS使用reduce()方法处理树形结构数据

array.reduce(function(prev, cur, index, array){
    ...
}, init);

const arr = [1, 3, 5, 7]
arr.reduce(function(prev, cur, index, arr){
    console.log(prev, cur, index)
    return prev + cur
})

const arr = ['ab', 'v', 'd', 'ab', 'h', 'e', 'dc', 'e', 'e', 'f']
const newArr = arr.reduce(function(prev, cur){
    !prev.includes(cur) && prev.push(cur)
    return prev
}, [])
console.log(newArr) // ["ab", "v", "d", "h", "e", "dc", "f"]

//从后台获取的对象数组，根据对象的type进行分组合并成tree树形展示数据
const dataArr = [
    { type: '治理层', name: 'Hive_82', reserve: '2', id: 1 },
    { type: '原始数据层', name: 'qwe', reserve: '1', id: 2 },
    { type: '贴源层', name: 'Mysql_exchanGIS', reserve: '3', id: 3 },
    { type: '治理层', name: 'links_188', reserve: '1', id: 4 },
    { type: '贴源层', name: 'mysql_ces', reserve: '2', id: 5 }
]
const treeData = dataArr.reduce((cur, next) => {
    const obj = cur.find(curItem => curItem.label === next.type)
    if (obj) {
        if (obj.children.indexOf(next.id) === -1) { //去重处理
            obj.children.push({ 
                ...next, 
                label: next.name 
            })
        }
    } else {
        const newObj = {
            label: next.type,
            children: [{
                ...next,
                label: next.name
            }]
        }
        cur.push(newObj)
    }
    return cur
}, [])
​
// 合并后的结果：
treeData = [
    {
        label: '治理层',
        children: [
            { type: '治理层', name: 'hive_82', reserve: '2', id: 1, label: 'hive_82' },
            { type: '治理层', name: 'links_188', reserve: '1', id: 4, label: 'links_188' }
        ]
    },
    {
        label: '原始数据层',
        children: [
            { type: '原始数据层', name: 'qwe', reserve: '1', id: 2, label: 'qwe' }
        ]
    },
    {
        label: '贴源层',
        children: [
            { type: '贴源层', name: 'mysql_exchangis', reserve: '3', id: 3, label: 'mysql_exchangis' },
            { type: '治理层', name: 'mysql_ces', reserve: '2', id: 5, label: 'mysql_ces' }
        ]
    }
]

const dataArr = [
    {id: '18', name: '重置密码', parentId: '30',parentName: '用户管理'}, 
    {id: '13', name: '审计日志', parentId: '29', parentName: '系统管理'}, 
    {id: '29', name: '系统管理', parentId: '0', parentName: null}, 
    {id: '14', name: '修改', parentId: '33', parentName: '部门管理'}, 
    {id: '2', name: '用户列表', parentId: '30', parentName: '用户管理'}, 
    {id: '30', name: '用户管理', parentId: '29', parentName: '系统管理'}, 
    {id: '33', name: '部门管理', parentId: '0', parentName: null}, 
    {id: '37', name: '添加用户', parentId: '30', parentName: '用户管理'}, 
    {id: '6', name: '添加', parentId: '33', parentName: '部门管理'}, 
    {id: '7',name: '删除', parentId: '33', parentName: '部门管理'}
]
//创建菜单id的映射关系
const idMapping = dataArr.reduce((prev, next, i) => {
    prev[next.id] = i
    return prev
}, {})
​
const treeData = []
dataArr.map(el => {
    // 一级菜单
    if (el.parentId === '0') {
        treeData.push(el)
        return
    }
    
    // 通过映射找到父元素
    const parentEl = dataArr[idMapping[el.parentId]] 
​
    // 把当前元素添加到父元素的`children`数组中
    parentEl.children = [...(parentEl.children || []), el]
})
console.log(treeData)

//根据parentId创建映射关系
const result = dataArr.reduce((prev, next) => {
    prev[next.parentId] ? prev[next.parentId].push(next) : prev[next.parentId] = [next];
    return prev;
}, {});
       
Object.keys(result).map(key => {
    result[key].map((item, i) => {
        result[item.id] ? item.children = result[item.id] : ''
    });
}) 
this.treeData = result[0]
console.log(treeData)