JavaScript 核心觀念(19)-運算子、型別與文法-邏輯運算子及函式預設值

發表於 | 分類於

前言

接下來將會來講邏輯運算子，邏輯運算子的使用若不當，其實結果也會不同唷。

邏輯運算子

前一篇了解真值與假值之後，這一段觀念是可以套用在邏輯運算子上的。

首先依照 MDN 文件中邏輯運算子有以下幾種

  • && (And 運算子)，用法 expr1 && expr2
  • || (OR 運算子)，用法 expr1 || expr2
  • ! (Not 運算子)，用法 !expr

在 MDN 官方文件中其實也已經說明用法，這邊直接貼上

如果 expr1 可以轉換為 false，就返回 expr1。否則返回 expr2。所以，當使用於布林值時，如果兩個運算元都為 true，&& 返回 true。否則返回 false。

首先先看第一段是什麼意思「如果 expr1 可以轉換為 false，就返回 expr1。否則返回 expr2。」，這一段我們直接看程式碼

1
2
3
var a = 0; // false
var b = 1; // true
console.log(a && b); // 0

你可以發現只要第一個 expr1 可以被轉換為布林值 false，因此他就直接回傳 expr1 的值，那如果反轉呢？

1
2
3
var a = 0; // false
var b = 1; // true
console.log(b && a); // 0

你會發現還是回傳 0 這就是驗證了「如果 expr1 可以轉換為 false，就返回 expr1。否則返回 expr2。」

基本上 And 運算子是以第一個值是否為真值為主，假使若為真值，那就一定會回傳第二個值，若第一個值是假值，那他就會回傳第一個值

1
2
3
4
5
6
7
console.log(1 && 10); // 10
console.log(1 && 15); // 15
console.log(1 && 2); // 2

console.log(0 && 10); // 0
console.log(0 && 15); // 0
console.log(0 && 2); // 0

而 OR 運算子的部分也可以看一下 MDN 說明

如果 expr1 可以轉換為 true，就返回 expr1。否則返回 expr2。所以，當使用於布林值時，如果其中一個運算元為 true，|| 返回 true，如果兩個運算元都為 false，就返回 false。

因此只要第一個是真值，那就會回傳第一個值，否則就會回傳第二個值

1
2
console.log(1 || 0); // 1
console.log(0 || 1); // 1

概念也與 && 有點雷同。

最後一個是比較常搞混的運算子，也就是否定運算子，通常我會把它稱之為反轉結果運算子，簡單來講他會將 true 轉換為 false，而 fasle 變成 ture，此外這個運算子也會直接回傳布林值

1
2
3
4
!true; // false
!false; // true
!1; // false
!0; // true

而這邊技巧可以使用在一些小地方，例如給予函式預設值，在早期 ES6 預設值還沒有實作時，往往我們函式如果沒有預設值，可能會發生錯誤，因此就可以這樣寫

1
2
3
4
5
function fn(name) {
  console.log('我是'+ name);
}

fn()

上面程式碼如果沒有使用 ES6 預設值時，就會出現「我是 undefined」，但實際上我們並不希望這樣，而是希望有一個預設值，那就可以使用上面所學的其中一個技巧 OR 運算子來改寫

1
2
3
4
5
6
function fn(name) {
  name = name || 'Ray';
  console.log('我是'+ name);
}

fn()

透過 OR 運算子技巧我們可以就可以解決出現 undefined 問題囉。

參考文獻

0%