标签：name 树结构 pid js let child id arry

原数据

        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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。