---
# System prepended metadata

title: 筆記｜第二堂：邏輯判斷
tags: [學習筆記, JavaScript]

---

`#JavaScript` `#六角前端課程` `#學習筆記` `#骨力走傱`

## 前言
學完了基礎知識後，接著進入流程判斷的章節。透過比較運算子、邏輯運算子及判斷語法，可以讓電腦根據不同條件執行對應的動作，使程式能做出更靈活、更有價值的應用。

## 比較運算子
### 介紹

| 比較運算子 | 含義                                                                        |
| ---------- | --------------------------------------------------------------------------- |
| >          | 大於。當左方運算元大於右方，就回傳 `true`。                                 |
| <          | 小於。當左方運算元小於右方，就回傳 `true`。                                 |
| >=         | 大於等於。當左方運算元大於等於右方，就回傳 `true`。                         |
| <=         | 小於等於。當左方運算元小於等於右方，就回傳 `true`。                         |
| !=         | 不等於。當運算元不相等，就回傳 `true`。                                     |
| ==         | 等於。當運算元相等，就回傳 `true`。                                         |
| !==        | 嚴格不等於。當運算元型別相同，但值不相等，或是型別不相等時，就回傳 `true`。 | 
| ===        | 嚴謹等於。當運算元相等、型別也相同時，才會回傳 `true`。                       |
 

### 範例
```javascript=
console.log(3 > 1); // true
console.log(3 < 5); // true
console.log(3 >= 3); // true
console.log(5 >= 3); // true
console.log(8 <= 18); // true
console.log(1 != 10); // true
console.log(10 == 10); // true
console.log(10 !== "10"); // true
console.log(10 === 10); // true
```

### 搭配變數
```javascript=
let a = 10;
let b = 20;
console.log(a > b); // true

let c = "虱目魚";
let d = "海口味";
console.log(c != d); // true

let e = 1;
let f = "one";
console.log(e == f); // false
```

### = 、 == 、 === 三者差異
### 介紹

| 比較運算子 | 含義                                                              |
| ------ | ----------------------------------------------------------------- |
| =    | 賦值。將賦予左方運算元與右方相同的值。                            |
| ==   | 等於，又稱鬆散等於。當運算元的型別不同時，會自動轉型，再進行比較。|
| ===  | 嚴謹等於。當運算元相等、型別也相同時，才會回傳 `true`。             |

### 範例
```javascript=
let a = 10;
console.log(a); // 10

let b = 100;
let c = "100";
console.log(b == c); // true

let b = 100;
let c = "100";
console.log(b === c); // false
```

### 為何 `Number` 可以等於 `String` ？
```javascript=
let b = 100;
let c = "100";
console.log(b == c); // true
```
此時發生了自動轉型，讓 `100` 可以等於 `"100"`，這是 `==` 鬆散等於的特徵，若不希望程式碼出現預期外的結果，建議使用 `===` 嚴謹等於。

### 值的自動轉型與強制轉型
{%preview https://hackmd.io/eXmqLDTcQEKoH8luvVv6sQ %}

## 邏輯運算子
### 介紹

| 邏輯運算子 | 含義                                                                                                                                          |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| &&         | and。當運算式 1 為 `false` 時，回傳運算式 1 的**值**；為 `true` 時，則回傳運算式 2 的值。當**兩者皆**為 `true` 時，才會回傳 `true`，反之為 `false`。  |
| II         | or。當運算式 1 為 `true` 時，回傳運算式 1 的**值**；為 `false` 時，則回傳運算式 2 的值。當**其中一方**為 `true` 時，就會回傳 `true`，反之為 `false`。 |
| !          | not。當運算元可以被轉換為 `true` 時，則回傳 `false`，反之為 `true`。                                                                          | 

### 範例
```javascript=
console.log(0 && "sorry"); // 運算式 1 為 false，回傳運算式 1 的值：0
console.log(1 && "youth"); // 運算式 1 為 true，回傳運算式 2 的值：youth
console.log(true && true); // true

console.log(3 < 5 || 1 > 5); // true
console.log("fish" == "cat" || "dog" == "dog"); // true
console.log(1 === "1" || 8 === "8"); // false

console.log(!true); // false
console.log(!0); // true
console.log(!3 > 1); // false
```
* 在大部分的程式語言中：
    * `false` 會轉換為數字 **0**
    * `true` 會轉換為數字 **1**

### 短路求值
> 是一種邏輯運算符的求值策略。
> 只有當第一個運算數的值無法確定邏輯運算的結果時，才對第二個運算數進行求值。

#### 範例
```javascript=
console.log(0 && "sorry"); // 運算式 1 為 false，回傳運算式 1 的值：0
```
* 因短路求值的特性，`0` 已經確定了邏輯運算的結果，故不會對 `"sorry"` 求值。

#### 資料來源
* [短路求值](https://zh.wikipedia.org/zh-tw/%E7%9F%AD%E8%B7%AF%E6%B1%82%E5%80%BC)

## 三元運算子
```javascript=
let wallet = 100;
let dinner = wallet > 100 ? "拉麵" : "牛肉湯麵";

console.log(dinner); // 牛肉湯麵
```
* `條件式 ? 值1 : 值2;`
    * `條件式` 返回 `true` 或 `false`。
    * 當條件式為 `true` 時，執行 `值1` 。
    * 當條件式為 `false` 時，執行 `值2` 。

## 流程判斷
### `if` 條件式
```javascript=
let temperature = 26;

if (temperature > 20) {
    console.log("今天穿短袖。")
};

// 今天穿短袖。
```

* `()` 內表示要比較的條件。
* 若比較的結果為 `true` 就會執行 `{}` 內的程式；若為 `false` 則跳過 `{}` 內的程式，繼續往下執行。

### `else` 條件式
```javascript=
let temperature = 6;

if (temperature > 20) {
    console.log("今天穿短袖。")
} else {
    console.log("今天穿長袖。")
};

// 今天穿長袖。
```
* 若希望 `if` 的結果即使是 `false` 也能回傳訊息，或是執行其他行為的話，可以加入 `else` 告訴電腦，接下來執行 `else {}` 內的程式碼。

### `else if` 條件式
```javascript=
let temperature = 16;

if (temperature >= 20) {
    console.log("今天穿短袖。")
} else if (temperature <= 19 && temperature > 6) {
    console.log("今天穿短袖加外套。")
} else {
    console.log("今天穿長袖。")
};

// 今天穿短袖加外套。
```
* 當條件有多組時，可以在 `if` 與 `else` 之間加入多個 `else if` 設置多組條件。
* 同樣的在 `()` 內放入要比較的條件。