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

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

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

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

### 範例

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

### 搭配變數

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`。 |

### 範例

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` ？

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`。 |

### 範例

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**

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

#### 範例

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)

## 三元運算子

let wallet = 100;
let dinner = wallet > 100 ? "拉麵" : "牛肉湯麵";

console.log(dinner); // 牛肉湯麵

* `條件式 ? 值1 : 值2;`
* `條件式` 返回 `true` 或 `false`。
* 當條件式為 `true` 時，執行 `值1` 。
* 當條件式為 `false` 時，執行 `值2` 。

## 流程判斷
### `if` 條件式

let temperature = 26;

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

// 今天穿短袖。

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

### `else` 條件式

let temperature = 6;

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

// 今天穿長袖。

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

### `else if` 條件式

let temperature = 16;

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

// 今天穿短袖加外套。

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