動態

詳情 返回 返回

多級數組Tree如何做搜索 - 動態 詳情

兩種方案
1、數組打平,根據搜索字符在打平數組裏去filter出滿足條件的node節點,但此時被篩選的節點只有子節點,然後再通過被篩選出的子節點去找對應的父節點,然後拿到結果後轉成tree結構

優點:思路簡單,打平數組用了遞歸,好理解
缺點:找父節點的時候相對麻煩。

2、寫一個遞歸算法,滿足條件就返回tree
比如有一個簡單個tree

const treeData = [
  {
    title: 'a',
    children: [
      {
        title: 'b',
      }
    ]
  }
]

要搜索b這個節點,想到的思路就是獲取到了節點構成的數組

[
    {
        title: 'b',
      }
 ]

如何獲取到他的父節點,並且可以按照原tree的結構,肯定需要一個遞歸循環,先循環到父節點a,然後進入b節點的數組,b節點的數組遞歸結束後,可以返回數組,用父節點a做拼裝

完整寫法:

const filterTreeData = (data, val) => {
  if (!val.trim()) return data;
  const result = []
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
    let children = []
    if (Array.isArray(item?.children) && item.children.length) {
       children = filterTreeData(item.children, val)
    }
    if (item.title.includes(val)) {
      result.push(item)
    }
    if (children.length) {
      return [{...item, children}]
    }
  }
  return result
}

感覺通過獲取結果 反向去推導思路,很適合遞歸算法,而這種算是反向推導,從搜索到的內部子節點開始

user avatar tianmiaogongzuoshi_5ca47d59bef41 頭像 dingtongya 頭像 Leesz 頭像 alibabawenyujishu 頭像 haoqidewukong 頭像 smalike 頭像 nihaojob 頭像 dirackeeko 頭像 littlelyon 頭像 zourongle 頭像 chongdianqishi 頭像 leexiaohui1997 頭像
點贊 134 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.