数组转树状结构

很多场景我们需要把类似下面这样的扁平数组，转换为树状结构的数组格式。以下是代码实现及结果展示。

需求

let data = [
        { id: '01', name: '张大大', pid: '', job: '项目经理' },
        { id: '02', name: '小亮', pid: '01', job: '产品leader' },
        { id: '03', name: '小美', pid: '01', job: 'UIleader' },
        { id: '04', name: '老马', pid: '01', job: '技术leader' },
        { id: '05', name: '老王', pid: '01', job: '测试leader' },
        { id: '06', name: '老李', pid: '01', job: '运维leader' },
        { id: '07', name: '小丽', pid: '02', job: '产品经理' },
        { id: '08', name: '大光', pid: '02', job: '产品经理' },
        { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
        { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
        { id: '11', name: '小华', pid: '04', job: '后端工程师' },
        { id: '12', name: '小李', pid: '04', job: '后端工程师' },
        { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
        { id: '14', name: '小强', pid: '05', job: '测试工程师' },
        { id: '15', name: '小涛', pid: '06', job: '运维工程师' }
      ]

代码实现

function toTree(data){
    // 声明一个空数组，接收转换后的结果
    let result = []
    // 判断传入的是否为数组结构，不是的话就return，阻止代码继续往下执行
    if(!Array.isArray(data)){
        return result
    }
    // 声明一个空对象
    let map = {}
    // 循环数组
    data.forEach(item => {
        // 01: {id:'01', name: '张大大', pid: '', job: '项目经理'}
        map[item.id] = item
    })
    
    data.forEach(item => {
        let parent = map[item.pid]
        // 判断parent的值
        if(parent){
            (parent.children || (parent.children = [])).push(item)
        } else {
            result.push(item)
        }
    })
    // 将result返回给调用者
    return result
}

const obj = toTree(data)
console.log(obj)

结果展示