三目运算符小技巧

短路求值（Short-Circuit Evaluation）

三目运算符是一个很方便快捷的书写一些简单的逻辑语句的方式

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

但是有些时候当逻辑复杂之后，三目运算符书写起来可读性也会很难。这个时候，我们就可以使用逻辑与（&&）和逻辑或（||）运算符来改写我们的表达式。

逻辑与和逻辑或操作符总是先计算其做操作数，只有在仅靠左操作数的值无法确定该逻辑表达式的结果时，才会求解其右操作数。这被称为“短路求值（Short-Circuit Evaluation）”

工作原理

与（&&）运算符将会返回第一个false/‘falsy’的值。当所有的操作数都是true时，将返回最后一个表达式的结果。

let one = 1, two = 2, three = 3;

console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

或（||）运算符将返回第一个true/‘truthy’的值。当所有的操作数都是false时，将返回最后一个表达式的结果。

let one = 1, two = 2, three = 3;

console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

运算符	语法	说明
逻辑与，AND（&&）	expr1 && expr2	若 expr1 可转换为 true，则返回 expr2；否则，返回 expr1。
逻辑或，OR（||）	expr1 || expr2	若 expr1 可转换为 true，则返回 expr1；否则，返回 expr2
逻辑非，NOT（!）	!expr	若 expr 可转换为 true，则返回 false；否则，返回 true。

场景举例

当我们从服务器端请求数据的过程中，我们在另一个位置来使用这个数据，但是获取数据的状态并不知道，如我们访问this.state的data属性。按照常规的方式我们会先去判断这个this.state.data的有效性，之后根据有效性情况分别进行区分处理。

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

但是我们可以通过上面的方式来简写这个逻辑处理。

return (this.state.data || 'Fetching Data');

对比发现这个方式更加的简洁方便。