Js中的邏輯運算符

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