短路求值(避免复杂的三目运算)

使用三元运算符可以很快地写出条件语句，例如：

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

但有时候三元运算符仍然很复杂，我们可以使用逻辑运算符 && 和||来替代，让代码更简洁一些。这种技巧通常被称为“短路求值”。

假设我们想要返回两个或多个选项中的一个，

使用 && 可以返回第一个 false。如果所有操作数的值都是 true，将返回最后一个表达式的值。
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

使用||可以返回第一个 true。如果所有操作数的值都是 false，将返回最后一个表达式的值。
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

示例 1

假设我们想要返回一个变量的 length，但又不知道变量的类型。
我们可以使用 if/else 来检查 foo 是否是一个可接受的类型，但这样会让代码变得很长。这个时候可以使用短路求值：
return (foo || []).length;
对于上述两种情况，如果变量 foo 具有 length 属性，这个属性的值将被返回，否则将返回 0。

示例 2

你是否曾经在访问嵌套对象属性时遇到过问题？你可能不知道对象或某个子属性是否存在，所以经常会碰到让你头疼的错误。
假设我们想要访问 this.state 中的一个叫作 data 的属性，但 data 却是 undefined 的。在某些情况下调用 this.state.data 会导致 App 无法运行。为了解决这个问题，我们可以使用条件语句：

if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}
但这样似乎有点啰嗦，而||提供了更简洁的解决方案：
return (this.state.data || 'Fetching Data');