js中使用filter函数过滤树形数据

一、场景

有一个树形数据，想要根据每个节点的 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));