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

夏天夏
  • 3
新手上路,请多包涵

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

回复
阅读 374
2 个回答
✓ 已被采纳

lelvechilder 是拼写错误?还是说这不是英语?
我不管,我用我认识的 levelchildren 做样例数据。
观察已经有序的源数据,可以认为这是按深度遍历顺序排列出来的,自己做个简单的 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));

image.png

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏