js将数据处理成树结构

最新推荐文章于 2023-08-23 17:29:03 发布

想快快长大

最新推荐文章于 2023-08-23 17:29:03 发布

阅读量1.1k

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/qq_41812254/article/details/102665229

版权

前端同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        const list = [{
                MENU_CODE: 1,
                MENU_NAME: '日志1',
                PARENT_CODE: undefined,
                MENU_STATE: 1,
                MENU_ORDER: 1
            },
            {
                MENU_CODE: 2,
                MENU_NAME: '日志2',
                PARENT_CODE: 1,
                MENU_STATE: 1,
                MENU_ORDER: 62
            }, {
                MENU_CODE: 7,
                MENU_NAME: '日志7',
                PARENT_CODE: 2,
                MENU_STATE: 1,
                MENU_ORDER: 2
            },
            {
                MENU_CODE: 3,
                MENU_NAME: '日志3',
                PARENT_CODE: undefined,
                MENU_STATE: 1,
                MENU_ORDER: 3
            },
            {
                MENU_CODE: 4,
                MENU_NAME: '日志4',
                PARENT_CODE: 3,
                MENU_STATE: 1,
                MENU_ORDER: 4
            },
            {
                MENU_CODE: 5,
                MENU_NAME: '日志5',
                PARENT_CODE: 1,
                MENU_STATE: 1,
                MENU_ORDER: 1
            },
            {
                MENU_CODE: 6,
                MENU_NAME: '日志6',
                PARENT_CODE: undefined,
                MENU_STATE: 1,
                MENU_ORDER: 6
            }
        ];
    </script>
</head>

<body>
    <script>
        function listToTree(list, keyMap = {
            KEY_ID: 'MENU_CODE',
            KEY_PID: 'PARENT_CODE',
            KEY_ORDER: 'MENU_ORDER',
        }) {
            const {
                KEY_ID,
                KEY_PID,
                KEY_ORDER
            } = keyMap;
            const roots = [];
            // 当前非根节点
            let childrenNode = [];

            // 分组根和非根节点
            list.forEach((item) => {
                if (undefined === item[KEY_PID]) {
                    roots.push(item);
                } else {
                    childrenNode.push(item);
                }
            });

            // 遍历根节点
            for (const root of roots) {
                findChild(root);
            }

            // 递归单个根节点
            function findChild(root) {
                if (0 >= childrenNode.length) return;
                let newChildNode = [];
                // root.children = [];
                childrenNode.forEach((child) => {
                    if (root[KEY_ID] === child[KEY_PID]) {
                        if (undefined === root.children) root.children = [];
                        root.children.push(child);
                        findChild(child /**new root */ );
                    } else {
                        newChildNode.push(child);
                    }
                });

                // 排序
                if (undefined !== KEY_ORDER && root.children && 1 < root.children.length) {
                    root.children = root.children.sort((prev, current) => prev[KEY_ORDER] - current[KEY_ORDER]);
                }
                childrenNode = newChildNode;
            }
            return roots;
        }

        document.write(`<pre>${JSON.stringify(listToTree(list), null, 4)}</pre>`);
    </script>
</body>

</html>