一、场景

场景

有一个树形数据,想要依据每个节点的 disabled 来筛选,失去一个过滤后的新树形数据

二、一般数组(抛砖引玉)

如果只是数组,咱们必定晓得,用 js filter就能够了

比方:

var arr = [    { name: '小明', disabled: true },    { name: '小白', disabled: false },    { name: '小黑', disabled: true },]var newArr = arr.filter(i=> i.disabled)console.log(newArr)

三、树形数据

那,如果是这样呢?

let treeData = [    {        id: '1',        name: 'AAA',        disabled: false,        children: [            {                id: '1.1',                name: 'BBB',                disabled: false,                children: [                    {                        id: '1.1.1',                        name: 'CCC',                        disabled: true,                        children: []                    },                    {                        id: '1.1.2',                        name: 'DDD',                        disabled: true,                        children: []                    },                ]            },            {                id: '1.2',                name: 'EEE',                disabled: true,                children: []            },        ]    },    {        id: '2',        name: 'FFF',        disabled: true,        children: [            {                id: '2.1',                name: 'GGG',                disabled: true,                children: [                    {                        id: '2.1.1',                        name: 'HHH',                        disabled: false,                        children: []                    },                    {                        id: '2.1.2',                        name: 'III',                        disabled: true,                        children: []                    },                ]            },            {                id: '2.2',                name: 'JJJ',                disabled: false,                children: []            },            {                id: '2.3',                name: 'KKK',                disabled: false,                children: []            },            {                id: '2.4',                name: 'LLL',                disabled: true,                children: []            },        ]    }]

树形数据的特点就是,你不晓得他有多少层

所以,当遇到树形数据的时候,不必想,必定是递归

四、定义递归函数

定义一个递归过滤的函数

// 定义递归办法,接管一个数组function deepFilter(list) {    // 应用filter 过滤以后层的数组    return list.filter(item => {        // filter其实也是遍历        // 把以后遍历的节点的children 也调用一次 deepFilter 函数,返回过滤后的数组从新赋值        item.children = deepFilter(item.children)        // 最初判断以后节点是否合乎过滤要求        return item.disabled    })}

五、残缺示例

舒适提醒

能够间接复制残缺示例看成果哦
let treeData = [    {        id: '1',        name: 'AAA',        disabled: false,        children: [            {                id: '1.1',                name: 'BBB',                disabled: false,                children: [                    {                        id: '1.1.1',                        name: 'CCC',                        disabled: true,                        children: []                    },                    {                        id: '1.1.2',                        name: 'DDD',                        disabled: true,                        children: []                    },                ]            },            {                id: '1.2',                name: 'EEE',                disabled: true,                children: []            },        ]    },    {        id: '2',        name: 'FFF',        disabled: true,        children: [            {                id: '2.1',                name: 'GGG',                disabled: true,                children: [                    {                        id: '2.1.1',                        name: 'HHH',                        disabled: false,                        children: []                    },                    {                        id: '2.1.2',                        name: 'III',                        disabled: true,                        children: []                    },                ]            },            {                id: '2.2',                name: 'JJJ',                disabled: false,                children: []            },            {                id: '2.3',                name: 'KKK',                disabled: false,                children: []            },            {                id: '2.4',                name: 'LLL',                disabled: true,                children: []            },        ]    }]// 定义递归办法,接管一个数组function deepFilter(list) {    // 应用filter 过滤以后层的数组    return list.filter(item => {        // filter其实也是遍历        // 把以后遍历的节点的children 也调用一次 deepFilter 函数,返回过滤后的数组从新赋值        item.children = deepFilter(item.children)        // 最初判断以后节点是否合乎过滤要求        return item.disabled    })}// 调用let newArr = deepFilter(treeData)// 格式化打印看看成果console.log(JSON.stringify(newArr, null, 4));