与父母关系按字母顺序分类一棵树

Question

我正在尝试创建一个编码环境，它有一个文件系统，用户可以在其中添加或删除文件，该文件系统是一个树结构，当用户更新该文件系统上的任何内容时，我试图按字母顺序对树进行排序。我尝试在互联网上查找但找不到太多。

[
    {
        "name": "src",
        "id": "DfGfg_ckUK_YRM0Guwz-U",
        "type": "dir",
        "path": "/src",
        "children": [
            {
                "name": "App.css",
                "id": "VZ0DztZohJ5QNZA_MJEJj",
                "type": "file",
                "path": "/src/App.css",
            },
            {
                "name": "style.css",
                "id": "6djglLnepQ5VKpE02FfbJ",
                "type": "file",
                "path": "/src/style.css",
            },
            {
                "name": "components",
                "id": "LQtSXX8bXPRskbQGjBIsU",
                "type": "dir",
                "path": "/src/components",
                "children": [
                    {
                        "name": "Clicker.js",
                        "id": "B-qo2rzjElEq_LdbflIik",
                        "type": "file",
                        "path": "/src/components/Clicker.js",
                    }
                ]
            },
            {
                "name": "index.js",
                "id": "A3aR70uZ-OA1dwLNon7RA",
                "type": "file",
                "path": "/src/index.js",
            },
            {
                "name": "App.js",
                "id": "_43kjHrcpFAvlvn0orNe6",
                "type": "file",
                "path": "/src/App.js",
            }
        ]
    },
    {
        "name": "public",
        "id": "CaQSW19bFlIzdd5l0xKXX",
        "type": "dir",
        "path": "/public",
        "children": [
            {
                "name": "index.html",
                "id": "B1QcK9n8eRVVNF0N_jTeR",
                "type": "file",
                "path": "/public/index.html",
            }
        ]
    }
]

排序后的结构应如下所示。 type='dir' 首先出现（按字母顺序），然​​后是它的文件，这些文件也已排序。任何帮助将不胜感激。

[
    {
        "name": "public",
        "id": "CaQSW19bFlIzdd5l0xKXX",
        "type": "dir",
        "path": "/public",
        "children": [
            {
                "name": "index.html",
                "id": "B1QcK9n8eRVVNF0N_jTeR",
                "type": "file",
                "path": "/public/index.html",
            }
        ]
    },
    {
        "name": "src",
        "id": "DfGfg_ckUK_YRM0Guwz-U",
        "type": "dir",
        "path": "/src",
        "children": [
            {
                "name": "components",
                "id": "LQtSXX8bXPRskbQGjBIsU",
                "type": "dir",
                "path": "/src/components",
                "children": [
                    {
                        "name": "Clicker.js",
                        "id": "B-qo2rzjElEq_LdbflIik",
                        "type": "file",
                        "path": "/src/components/Clicker.js",
                    }
                ]
            },
            {
                "name": "App.css",
                "id": "VZ0DztZohJ5QNZA_MJEJj",
                "type": "file",
                "path": "/src/App.css",
            },
            {
                "name": "App.js",
                "id": "_43kjHrcpFAvlvn0orNe6",
                "type": "file",
                "path": "/src/App.js",
            },
            {
                "name": "index.js",
                "id": "A3aR70uZ-OA1dwLNon7RA",
                "type": "file",
                "path": "/src/index.js",
            },
            {
                "name": "style.css",
                "id": "6djglLnepQ5VKpE02FfbJ",
                "type": "file",
                "path": "/src/style.css",
            },
        ]
    },
]

谢谢。

Answer 1

您将需要：

• 按所示的顶级节点（按类型，然后按名称）
• 对每个节点的子女进行相同的操作，

这是这样的外观：

function sortHierarchy(nodes) {
    nodes.sort((a, b) => a.type.localeCompare(b.type) || a.name.localeCompare(b.name));
    nodes.forEach(({children}) => sortHierarchy(children ?? []));
}

// Demo
const hierarchy = [{"name": "src","id": "DfGfg_ckUK_YRM0Guwz-U","type": "dir","path": "/src","children": [{"name": "App.css","id": "VZ0DztZohJ5QNZA_MJEJj","type": "file","path": "/src/App.css",},{"name": "style.css","id": "6djglLnepQ5VKpE02FfbJ","type": "file","path": "/src/style.css",},{"name": "components","id": "LQtSXX8bXPRskbQGjBIsU","type": "dir","path": "/src/components","children": [{"name": "Clicker.js","id": "B-qo2rzjElEq_LdbflIik","type": "file","path": "/src/components/Clicker.js",}]},{"name": "index.js","id": "A3aR70uZ-OA1dwLNon7RA","type": "file","path": "/src/index.js",},{"name": "App.js","id": "_43kjHrcpFAvlvn0orNe6","type": "file","path": "/src/App.js",}]},{"name": "public","id": "CaQSW19bFlIzdd5l0xKXX","type": "dir","path": "/public","children": [{"name": "index.html","id": "B1QcK9n8eRVVNF0N_jTeR","type": "file","path": "/public/index.html",}]}];

sortHierarchy(hierarchy);
console.log(hierarchy);