<script>
const data = [
{
label: "一级 1",
name: 'js 1',
children: [
{
label: "二级 1-1",
name: 'js 10',
children: [
{
label: "三级 1-1-1",
name: 'js 101',
},
],
},
],
},
{
label: "一级 2",
name: 'js 2',
children: [
{
label: "二级 2-2",
name: 'js 20',
children: [
{
label: "三级 2-2-3",
name: 'js 2-2-3',
name: 'js 201',
},
],
},
{
label: "二级 2-2-1",
name: 'js 202',
children: [
{
label: "三级 2-2-4",
name: 'js 203',
},
],
},
],
},
];
const obj = { label: '一级 2' }
// 思路梳理: 循环数组, 然后过滤数据, 如果有子节点, 子节点过滤, 把子节点传给函数
function filterTree(tree, obj, arr = []){
if (!tree.length) return [];
for (let item of tree) {
if (item?.label === obj?.label) continue;
// 如果满足条件时,用新node代替,然后把chilren清空
const itemValue = {...item};
let node = {id: itemValue?.label, name: itemValue?.label, children: []}
// 然后添加到新数组中
arr.push(node)
// 如果有子节点,调用递归函数,并把空数组传给下一个函数
// 利用引用数据类型的特性,实现浅拷贝
// 递归函数过滤时会改变这个空数组数据,从而实现层级结构过滤
if (item.children && item.children.length) {
filterTree(item.children, obj, node.children);
};
// 当节点的子节点的数据不存在, 可以把它的children删除
node?.children?.length === 0 && delete node?.children;
};
return arr;
};
filterTree(data, obj);
使用的场景:
1. 当前为父节点, 它的所有的子节点的数据也应该被过滤掉。
2. 当前的节点为子节点, 只过滤当前子节点的数据, 父节点中其他子节点的数据还在。
用es6中的filter过滤tree的数据结构某些节点
最新推荐文章于 2023-11-28 16:15:20 发布