背景
在日常开发中,树结构是非常常见的,比如这样:
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 来搜索