如果我们有一个需求，把一个tree结构的数据的第三级的数据的属性show修改成false，如果children里面的都是false那么父级的show也是false
// 测试数据
const list = [{
label: '234234234',
show: true,
children: [{
label: '123123',
show: true,
children: [{
label: '234234234',
show: true,
children: [{
label: '234234234',
show: true
},
{
label: '234234234',
show: true
}
]
},
{
label: '234234234',
show: true
},
{
label: '234234234',
show: true,
children: [{
label: '234234234',
show: true
}]
}
]
},
{
label: '234234234',
show: true
}
]
}]
那么怎么处理这个需求呢？答案肯定是需要用到递归函数
// 测试数据
const list = [{
label: '234234234',
show: true,
children: [{
label: '123123',
show: true,
children: [{
label: '234234234',
show: true,
children: [{
label: '234234234',
show: true
},
{
label: '234234234',
show: true
}
]
},
{
label: '234234234',
show: true
},
{
label: '234234234',
show: true,
children: [{
label: '234234234',
show: true
}]
}
]
},
{
label: '234234234',
show: true
}
]
}]
// 未改变之前
console.log(JSON.stringify(list, null, 4))
const deep = (roots, level = 0) => {
for (const listElement of roots) {
listElement.level = level
// if (listElement.level == 1) {
// listElement.show = false
// }
if (listElement.show && listElement.level == 3) {
listElement.show = false
deep(list, 0)
}
if (listElement.children && listElement.children.length) {
if (
listElement.show &&
listElement.children.filter((v) => v.show).length == 0
) {
listElement.show = false
deep(list, 0)
break
}
deep(listElement.children, listElement.level + 1)
} else {
if (listElement.show) {
listElement.show = false
deep(list, 0)
}
}
}
}
deep(list, 0)
// 改变之后
console.log(JSON.stringify(list, null, 4))
关键点的解析
首先递归要注意条件 ，否则就是会堆栈溢出也就是死循环。
注意观察代码每一次调用递归前面都有一个if 这个if就是防止死循环的。
另一个细节就是每次修改属性了以后就再次从根节点开始，这样就是可以防止漏掉父级的判断。