两种方案
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
}

感觉通过获取结果 反向去推导思路,很适合递归算法,而这种算是反向推导,从搜索到的内部子节点开始


健儿
79 声望4 粉丝

掌握好原生js。