JS中的 && 、|| 、??、?. 運算子
阿新 • • 發佈:2022-05-05
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
,則直接短路返回結果,不再運算右側表示式。運算邏輯如下:
- 計算第一個運算元(左側表示式)的值。
- 檢測第一個運算元的值。如果左側表示式的值可轉換為
false
(如null
、undefined
、NaN
、0
、""
、false
),那麼就會結束運算,直接返回第一個運算元的值。 - 如果第一個運算元可以轉換為
true
,則計算第二個運算元(右側表示式)的值。 - 返回第二個運算元的值。
例項:
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
,則直接短路返回結果,不再運算右側表示式。運算邏輯如下:
- 計算第一個運算元(左側表示式)的值。
- 檢測第一個運算元的值。如果左側表示式的值可轉換為
true
,那麼就會結束運算,直接返回第一個運算元的值。 - 如果第一個運算元可以轉換為
false
,則計算第二個運算元(右側表示式)的值。 - 返回第二個運算元的值。
??
空值合併運算子( ?? )是一個邏輯操作符,如果左側的表示式為 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 |
優先順序:?. > && > ` |
> ??` |