侃侃代码递归的实战

如果我们有一个需求，把一个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就是防止死循环的。

另一个细节就是每次修改属性了以后就再次从根节点开始，这样就是可以防止漏掉父级的判断。