JS优雅地进行树形条件判断

对于某些页面的按钮需要显示，产品设计时有可能会丢出一个导图

无标题.png

一般情况下使用if/else即可，但是存在一些问题：

1. 当这个导图很复杂的情况下，if/else也会变得很复杂
2. 当导图发生变更，要修改原来已经写好的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可以放函数、对象等多种类型，搜索时也可加入模糊搜索，使适用场景变得更加丰富。