js一维数组根据pid递归生成树状结构

js一维数组根据pid递归生成树状结构，在前后端分离的项目中，发现有时候吧递归处理交给前端能减少前端工作量，比如这个生产树状图的结构，前端可以自己处理好open、active后再渲染为menu菜单。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let arr = [{
                id: 1,
                name: '部门1',
                pid: 0
            },
            {
                id: 2,
                name: '部门2',
                pid: 1
            },
            {
                id: 3,
                name: '部门3',
                pid: 1
            },
            {
                id: 4,
                name: '部门4',
                pid: 3
            },
            {
                id: 5,
                name: '部门5',
                pid: 4
            },
            {
                id: 6,
                name: '部门6',
                pid: 0
            },
        ];
        //方法一 （递归）
        function arrayToTree(array, pid) {
            let result = []
            array.forEach(item => {
                if (item.pid == pid) {
                    item.children = arrayToTree(array, item.id)
                    result.push(item)
                }
            })
            return result
        }
        let treeArray = arrayToTree(arr, 0)
        console.log('treeArray', treeArray)
        //方法二
        function toTree(data) {
            let result = []
            let map = {};
            data.forEach(item => {
                map[item.id] = item;
            });
            console.log('map', map)
            data.forEach(item => {
                let parent = map[item.pid];
                if (parent) {
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    result.push(item);
                }
         });
            return result;
        }
        console.log('toTree(arr)', toTree(arr))
    </script>
</html>

js一维数组根据pid递归生成树状结构

留言反馈