Js中的邏輯運算符

JavaScript中有三個邏輯運算符，&&與、||或、!非，雖然他們被稱為邏輯運算符，但這些運算符卻可以被應用於任意類型的值而不僅僅是布爾值，他們的結果也同樣可以是任意類型。

描述

如果一個值可以被轉換為true，那么這個值就是所謂的truthy，如果可以被轉換為false，那么這個值就是所謂的falsy。會被轉換為false的表達式有: null、NaN、0、空字符串、undefined。
盡管&&和||運算符能夠使用非布爾值的操作數，但它們依然可以被看作是布爾操作符，因為它們的返回值總是能夠被轉換為布爾值，如果要顯式地將它們的返回值或者表達式轉換為布爾值，可以使用雙重非運算符即!!或者Boolean構造函數。

• &&: AND，邏輯與，expr1 && expr2，若expr1可轉換為true則返回expr2，否則返回expr1。
• ||: OR，邏輯或，expr1 || expr2，若expr1可轉換為true則返回expr1，否則返回expr2。
• !: NOT，邏輯非，!expr，若expr可轉換為true則返回false，否則返回true。

短路計算

由於邏輯表達式的運算順序是從左到右，是適用於短路計算的規則的，短路意味着下面表達式中的expr部分不會被執行，因此expr的任何副作用都不會生效。造成這種現象的原因是，整個表達式的值在第一個操作數被計算后已經確定了。

• (some falsy expression) && (expr)短路計算的結果為假。
• (some truthy expression) || (expr)短路計算的結果為真。

邏輯與&&

示例

console.log(true  && true);        // true
console.log(true  && false);       // false
console.log(false && true);        // false
console.log(false && (3 === 4));   // false
console.log("Cat" && "Dog");       // "Dog"
console.log(false && "Cat");       // false
console.log("Cat" && false);       // false
console.log(""    && false);       // ""
console.log(false && "");          // false

尋找第一個falsy的值

&&邏輯與運算符的一個很重要的用法就是尋找第一個falsy的值，並利用短路運算可以避免一些異常。

// 尋找第一個falsy的值
var val0 = 0, val1 = 1, val2 = 2;
var result = val1 && val2 && val0;
console.log(result); // 0

// 配合短路運算
var f0 = () => {
    console.log("Call f0");
    return 0;
}
var f1 = () => {
    console.log("Call f1");
    return 1;
}
var f2 = () => {
    console.log("Call f2");
    return 2;
}
var result = f1() && f0() && f2(); // Call f1 // Call f0 // f2未被調用
console.log(result); // 0

// 避免一些異常
var obj = {f: void 0}
// obj.f(); // Uncaught TypeError: obj.f is not a function
obj && obj.f && obj.f(); // 未拋出異常 // 當有一段鏈式調用時這很有用
obj?.f?.(); //當然使用ES2020的?.操作符也可以

邏輯或||

示例

console.log(true || true);         // true
console.log(false || true);        // true
console.log(true || false);        // true
console.log(false || (3 === 4));   // false
console.log("Cat" || "Dog");       // "Cat"
console.log(false || "Cat");       // "Cat"
console.log("Cat" || false);       // "Cat"
console.log("" || false);          // false
console.log(false || "");          // ""

尋找第一個truthy的值

||邏輯或運算符的一個很重要的用法就是尋找第一個truthy的值，這個操作的使用頻率非常高，通常用來賦值默認值。

// 尋找第一個truthy的值
var val0 = 0, val1 = 1, val2 = 2;
var result = val0 || val1 || val2;
console.log(result); // 1

// 設定默認值
var v1 = void 0;
var result = val0 || 1;
console.log(result); // 1

邏輯非!

示例

console.log(!true);    // false
console.log(!false);   // true
console.log(!"");      // true
console.log(!"Cat");   // false

強制轉換類型

使用雙重非運算符能夠顯式地將任意值強制轉換為其對應的布爾值，這種轉換是基於被轉換值的truthyness和falsyness的。

console.log(!!true);                   // true
console.log(!!{});                     // true // 任何對象都是truthy的
console.log(!!(new Boolean(false)));   // true // 此為對象而不是字面量
console.log(!!false);                  // false
console.log(!!"");                     // false
console.log(!!Boolean(false));         // false // 調用構造函數生成字面量

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://juejin.cn/post/6844903991139123208
https://www.cnblogs.com/yf2196717/p/10867864.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators