记录一下前端的小技巧，如何递归删除树形数组的某些元素？关于这个问题，首先想到就是 splice 方法，但是使用不当会出现数据问题，因为它会改变原始数组，所以删除目标元素后，记得调整索引值。另外一个方法是filter过滤器来实现。
要求如下：
（1）在一个树形数组中，删除ID为10000倍数的树节点；
（2）使用递归思想实现；
一、首先树形数据如下所示
const treeData = [
{
"id": 1,
"label": "爱老虎油_1",
"parent_id": 0
},
{
"id": 2,
"label": "爱老虎油_2",
"parent_id": 0,
"children": [
{
"id": 3,
"label": "爱老虎油_3",
"parent_id": 2,
"children": [
{
"id": 4,
"label": "爱老虎油_4",
"parent_id": 3,
"children": [
{
"id": 20000,
"label": "爱老虎油_20000",
"parent_id": 4
},
{
"id": 100000,
"label": "爱老虎油_100000",
"parent_id": 4
}
]
},
{
"id": 5,
"label": "爱老虎油_5",
"parent_id": 3
},
{
"id": 6,
"label": "爱老虎油_6",
"parent_id": 3
},
{
"id": 7,
"label": "爱老虎油_7",
"parent_id": 3
}
]
}
]
}
]二、基于 splice 方法实现
/**
* 基于 splice 方法实现
*/
spliceFn(treeData) {
for (let i = 0; i < treeData.length; i++) {
// 当前树节点
const obj = treeData[i]
// 判断该节点的 id 非空，且为 10000 的倍数
if (obj !== null && obj.id !== null && (obj.id % 10000 == 0)) {
console.log('ID为 10000 倍数的树节点 =>', obj.id)
treeData.splice(i, 1) // 删除元素
i = i - 1 // 调整索引值
}
// 对树节点的后代进行递归
const tree = obj.children
if (tree) {
this.spliceFn(tree)
}
}
},三、基于 filter 方法实现
/**
* 基于 filter 方法实现
*/
filterFn(treeData) {
return treeData.filter(
// 实现过滤接口
(obj) => {
// 判断该节点的 id 非空，且为 10000 的倍数
if (obj !== null && obj.id !== null && (obj.id % 10000 == 0)) {
return false // 过滤该节点
}
// 对树节点的后代进行递归
if (obj.children && obj.children.length > 0) {
obj.children = this.filterFn(obj.children)
}
return true // 返回该节点
}
)
},四、使用方式
console.log(
'%c JS - 循环删除数组元素',
'padding: 1px; background-color: #35495e; color: #fff',
'padding: 1px; background-color: #5e7ce0; color: #fff',
)
console.log('%c ∟ %c Before %c =>', 'text-indent: 10px', 'padding: 1px; background-color: #41b883; color: #fff', 'color: #000', treeData)
this.spliceFn(treeData)
console.log('%c ∟ %c After %c =>', 'text-indent: 10px', 'padding: 1px; background-color: #41b883; color: #fff', 'color: #000', treeData)五、效果如下 ~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151204.html
