# 第二週課程重點筆記
###### tags: `JS 課程重點筆記` `2021` `JS直播班` `秋季班` `六角學院`

## :arrow_forward: 比較運算子

### 為什麼需要知道比較運算子？
電腦需要透過比較運算子來運算、回傳告知運算後的結果 true 或 false。

### 常見的比較運算子

| | 比較運算子符號 | 運算過程 |
| -------- |:------------:| ----------------------------------------|
| 大於 | > | |
| 小於 | < | |
| 大於等於 | >= | |
| 小於等於 | <= | |
| 一般等於 | == | 比較兩者的值，但不比較型別 |
| 嚴謹等於 | === | 先比較型別、再比較值（資料要判斷型別的時候使用，若型別不同，結果為false）也不允許自動轉型 |
| 不等於 | != | 比較兩者的值，但不比較型別 |
| 嚴謹不等於 | !== | 先比較型別、再比較值（不允許自動轉型） |

----
## :arrow_forward: 邏輯運算子
### 邏輯運算子的運算方式
主要透過布林值來進行判斷，再回傳 true 或 false 的結果。

| | 邏輯運算子符號 | 運算過程 |
| -------- | -------- | -------- |
| 且 (and) | && | 所有用 && 連接的所有條件都要滿足，結果才會是 true |
| 或 (or) | ｜｜ | 所有用 ｜｜ 連接的條件，只要有一個滿足，結果就是 true |
| 反轉(not)| ! | !true //回傳false、!false//回傳true

### truthy 與 falsy值

| | 對應的值 |
| -------- | -------- |
| **fasly 值**| null、undefined、NaN、數字 +0 -0、""(空字串) |
| **truthy 值**| 所有 falsy 以外的都是 truthy 值 (包括空陣列、空物件...)|

## :arrow_forward: :one: 邏輯運算子 &&

### 基礎題 (布林值的比較)

let hasGift = true && true// 結果為 true
hasGift = true && false// 結果為 false
hasGift = false && true// 結果為 false
hasGift = false && false// 結果為 false

### 進階題 (非布林值的比較)

console.log(0 && 1)//回傳值為 0 (0是falsy)
console.log(1 && null && undefined)// 回傳 null (第一個falsy)
console.log(1 && undefined && null)// 回傳 undefined (第一個falsy)
console.log(888 && "" && "hello"); // 回傳空字串 (第一個falsy)
console.log(1 && 2 && 3)//回傳值為 3 (因為都是truthy)

:::success
:bulb: **邏輯運算子** && **運算過程**

運算由左至右，回傳第一個是falsy的值，若皆為truthy，則回傳最後一個值。
:::

## :arrow_forward: :two: 邏輯運算子 ||

### 基礎題 (布林值的比較)

let hasGift = true || true// 結果為 true
hasGift = true || false// 結果為 true
hasGift = false || true// 結果為 true
hasGift = false || false// 結果為 false

### 進階題 (非布林值的比較)

console.log(0 || 1)//回傳值為 1 (1 是 truthy)
console.log(NaN || "ho! hey! hi!" || 666)// 回傳 "ho! hey! hi!" (字串是 第一個truthy)

console.log(888 || "hello" || "" ); // 回傳 888 (第一個truthy)
console.log(undefined || 666 || "hey")// 回傳 666 (第一個truthy)

console.log(NaN || null || 0)//回傳值為 0 (因為都是falsy)
console.log(1 || 2 || 3)//回傳值為 1 (第一個truthy)

:::success
:bulb: **邏輯運算子** || **運算過程**

運算由左至右，回傳第一個是truthy的值，若皆為falsy，則回傳最後一個值。
:::

## :arrow_forward: :three: 邏輯運算子 !

有「反轉」的意義

舉例：
let hasGift = true;
hasGift = !hasGift; // 重新賦予值變成 false

經常用於開關、toggle

---

## 試題演練時間

3 === "3" // false, 兩者型別不同
4 != "4" // false, 兩者值相等(不比較型別)
1=="1" && 1 !== "1" // true, == 會先轉換型別再比較值、!== 會先比較兩者型別
2 != "2" || 0 >= 0 // false || true, 是 true

---

## :arrow_forward: if 判斷式
### 寫程式的第一步：拆解任務
把中文轉換成程式，可以透過拆解任務、畫流程圖。

### if 判斷式的運算方式
- 首先，宣告一個變數並賦予值
- if 判斷式中，變數或運算式是放在 ( ) 內，假如值是 true，就會執行第一個 { } 內的指令，false 就不執行。
- else if 可以有很多個，運算式也在 ( ) 內，假如值是 true，就會執行對應的 { } 內的指令。
- if 判斷式中，可以沒有 else，判斷式也不會出錯。
- else 可放的是前面所有的 else if 都無法涵蓋到，最後判斷式跑完、跳出的情況。

---

## :arrow_forward: 流程圖
### 文字轉化爲程式邏輯的訣竅
- 把文字段落中，跟數字有關的內容取出來
- 特別注意和 if 相關的關鍵字：「如果」、「是否」、「假使」、「有沒有」...
- 想出 if 判斷式中的（）變數或運算式要如何列出

### 繪製流程圖
- 程式開始（用圓形）
- 定義預設值 (let score = 0;、let data = [ ]);
- 繪製流程圖過程中的其他步驟（方形）
- 是與否的判斷（菱形）
- 程式結束（圓形）

### 總結：情境拆解三步驟
1. 步驟一：定義程式目的
2. 步驟二：設定初始資料狀態
3. 步驟三：依照目的進行任務拆解