JavaScript 扁平化数据转树状数据，pid —＞ children

原始数据

const arr = [
    { id: 1, pid: 0, name: "菜单1" },
    { id: 2, pid: 0, name: "菜单2" },
    { id: 3, pid: 0, name: "菜单3" },
    { id: 4, pid: 1, name: "菜单4" },
    { id: 5, pid: 1, name: "菜单5" },
    { id: 6, pid: 2, name: "菜单6" },
    { id: 7, pid: 4, name: "菜单7" },
    { id: 8, pid: 7, name: "菜单8" },
    { id: 9, pid: 8, name: "菜单9" },
    { id: 10, pid: 9, name: "菜单10" },
    { id: 11, pid: 10, name: "菜单11" },
    { id: 12, pid: 11, name: "菜单12" },
    { id: 13, pid: 12, name: "菜单13" },
    { id: 14, pid: 13, name: "菜单14" },
    // 此处省略后面的内容了，可能还有多个........
];

方法一：

const toTree = function(arr){
    const val = []
    const map = {}
    // 复制一个数组 键值对 id : obj
    arr.forEach(item=>{
        map[item.id] = item
    })
    // 遍历现在的数组
    arr.forEach(item=>{
        // 查看是否有他父亲
        const parent = map[item.pid]
        if(parent){
            (parent.children||(parent.children = [])).push(item)
        }else{
            val.push(item)
        }
    })
    return val
}
console.log(toTree(arr));

方法二：

const result = []
function fn(list) {
    const remap = list.reduce((pre, cur) => {  //###第一步：将数组转换成键值对的形式(键是id值，值是对象)
        pre[cur.id] = cur
        return pre
    }, {})
    //###第二步，循环遍历数组，判断是不是(树状结构最外层，祖宗层数据)第一层的数据(本处就是pid等不等于0)
    for (let item of list) {  //用普通的for循环也行，但是用for in 不行,只能获取数组的元素下标,或者对象的键
        if (item.pid === 0) {
            result.push(item)
            continue
        }
        // console.log(remap[item.pid]); //注意 obj[key] 就代表是对象的值value
        if (item.pid in remap) {   //换成else也可，目的将不是第一层的数据(pid不等于0)挑出来，并赋予一个children属性
            const parent = remap[item.pid];
            parent.children = parent.children || [];
            parent.children.push(item);
        }
    }
    return result
}
fn(arr)

保存下来避免 忘记.....