JavaScript 邏輯運算子與進階運用

基本用法 Boolean 邏輯判斷

A && B 最直覺的用法是 A 和 B 兩個都得是 true，才回傳 true，但只要有任一為 false，就回傳 false，用此做聯合型邏輯判斷

let isDone = true;
let isArrived = false;

console.log(isDone && isArrived); // false

isArrived = true;

console.log(isDone && isArrived); // true

A || B 則是只要任一有 true，就回傳 true，需要全都是 false 才回傳 false

let isDone = true;
let isArrived = false;

console.log(isDone || isArrived); // true

isDone = false;

console.log(isDone && isArrived); // false

但是 && 和 || 只能擺 Boolean 嗎？如果擺其他型別會如何？

進階用法

我們來看 MDN 定義的定義

運算式1 && 運算式2

假如 運算式1 可以被轉換成 false （註 : 意思就是 falsy）的話，回傳 運算式1; 否則，回傳 運算式2。因此，&& 只有在兩個運算元都是 true 時才會回傳 true，否則回傳 false

falsy 定義：如果 JS 的運算期望有布林值（例如 if-else, &&, ||），則這些值都會被當成 false：

false, 0, -0, 0n, 空字串, null, undefined, NaN

要注意的是只有這 8 個是 falsy，這 8 個以外都是 truthy

console.log(0 && true); // 0
// 因為 0 是 falsy 所以回傳 0

console.log("我有東西" && "我會被回傳"); // 我會被回傳
// '我有東西'是 truthy 所以回傳運算式2: 我會被回傳

這個懂了之後，看 || 就簡單囉

運算式1 || 運算式2

假如 運算式1 可以被轉換成 true 的話（註 : 意思就是 truthy），回傳 運算式1; 否則，回傳 運算式2 因此，|| 在兩個運算元有任一個是 true 時就會回傳 true，否則回傳 false

剛剛提到了，只要不是 falsy 其他都是 truthy，所以 []、{} 也是 truthy 喔

console.log("非空字串" || NaN); // 非空字串
// 運算式1 非空字串為 truthy 故回傳

console.log(false || NaN); // NaN
// 兩個都是 falsy 依規則還是會回傳 運算式2 NaN

console.log(0 || null); // null
// 兩個都是 falsy 依規則還是會回傳 運算式2 null

串串串在一起

console.log(0 || false || NaN || "哈囉" || 0 || true);

如果串連多個運算子怎麼解？因為 && || 其實本質上只接受左右兩個運算元，也都是由左自右，可以先把思路拆分開來

console.log(0 || false || NaN || "哈囉" || 0 || true);

0 || false 回傳 false，所以能以 false 帶入
由上式可知 0 || false || NaN = false || NaN = NaN
由上式可知 0 || false || NaN || '哈囉' = NaN || 哈囉 = 哈囉
0 || false || NaN || '哈囉' || 0 = 哈囉 || 0 = 哈囉
0 || false || NaN || '哈囉' || 0 || true = 哈囉 || true = 哈囉

其實可以歸納一件事，在 || 的鏈結，由左自右只要一碰到 truthy 就會被回傳，如果都是 falsy 就是回傳最後一個運算元了

console.log(0 || false || NaN || 0n || 0 || false || -0); // -0
console.log(
  0 || false || NaN || "我是第一個 truthy" || 0 || "我不會被傳" || -0
); // 我是第一個 truthy

同理可證，在 && 的鏈結，由左自右只要一碰到 falsy 就會被回傳，如果都是 truthy 就是回傳最後一個運算元了

console.log(true && "非空字元" && [] && NaN && true && 0); // NaN

console.log(
  true && "非空字元" && [] && "Hi" && "Hello" && "大家都是 truthy 所以回傳我"
); // 大家都是 truthy 所以回傳我

React 應用

function Example({ isLoading }) {
  return <div>{isLoading && <p>Loading...</p>}</div>;
}

在 React 中，我們可以使用 && 達到條件式渲染

想要的效果：

如果 isLoading 是 truthy 就顯示 Loading 文字
- 在此刻兩者都是 truthy，所以依規則會回傳 <p>Loading...</p>
如果 isLoading 是 falsy 則什麼都不顯示
- isLoading 為 NaN、false、undefined 等 falsy，會被 && 回傳，在 React 中都是不會顯示任何東西的
- 特別要注意 isLoading 如果是 0 會被當成 falsy 被回傳，而且 React 也會把 0 顯示出來

基本用法 Boolean 邏輯判斷​

進階用法​

串串串在一起​

React 應用​

基本用法 Boolean 邏輯判斷

進階用法

串串串在一起

React 應用