数组转树/树转数组

数组转树

pid指向的id值就是父元素。

    <script>
        const arr = [
            { id: 1, pid: null, name: '研发部' },
            { id: 2, pid: null, name: '管理部' },
            { id: 3, pid: 1, name: "前端研发部" },
            { id: 4, pid: 1, name: "后端研发部" },
            { id: 5, pid: 2, name: "行政管理部" },
            { id: 6, pid: 2, name: "人力资源管理部" },
            { id: 7, pid: null, name: "财务部" },
            { id: 8, pid: 4, name: "JAVA后端研发部" }
        ]

        const data1 = [
            { 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(arr, pid = '') {
            return arr.reduce((pre, cur) => {
                if (cur.pid == pid) {
                    let child = toTree(arr, cur.id)
                    if (child.length) {
                        cur.child = child;
                    }
                    pre.push(cur)
                }
                return pre
            }, [])
        }
        //思路：先将CEO找出来  pid为''/null
        // 运用数组的reduce方法  递归当前值  通过将pid设为当前值的id 找出当前值的所有直系子元素
        // 将child作为当前值的属性  
        console.log(toTree(data1));
    </script>

树转数组

 function toArr(arrTree) {
            return arrTree.reduce((pre, cur) => {
                if (!cur.child) {
                    pre.push(cur)
                } else {
                    let childList = toArr(cur.child)
                    delete cur.child
                    pre.push(cur, ...childList)
                }
                return pre
            }, [])
        }
        let res = toArr(arrTree)
        console.log(res)

        //思路：树使用reduce方法   如果没有child属性  那么直接加入数组
        //如果有child属性  那么先使用递归把当前值的child全部找到  然后删除掉child属性  在把当前值和child加入数组