三目運算符小技巧

短路求值（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');

對比發現這個方式更加的簡潔方便。