JavaScript 核心觀念(19)-運算子、型別與文法-邏輯運算子及函式預設值
前言
接下來將會來講邏輯運算子,邏輯運算子的使用若不當,其實結果也會不同唷。
邏輯運算子
前一篇了解真值與假值之後,這一段觀念是可以套用在邏輯運算子上的。
首先依照 MDN 文件中邏輯運算子有以下幾種
- && (And 運算子),用法 expr1 && expr2
- || (OR 運算子),用法 expr1 || expr2
- ! (Not 運算子),用法 !expr
在 MDN 官方文件中其實也已經說明用法,這邊直接貼上
如果 expr1 可以轉換為 false,就返回 expr1。否則返回 expr2。所以,當使用於布林值時,如果兩個運算元都為 true,&& 返回 true。否則返回 false。
首先先看第一段是什麼意思「如果 expr1 可以轉換為 false,就返回 expr1。否則返回 expr2。」,這一段我們直接看程式碼
1 | var a = 0; // false |
你可以發現只要第一個 expr1 可以被轉換為布林值 false,因此他就直接回傳 expr1 的值,那如果反轉呢?
1 | var a = 0; // false |
你會發現還是回傳 0
這就是驗證了「如果 expr1 可以轉換為 false,就返回 expr1。否則返回 expr2。」
基本上 And 運算子是以第一個值是否為真值為主,假使若為真值,那就一定會回傳第二個值,若第一個值是假值,那他就會回傳第一個值
1 | console.log(1 && 10); // 10 |
而 OR 運算子的部分也可以看一下 MDN 說明
如果 expr1 可以轉換為 true,就返回 expr1。否則返回 expr2。所以,當使用於布林值時,如果其中一個運算元為 true,|| 返回 true,如果兩個運算元都為 false,就返回 false。
因此只要第一個是真值,那就會回傳第一個值,否則就會回傳第二個值
1 | console.log(1 || 0); // 1 |
概念也與 && 有點雷同。
最後一個是比較常搞混的運算子,也就是否定運算子,通常我會把它稱之為反轉結果運算子,簡單來講他會將 true 轉換為 false,而 fasle 變成 ture,此外這個運算子也會直接回傳布林值
1 | !true; // false |
而這邊技巧可以使用在一些小地方,例如給予函式預設值,在早期 ES6 預設值還沒有實作時,往往我們函式如果沒有預設值,可能會發生錯誤,因此就可以這樣寫
1 | function fn(name) { |
上面程式碼如果沒有使用 ES6 預設值時,就會出現「我是 undefined
」,但實際上我們並不希望這樣,而是希望有一個預設值,那就可以使用上面所學的其中一個技巧 OR 運算子來改寫
1 | function fn(name) { |
透過 OR 運算子技巧我們可以就可以解決出現 undefined
問題囉。