三目运算的推荐写法

代码示例

const province = 1;
const city = 1;

const result = province === 1
    ? '北京'
    : province === 2
        ? city === 1
            ? '石家庄'
            : city === 2
                ? '邯郸'
                : '未知'
        : '未知';
        
const dom = `<div>${result}</div>`;

• 上面的代码有在成功的里面继续使用 三元运算 的 也有在失败的里面使用 三元运算 的
• 当我们在去看代码时很难理清楚到底是在哪种情况下返回什么值
• 下面的流程图是这个逻辑的梳理, 有了流程图再去看确实清晰好多

优化逻辑处理

• 那对于上面的场景我们怎么去优化呢?
• 从上面的流程图我们可以看到在对分支结果的继续处理时, 有的是在 Y 中进行处理, 有的是在 N 中处理, 这就造成了结构的杂乱
• 那能不能尝试只在一个分支上做拆分呢, 假设我们只在 N 时候做拆分, 那我们可以得到如下的流程图
• 这样的处理后逻辑是不是很清楚了呢?
  • province === 1 : 北京
  • province !== 1 && province !== 2 : 未知
  • province !== 1 && province === 2 && city === 1 : 石家庄
  • province !== 1 && province === 2 && city !== 1 && city === 2 : 邯郸
  • province !== 1 && province === 2 && city !== 1 && city !== 2 : 未知

const province = 1;
const city = 1;

const result = province === 1 ? '北京'
    : province !== 2 ? '未知'
        : city === 1 ? '石家庄'
            : city === 2 ? '邯郸'
                : '未知';

const dom = `<div>${result}</div>`;

尝试在 Y 中继续处理

const province = 1;
const city = 1;

const result = province !== 2 && province !== 1
    ? province === 2
        ? city !== 1 && city !== 2
            ? city === 1
                ? '石家庄'
                : '邯郸'
            : '未知'
        : '北京'
    : '未知';
    
const dom = `<div>${result}</div>`;

• 我们可以看到在 N 中处理更好一些
• 结构更简洁, 是递归缩进的一个结构
• 每一行都是一个要返回的结果, 可以很方便的查看有多少种可能的结果
• 可以很方便的查看满足什么条件, 将会返回什么值

总结

• 如果复杂的处理逻辑(判断 > 2 个), 建议进行优化
• 如果可以抽取单独的方法处理, 建议抽取专门处理的方法. 否则建议按照上面介绍的方法处理

// 第一种: 相对简单时, 一行写完
condition ? exprIfTrue : exprIfFalse;
// 第二种: 需要计算时, 加入必要的括号
(condition1 || condition2)  ? exprIfTrue : ('名称' + ': ' + '张三');
// 第三种, 嵌套结构, 每行都是一个返回值
condition1 ? exprIfTrue1
    : condition2 ? exprIfTrue2
        : condition3 ? exprIfTrue3
            : exprIfFalse3