求助一个数组转换成tree结构问题。

Question

后端放回的数组结构，前端渲染要转换成tree结构渲染
需求:list转换层listMap，主要是根据lelve层级来转换，毫无头绪。。求助

Answer 1

lelve 和 childer 是拼写错误？还是说这不是英语？
我不管，我用我认识的 level 和 children 做样例数据。
观察已经有序的源数据，可以认为这是按深度遍历顺序排列出来的，自己做个简单的 level 栈 (path) 就好。
注意下例中的 path 并不是一个真正的栈，因为没有 pop 操作，但通过序号存取的过程跟栈操作相似（写出来看就明白了）。

const list = [
    { name: "b-2", level: "2" },
    { name: "b-3", level: "3" },
    { name: "b-3", level: "3" },
    { name: "b-2", level: "2" },
    { name: "b-3", level: "3" },
    { name: "b-4", level: "4" },
];

function listToTree(list) {
    // 原数据中没有 level 为 1 的节点
    // 所以产生一个虚拟 root 节点
    // 而且根据节点序号猜测，节点序号是从 1 开始的
    let virtualRoot = { level: 1, children: [] };

    // path 记录当前处理路径，注意 virtualRoot 的序号是 0，正好是 level - 1
    let path = [virtualRoot];

    // 遍历处理
    list.forEach(it => {
        // 找到当前节点的层序号，及其父节点序号
        const levelIndex = parseInt(it.level) - 1;
        const parentLevelIndex = levelIndex - 1;
        // 根据序号找到父节点
        const parent = path[parentLevelIndex];
        // 将当前节点加入到父节点中
        (parent.children ??= []).push(it);
        // 同时将当前节点放入 path，若之前有同级节点，直接替换掉
        path[levelIndex] = it;
    });

    // 返回虚拟根的子节点集即可
    return virtualRoot.children;
}

const listMap = listToTree(list);


console.log(JSON.stringify(listMap, null, 2));

Answer 2

你这个是不是缺少了一个标识哦？你图片上第一个b2和第二个b2下面的b3，是通过什么来区分他们属于哪一个b2的呢？