Stories

Detail Return Return

多級數組Tree如何做搜索 - Stories Detail

兩種方案
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 Avatar dingtongya Avatar Leesz Avatar alibabawenyujishu Avatar haoqidewukong Avatar smalike Avatar nihaojob Avatar dirackeeko Avatar littlelyon Avatar zourongle Avatar chongdianqishi Avatar leexiaohui1997 Avatar
Favorites 134 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.