Js中的邏輯運算子
阿新 • • 發佈:2020-11-30
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