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%