算法：树结构遍历以及模糊搜索等操作

背景

在日常开发中，树结构是非常常见的，比如这样：

const tree = [
  {
    
    
    name: '树1',
    code: 'tree1',
    children: [
      {
    
    
        name: '树1.1',
        code: 'tree1.1',
        children: [
          {
    
    
            name: '树1.1.1',
            code: 'tree1.1.1',
            children: []
          }
        ]
      }
    ]
  },
  {
    
    
    name: '树2',
    code: 'tree2',
    children: [
      {
    
    
        name: '树2.1',
        code: 'tree2.1',
        children: []
      }
    ]
  }
]

如果我们需要遍历这个树，去查找某个 code 对应的项该怎么做呢？

根据key拿到item

function getTreeNodeFromKey (sourceTree, props = {
    
    
  treeLabel: 'name',
  treeValue: 'code',
  treeChildren: 'children'
}) {
    
    
  // 返回一个函数
  return function (searchValue) {
    
    
    let result = {
    
    }
    // 声明递归函数
    function dfs (node) {
    
    
      // 如果当前节点的 name 或 code 包含搜索字符串，将当前节点加入到结果数组中
      if (node[props.treeValue] === searchValue) {
    
    
        result = node
      }
      // 遍历当前节点的子节点
      node[props.treeChildren] && node[props.treeChildren].forEach(child => {
    
    
        dfs(child)
      })
    }
    // 遍历每一个节点，找到所有匹配的节点
    sourceTree.forEach(node => dfs(node))
    return result
  }
}

调用

getTreeNodeFromKey(tree)('tree1.1.1')

可以看到，我们根据树的 key 拿到了这一项

模糊搜索

模糊搜索只需要把上面的稍作改动

function filterTreeNode (sourceTree, props = {
    
    
  treeLabel: 'name',
  treeValue: 'code',
  treeChildren: 'children'
}) {
    
    
  // 返回一个函数
  return function (searchValue) {
    
    
    searchValue = searchValue.toString()
    // 声明递归函数
    function dfs (node) {
    
    
      // 如果当前节点的 name 或 code 包含搜索字符串，将当前节点加入到结果数组中
      if (node[props.treeLabel].includes(searchValue) || node[props.treeValue].toString().includes(searchValue)) {
    
    
        result.push(node)
      }
      // 遍历当前节点的子节点
      node[props.treeChildren] && node[props.treeChildren].forEach(child => {
    
    
        dfs(child)
      })
    }

    const result = []
    // 遍历每一个节点，找到所有匹配的节点
    sourceTree.forEach(node => dfs(node))
    return result
  }
}

调用

filterTreeNode(tree)('tree1.1')

这里模糊搜索可以根据 name 和 code 来搜索