js过滤树形结构数据并获取新的树形结构

最新推荐文章于 2024-07-31 18:13:00 发布

「已注销」

最新推荐文章于 2024-07-31 18:13:00 发布

阅读量1.2w

点赞数 9

分类专栏：工具函数文章标签：树形结构数据的过滤

本文链接：https://blog.csdn.net/qq_34295211/article/details/103010894

版权

本文介绍了如何使用JavaScript处理树形结构数据，特别是如何根据特定条件过滤数据并保持原有的层级结构。核心是递归遍历和构建新树形结构。示例代码展示了如何过滤出id为特定值的节点，并提供了处理children为空情况的方法。通过将过滤条件抽象为独立函数，使过滤过程更加灵活和可复用。

摘要由CSDN通过智能技术生成

工作中不时会遇见对树形结构数据的处理，有时候只需要遍历并获取其中一个属性值就行了（这部分内容请参考笔者的另一篇博客JS遍历树形结构方法），有时候我们则需要根据某些条件去过滤并得到新的树形结构数据。

let nodeList = [
    {id: '1-1', children: [{id: '1-2-1'}, {id: '1-2-2'}]},
    {id: '2-1'},
    {id: '3-1', children: [{id: '3-2-1', children: [{id: '3-3-1'}]}]}
]

例如现在我们需要过滤出id为 1-1, 1-2-2, 3-1的数据，并维持原先的层级结构。核心有两点，第一点就是如何递归遍历，第二点就是如何组织新的树形结构，并在后续的遍历中将他传递下去，这里主要是通过参数的引用传递实现的。具体实现如下：

function filterTree (tree = [], map = [], arr = []) {
    if (!tree.length) return []
        for (let item of tree) {
            if (!map.includes(item.id)) continue
            let node = {...item, children: []}
            arr.push(node)