JS列表数据通过递归实现树形结构

最新推荐文章于 2025-06-03 18:20:00 发布

原创最新推荐文章于 2025-06-03 18:20:00 发布 · 置顶 · 617 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

这段代码展示了如何处理具有pid标识的树形数据结构，通过递归函数List寻找每个节点的子节点，并构建层级关系。在给定的数据中，根节点pid为null，通过遍历和递归，可以构建整个数据的层级结构，用于前端展示或者数据组织。

  const list = [
            { pid: null, id: 1, data: "1" },
            { pid: 1, id: 2, data: "2-1" },
            { pid: 1, id: 3, data: "2-2" },
            { pid: 2, id: 4, data: "3-1" },
            { pid: 3, id: 5, data: "3-2" },
            { pid: 4, id: 6, data: "4-1" },
        ];

        function List(list, root) {
            const arr = []
            //  先找到父节点
            list.forEach(item => {
                if (item.pid === root) {
                    // 将父节点添加到数组里
                    arr.push(item)
                    // 再次递归调用函数，传入数组跟当前每一项的id跟 pid 去寻找，找到相同的则就是子级
                    const children = List(list, item.id)
                    // console.log(children)
                    // 再次判断有没有存在没有子级情况，返回的是一个空数组
                    if (children.length > 0) {
                        // 有子级就给每一项的item添加个children属性
                        item.children = children
                    }
                }
            })

            return arr
        }

        const arr = List(list, null)
        console.log(arr)