对于某些页面的按钮需要显示，产品设计时有可能会丢出一个导图
无标题.png
一般情况下使用if/else即可，但是存在一些问题：
- 当这个导图很复杂的情况下，if/else也会变得很复杂
- 当导图发生变更，要修改原来已经写好的if/else既耗时，也容易出错
所以，如果能将导图按图的形式搬到代码中，可以一一对应最好。
解决方案
JS中的对象定义跟js一样简介方便，所以将导图直接对应到代码可以像这样简洁明了：
const conditionTree = {
"活动项目": {
"条件a为2": {
"分数合格": ["显示A"],
"分数不合格": ["显示B"]
},
"条件a为1": ["显示C", "显示D"]
},
"比赛项目": {
"分数合格": ["显示A"],
"分数不合格": ["显示B"]
},
}
在这个conditionTree中每个普通结点是判断的特征，叶子结点则是结果
有了conditionTree后，就可以进行搜索了，写如下搜索函数：
function queryTree(strs, tree) {
let value;
let curKey;
for (let key in tree) {
if (strs.find(a => a == key) != null) {
curKey = key;
value = tree[key];
break;
}
}
if (value == null) {
console.error('没有找到匹配的', strs, tree);
} else {
// console.log(curKey, value)
if (Object.prototype.toString.call(value) === '[object Object]') {
return queryTree(strs, value);
} else if (Object.prototype.toString.call(value) === '[object Array]') {
return value;
} else {
console.error('没有找到最终结果', strs, tree);
}
}
}
strs是当前需要判断的特征，例如是["比赛项目","分数合格","条件a为1"]。通过遍历，就可以得出["显示A"]这个结果了。例如这样调用：
queryTree(["比赛项目","分数合格","条件a为1"],conditionTree);
得益于js的弱类型，queryTree可以放函数、对象等多种类型，搜索时也可加入模糊搜索，使适用场景变得更加丰富。
