处理常见的树形结构的递归方法

不念不忘少年蓝@ 2022-10-12 15:55 170阅读 0赞

# **一、** #

后台设计一张分类表的时候，如果有多级分类，通常会这样设计，使用parentId来标注它的父级是哪条数据，而且这种分类往往是不确定多少级：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

这种数据，对于后端来说只是一条条数据，而对于前端来说，必须把这样的数据转化为树形数据，此时可以使用递归方法类解决此类问题：

后端传过来的数据：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1][]

最终的转化的数据格式如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 2][]

递归算法：

支持无限极分类。

效果如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 3][]

# **二、删除树节点** #

**如果前端树种有删除功能，当删除父节点时，父节点下的所有子节点也需要被删除，这种操作可以使用递归算法来解决**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 4][]

// 递归遍历查找要删除的id result -> []
    function getDelateIds(list, id) {
      list.forEach((item, index) => {
        let rowId = item["id"]
        if(rowId === id) {
          // 将目标id存放到结果集数组中
          deleteIds.push(id);
          // 遍历所有子节点
          const children = item.children;
          if(!!children) {
            children.forEach(sonItem => {
              this.getDelateIds(children, sonItem.id);
            })
          }
        }else {
          const children = item.children;
          if(!!children) {
            this.getDelateIds(children, item.id)
          }
        }
      })
      return deleteIds;
    }
    // list: 树形数据； id：要删除的节点id
    getDeleteIds(list, id)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: /images/20221005/b1173ae24eb34a07bd136d5fad66ebec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1]: /images/20221005/cd8fcf5d638b44439f5d423b7a188ef0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 2]: /images/20221005/93ec65025e2040a2a9d2b91dee1869ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 3]: /images/20221005/af324217ac6743f1bc996255b09e0b8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 4]: /images/20221005/f53019ad8d9a44d4b613bcd70e954f44.png