js处理树形结构数据过滤

最近项目经常遇到后台接口返回整个树形结构，而前端展示只需要展示部分类型的数据，需要过滤一下，所以整理了一个过滤方法。

非层级结构时过滤非常简单，只需要一层代码就够了

export function filterTree (tree) {
    return tree.filter(item => item.type === 0)
}

而要做到子节点也过滤时就需要用到递归去过滤

思路梳理：循环数组，然后过滤数据，如果有子节点，子节点过滤，把子节点传给递归函数

实现：

export function filterTree (tree, arr = []) {
    if (!tree.length) return []
    for (let item of tree) {
        // 循环数组，然后过滤数据
        // 如果该条数据type不为0时，跳出本次循环
        if (item.type !== 0) continue
        // 如果满足条件时，用新node代替，然后把chilren清空
        let node = {...item, children: []}
        // 然后添加到新数组中
        arr.push(node)
        // 如果有子节点，调用递归函数，并把空数组传给下一个函数
        // 利用引用数据类型的特性，实现浅拷贝
        // 递归函数过滤时会改变这个空数组数据，从而实现层级结构过滤
        if (item.children && item.children.length) {
            filterTree(item.children, node.children)
        }
    }
    return arr
}

过滤条件可以根据实际情况修改，这个函数是根据节点的type进行过滤

而此次函数的迷惑点便是根据引用数据的特点，向下次递归函数传递chilren数组，当下次递归函数改变chilren时，首层的chilren也会随之改变，从而达到树级结构属性过滤的功能