JS树形结构数据筛选过滤递归算法实现
树形结构经常遇到顶部有搜索功能需求,JS树形结构数据筛选过滤递归算法实现
·

树形结构经常遇到顶部有搜索功能需求,实现方法即可以调用后端接口进行数据过滤,也可以纯前端写递归算法实现
下面纯前端递归实现代码如下:
let data= [
{
label: "一级 1",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1",
},
],
},
],
},
{
label: "一级 2",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1",
},
],
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1",
},
],
},
],
},
{
label: "一级 3",
children: [
{
label: "二级 3-1",
children: [
{
label: "三级 3-1-1",
},
],
},
{
label: "二级 3-2",
children: [
{
label: "三级 3-2-1",
},
],
},
],
},
]
/*
* arr:树形结构数组
*keyword:搜索关键词
*first:是否首次执行
*/
function filterTree(arr, keyword,first=true) {
if(first){//首次传入深度克隆数据防止修改源数据
arr=JSON.parse(JSON.stringify(arr))
}
let emptyArr = [];
for (let item of arr) {
if (item.label.includes(keyword)) {
if (item.children &&Array.isArray(item.children)&& item.children.length > 0) {
item.children = filterTree(item.children, keyword,false);
}
emptyArr.push(item);
} else if (item.children&&Array.isArray(item.children) && item.children.length > 0) {
item.children = filterTree(item.children, keyword,false);
if (item.children.length) {
emptyArr.push(item);
}
}
}
return emptyArr;
}
调用
filterTree(data,'二级 2')
效果

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)