js 通过id、pid遍历集合获得树结构

原数据

        let adreeJson = [
            {id: 1, name: '陕西省', pid: 0},
            {id: 2, name: '山西省', pid: 0},
            {id: 3, name: '广东省', pid: 0},
            {id: 4, name: '西安市', pid: 1},
            {id: 5, name: '宝鸡市', pid: 1},
            {id: 6, name: '莲湖区', pid: 4},
            {id: 7, name: '雁塔区', pid: 4},
            {id: 8, name: '深圳市', pid: 3},
            {id: 9, name: '宝安区', pid: 8},
        ]

需解析成：

        let adressTree = [
            {
                id: 1, name: '陕西省', pid: 0,
                child: [
                    {
                        id: 4, name: '西安市', pid: 1,
                        child: [
                            {id: 6, name: '莲湖区', pid: 4},
                            {id: 7, name: '雁塔区', pid: 4},
                        ]
                    },
                    {
                        id: 5, name: '宝鸡市', pid: 1
                    },
                ]
            },
            {
                id: 2, name: '山西省', pid: 0,
                child: []
            },
            {
                id: 3, name: '广东省', pid: 0,
                child: [
                    {
                        id: 8, name: '深圳市', pid: 3,
                        child: [
                            {id: 9, name: '宝安区', pid: 8}
                        ]
                    }
                ]
            },
        ]

方法一：

先获取顶级节点，然后再通过递归获取其子节点

        function getTop(arry) {
            return arry.filter(item => item.id == item.pid || item.pid == 0)
        }

        function getChild(pArry, arry) {
            pArry.forEach(idt => {
                idt.child = arry.filter(item => idt.id == item.pid)
                if ((idt.child).length > 0) {
                    getChild(idt.child, arry)
                }
            })
            return pArry
        }

        let topTree = getTop(adreeJson)
        console.log(getChild(topTree, adreeJson))

方法二：

也是先获取父节点，然后再递归得到子节点

        //获取顶级节点
        function getParent(arry, id) {
            var newArry = new Array();
            for (let i in arry) {
                if (arry[i].pid == id)
                    newArry.push(arry[i]);
            }
            return newArry;
        }

        function getTree(arrys, id) {
            //深拷贝，否则会影响原数组
            let arry = JSON.parse(JSON.stringify(arrys))
            let childArry = getParent(arry, id);
            if (childArry.length > 0) {
                for (let i in childArry) {
                    //递归得到每个父节点的子节点
                    let _c_c_a = getTree(arry, childArry[i].id);
                    _c_c_a.length > 0 ? childArry[i].child = _c_c_a : childArry[i].child = []
                }
            }
            return childArry
        }

        console.log(getTree(adreeJson, 0))

方法三：

        /*通过定义map，key为当前对象id，value为该对象
        遍历集合,得到对象顶级节点放到集合中返回
        不是顶级的就是当前对象得子节点，将对象放到该节点下*/
        function toTree(nodes) {
            //深拷贝，否则会影响原数组
            let node = JSON.parse(JSON.stringify(nodes))
            node.forEach(item => delete item.child)
            let map = {}
            node.forEach(item => map[item.id] = item)
            let newNode = []
            node.forEach(dt => {
                let parents = map[dt.pid]
                if (parents) {
                    ((parents.child) || (parents.child = [])).push(dt)
                } else {
                    newNode.push(dt)
                }
            })
            return newNode
        }

        console.log(toTree(adreeJson))

标签：name,树结构,pid,js,let,child,id,arry
来源： https://www.cnblogs.com/yingzi1028/p/16415655.html