js处理树形结构数据过滤

发布时间 2023-09-05 11:52:32作者: 是大壳子啊

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

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

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
}