JS - 如何递归删除树形数组的某些元素

前言

记录一下前端的小技巧，如何递归删除树形数组的某些元素？关于这个问题，首先想到就是 splice 方法，但是使用不当会出现数据问题，因为它会改变原始数组，所以删除目标元素后，记得调整索引值。另外一个方法是filter过滤器来实现。

要求如下：

（1）在一个树形数组中，删除ID为10000倍数的树节点；

（2）使用递归思想实现；

一、示例代码

（1）首先准备好树形数据

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
                    }
                ]
            }
        ]
    }
]

（2）基于 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)
    }
  }
},

（3）基于 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 // 返回该节点
    }
  )
},

（4）使用方式

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)

二、运行效果