1. 程式人生 > 其它 >JS中的 && 、|| 、??、?. 運算子

JS中的 && 、|| 、??、?. 運算子

javascript有不少好用的運算子,合理的使用可以大大提高工作效率,以下簡單介紹了4種,具體如下:

&&

邏輯與運算(&&)是 AND 布林操作。只有兩個運算元都為 true 時,才返回 true,否則返回 false。具體描述如表所示:

條件一 條件二 結果 演示
true1 true2 true2 1 && 2 => 2
true false false 1 && 0 => 0
false true false 0 && 1 => 0
false1 false2 false1 null && 0 => null

邏輯與是一種短路邏輯,如果左側表示式為 false,則直接短路返回結果,不再運算右側表示式。運算邏輯如下:

  1. 計算第一個運算元(左側表示式)的值。
  2. 檢測第一個運算元的值。如果左側表示式的值可轉換為 false(如 nullundefinedNaN0""false),那麼就會結束運算,直接返回第一個運算元的值。
  3. 如果第一個運算元可以轉換為 true,則計算第二個運算元(右側表示式)的值。
  4. 返回第二個運算元的值。

例項:

let a = 10
(a > 5) && console.log('哈哈哈'); // 哈哈
等效於:
if(x> 5) {
	console.log('哈哈');
}

||

邏輯或運算(||)是布林 OR 操作。如果兩個運算元都為 true,或者其中一個為 true,就返回 true,否則就返回 false。具體如圖所示:

條件一 條件二 結果 演示
true true true 1 || 2 => 1
true false true 1 || 0 => 1
false true true 0 || 2 => 2
false1 false2 false2 0 || undefined=> undefined

邏輯或也是一種短路邏輯,如果左側表示式為 true,則直接短路返回結果,不再運算右側表示式。運算邏輯如下:

  1. 計算第一個運算元(左側表示式)的值。
  2. 檢測第一個運算元的值。如果左側表示式的值可轉換為 true,那麼就會結束運算,直接返回第一個運算元的值。
  3. 如果第一個運算元可以轉換為 false,則計算第二個運算元(右側表示式)的值。
  4. 返回第二個運算元的值。

??

空值合併運算子( ?? )是一個邏輯操作符,如果左側的表示式為 null 或者 undefined 時,返回其右側表示式,否則返回左側表示式。
下列表格中的true、false 表示除null undefined 之外任意

條件一 條件二 結果 演示
null 1 1 null ?? 1 => 1
undefined 2 2 undefined ?? 2 => 2
true false true true ?? false => true

?.

可選鏈操作符( ?. )允許讀取位於連線物件鏈深處的屬性的值,而不必明確驗證鏈中的每個引用是否有效。( ?. ) 操作符的功能類似於( . )鏈式操作符,不同之處在於,在引用為空(nullish ) (null 或者 undefined) 的情況下不會引起錯誤,該表示式短路返回值是 undefined。與函式呼叫一起使用時,如果給定的函式不存在,則返回 undefined。

const obj={
	name:'張三',
	age:12
}
console.log(obj ?. name); // 張三
console.log(obj ?. xxxxx); // undefined

下表承接上面資料:

條件一 條件二 結果 演示|
obj(存在) name 張三 obj ?. name =>張三
obj(不存在) xxxx undefined obj ?. xxxxx =>undefined
優先順序:?. > && > ` >??`