---
# System prepended metadata

title: HyUI v4.0 教育訓練
tags: [HyUI4.0]

---

---
type: slide
---

# HyUI v4.0 教育訓練

## 12/14
#### 主講人 ｜ 寶弟 / 思晨

---

大家早 大家充足電力
要迎接接下來的知識了嗎？

---

還是其實是這樣
![](https://i.imgur.com/AOrURM7.jpg)


---

或是這樣
![](https://i.imgur.com/y0hK7KT.jpg)

---

或這樣
![](https://i.imgur.com/deY9UgA.jpg)

---

其實 沒關係
再一下下

---

再一下下...

---

就換寶弟主講了

<small>雖然也是JavaScript</small>

---

# 控制判斷
#### (運算子,if,switch)
###### tags: `HyUI4.0`

---

### 運算式 (Expression) 
### 與 運算子(Operator)

---

JavaScript 的語法基本上可以分為兩大類
* 「敘述句/ 陳述式 (Statement)」 
* 「運算式／表達式 (Expression)」


---

### 敘述句 (Statement)

敘述句就是執行某個動作 
像是變數的宣告、賦值，迴圈
和 if 判斷式等等
都可以被歸類於此
<br>

```javascript=
var foo;
```

---

### 運算式 (Expression)
會產生一個「值」
像是我們在呼叫 function 時的參數，
或者透過 = 賦值時 在 = 「右側」的部分
都屬於運算式
<br>
```javascript=
var a = 10 * 10;
```
<small> 上例 = 右側的 10 * 10 就是運算式。</small>

---


在運算式中 會透過提供一些數值給

「運算子」(Operator) 進行運算


---

### 運算子(Operator)

---

運算子的類型很多，依照性質來分類，
大致上可以分成下面幾種

---

* 算術運算子 (Arithmetic Operator)
* 指派運算子 (Assignment Operator)
* 比較運算子 (Comparison Operator)
* 邏輯運算子 (Logical Operator)
* 字串運算子 (String Operator)
* 特殊運算子 (Special Operator)
* 條件（三元）運算子

note:
這次我們會挑幾種常用的跟大家介紹

---

### 算術運算子

算術運算子包括 
數學四則運算「加、減、乘、除」

---

### 加號 (+)

如果加號 + 前後雙方都是「數字」的話 

<br>

```javascript=
var a = 1 + 2;
console.log(a);      // 3
```

---

如果加號 + 前後為「數字」+「字串」的話 

```javascript=
100 + "100"      // "100100"

100 + "ABC"      // "100ABC"

"ABC" + "XYZ"    // "ABCXYZ"
```
<br>

<small>
其中一方是字串，另一端會被
「自動轉型」為字串後，連接在一起
</small>

note:

當加號兩側的其中一方是字串的情況下，
加號會將兩者都視為「字串」連接在一起。
也就是說，其中一方是字串，另一端會被
「自動轉型」為字串後，連接在一起

---

「自動轉型」? 那如果其他型別相加呢？ 

---

字串與不同型別相加
```javascript=
10 + 'abc'          // "10abc"
true + 'abc'        // "trueabc"
100 + {}            // "100[object Object]"

// 當數字與 undefined 相加時，undefined 會被嘗試轉成數字，
// 也就是 NaN
123 + undefined     // NaN
"abc" + undefined   // "abcundefined"

// 當數字與 null 相加時，null 會被嘗試轉成數字，也就是 0
123 + null          // 123
"123" + null        // "123null"
```
note:

大家可以大概參考一下 不個我們最常見的可能會是數字加字串
大家在實作時 如果遇到奇怪之處 也可藉由type of
去查詢型別

當相加遇到“字串”時 number 、boolean 、 object 
轉型時會去呼叫它們的 .toString() 的 「原型方法」去取得對應的字串

而 null 與 undefined 則是透過 JavaScript 的 String() 
函數來將它們分別轉為 "null" 與 "undefined" 


---

### 「數字」與「字串」的混搭算式

---

```javascript=
var num1 = 10;
var num2 = 100;

var str = "10 加 100 的數字會是" + num1 + num2;
```
<span>    
 "10 加 100 的數字會是10100" <!-- .element: class="fragment" data-fragment-index="1" -->
</span>
<br/>
<br/>
<span>    
    <small>正解：</small><br/>
 'var str = "10 加 100 的數字會是" + (num1 + num2);'<!-- .element: class="fragment" data-fragment-index="2" -->
</span>


---

### 減號 (-)

---

單純的數字算式

```javascript=
var a = 10 - 3 ;
console.log(a);      // 7
```


---

那如果其他型別相減呢？ 

---

數字與不同型別相減
```javascript=
100 - "50"        // 50
100 - "abc"       // NaN

// false 經過 Number() 轉型成數字後，會變成 0
100 - false       // 100
// true 經過 Number() 轉型成數字後，會變成 1
100 - true        // 99

100 - undefined   // NaN
100 - null        // 100
```

note:
與加號 + 不同的是，當其中一方不是「數字」的情況下
基本型別 (如 string 、 boolean 、 undefined 與 null)
在做減法運算時，若其中一方屬於基本型別且不是數字的情況，那麼 JavaScript 會在先在背後透過 Number() 嘗試將數值轉為「數字」，再進行運算。

---

## 乘號 (*)

---

乘法運算子由一個「星號」 * 來代表，
用來計算前後兩個數值的乘積
<br/>
```javascript=
var a = 10 * 10 ;
console.log(a);      // 100
```

---

有其中一個不是數字的話，
那麼 JavaScript 就會先在背後以 
Nubmer( ) 作轉換後再進行計算

---


不同型別相乘
```javascript=
100 * "10"      // 1000
100 * abc       // NaN

100 * true      // 100
100 * false     // 0

100 * {}        // NaN
```


---

### 除號 (/)

---

除號在 JavaScript 用一個「斜線」/ 來表示

```javascript=
var a = 100 / 10 ;
console.log(a);      // 10
```

---

如果有其中一個不是數字的話，
那麼 JavaScript 也會在背後
以 Nubmer() 作轉換後再進行計算

---

### 算術運算子總結

由於 JavaScript 為弱型別語言 
所以 型別 會 自動轉型 
在做運算時 要留意型別狀態

<small>~~(我們也比較少用到需要注意型別的問題)~~</small>



---

### 遞增 ++ 與遞減 - -

---

遞增與遞減就如同字面上意思
當變數遇上了` ++ `就會加一
，而 `-- `就會減一

---

可以把他們當作是： a = a + 1 與 a = a - 1 的意思

```javascript=
var a = 10;

a++;
console.log(a);       // 11

a--;
console.log(a);       // 10
```

---

### 比較運算子 

(Comparison Operators)


---

比較兩側的數值後得到 true 或 false

---

「相等」 == 與 「全等」 ===

---

一個等號 = 的情況很單純，
是「指定、賦值」的意思

```javascript=
var a = 10;
```

---

「兩個」等號 == 是 左右兩側的資料進行比較

```javascript=
var a = 10;
var b = 100;

console.log( a == b );        // false
console.log( a == 10 );       // true
```

---

但是如果是兩個「資料型態」不同的比較呢？

``` 
 var a = 10;
 var b = "10";

 console.log( a == b ); 

```
<span>    
 true <!-- .element: class="fragment" data-fragment-index="3" -->
</span>

---

再看看其他例子

```javascript
false == 0    // true
true == 1     // true
[] == []      // false
[] == ![]     // true
[] == ''      // true
[] == 0       // true
[''] == ''    // true
[0] == 0      // true
[0] == ''     // false
[''] == 0     // true
```

---

**JavaScript 自動轉型的規則**
 
<span>  
  === 與 == <br/>
雖然都是比較的意思但最大的差別在於<br/>
「 === 不會替數值做自動轉型」 
    <!-- .element: class="fragment" data-fragment-index="1" -->
</span>

---

盡量使用 === 來取代 ==
不等於 != 與 !== 也是一樣的觀念

---

數值的大於 > 與 小於 <
<!-- <span style="font-size:0.75em;"> (大於 >、小於 <、大於等於 >=，以及小於等於 <= 符號) </span>  -->
    
    
```javascript=
var a = 10;
var b = 11;
var c = 10;

console.log( a > b );       // false
console.log( b > a );       // true

console.log( a > c );       // false
console.log( a >= c );      // true
```
 
note:
兩者都是數字，則單純就其字面大小比較。
如果其中一個是數字，而另一個不是，則會嘗試在背後將另一個先轉為數字後再比較。
如果兩者都是字串，則會依照字母的順序 (standard lexicographical ordering) 來進行比較。 大小寫字母 unicode 裡的順序是不一樣的。
如果其中一者是 boolean 的情況，則會把 true 看成 1， false 看成 0 再進行比較。
如果是物件的情況下，則是會先透過物件的 valueOf() 方法先求得對應的數值，若物件沒有 valueOf() 方法的話，則會透過 toString() 轉型再進行比較。

---

練習一下
[== 練習](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator)

[!== 練習](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator)


---

## 指派運算子/賦值運算子


---

將 右方的運算元 的值賦予其 左方的運算元
最簡單的 賦值運算子 是 等於 (=)


```javascript=
var a = 10 * 100;
```

---

常見的指派運算子
![](https://i.imgur.com/N1h6kHm.png)


---

### 邏輯運算子 (Logical Operator)

---

 AND &&、 OR || 還有 NOT ! 

---

**(條件/運算式A) && (條件/運算式B)**

當左右兩側的值同時為`true`時，則會得到`true` 
若其中一方是`false`的情況下，則得到`false` 

---


下面是 && (邏輯 AND) 運算子 的範例

```javascript=
var a1 =  true && true;     // t && t 回傳 true
var a2 =  true && false;    // t && f 回傳 false
var a3 = false && true;     // f && t 回傳 false
var a4 = false && (3 == 4); // f && f 回傳 false
var a5 = "Cat" && "Dog";    // t && t 回傳 Dog
var a6 = false && "Cat";    // f && t 回傳 false
var a7 = "Cat" && false;    // t && f 回傳 false
```
note:
對 && 運算子來說，若第一個數值轉換為 true
  則回傳第二個數值，否則回傳第一個數值


---

**(條件/運算式A) ｜｜ (條件/運算式B)**

當左右兩側的值只要有一方為`true`，結果為`true`
只有在兩側皆為`false`的情況下才會得到`false` 

---

下列是 || (邏輯 OR) 運算子的範例

```javascript=
var o1 =  true || true;     // t || t 回傳 true
var o2 = false || true;     // f || t 回傳 true
var o3 =  true || false;    // t || f 回傳 true
var o4 = false || (3 == 4); // f || f 回傳 false
var o5 = 'Cat' || 'Dog';    // t || t 回傳 Cat
var o6 = false || 'Cat';    // f || t 回傳 Cat
var o7 = 'Cat' || false;    // t || f 回傳 Cat

```
note:
對 || 運算子來說，若第一個數值轉換為 true
  則回傳第一個數值，否則回傳第二個數值


---

**NOT !**
 true 的結果經過 ! 轉換後會得到 false，
 而 false 會變成 true

---

下列是 ! (邏輯 NOT) 運算子的範例

```javascript=
var n1 = !true;  // !t 回傳 false
var n2 = !false; // !f 回傳 true
var n3 = !'Cat'; // !t 回傳 false
```

---

我們可以用 !!xxx 來取代 Boolean(xxx)
即可判斷某數值 Boolean 轉換後的結果   
![](https://i.imgur.com/MTsvrfu.png)


---

&& 與 || 運算子在判斷的時候，
會先對左邊的數值進行檢查

* 如果是 Boolean 類型
  就做後續的判斷
  
* 如果不是那就會透過 ToBoolean 
  來轉換成對應的 true 跟 false 
  
<!-- 
* 對 || 運算子來說，若第一個數值轉換為 true
  則回傳第一個數值，否則回傳第二個數值
  
* 對 && 運算子來說，若第一個數值轉換為 true
  則回傳第二個數值，否則回傳第一個數值
 -->


---


課程參考
* 4.1_ 比較運算子：== 、!==
* 4.2_ 比較運算子：== 、!==，程式碼範例
* 4.3_邏輯運算子： && 、!


---

來練習看看

[邏輯與運算符](https://www.freecodecamp.org/chinese-traditional/learn/javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator)

[邏輯與運算符2](https://www.freecodecamp.org/chinese-traditional/learn/javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator)

---


## 條件（三元）運算子

---

條件（三元）運算子 是 JavaScript 中
唯一需要三個運算元的運算子

```javascript=

條件 ? 值1 : 值2

```

---

範例如下

```javascript=

var status = (age >= 18) ? '成人' : '小孩';

//假如 age 大於 18 則 回傳'成人' 否則回傳 ‘小孩’

```


---

### 條件語法  if...else

---

「如果」怎樣怎樣，就做某件事

「否則」做另一件事

```javascript [1-4|5-10]
if ( 條件式 ){
  // 某條件成立會執行這個 { } 區塊中的內容
  // ...
}
else{
  // 否則執行 else 這個 { } 區塊中的內容
  // else 可以有也可以沒有
}
```

---

也可以使用 else if 來新增條件

```javascript [1-4|5-10|11-14]
if ( 條件式 ){
  // 某條件成立會執行這個 { } 區塊中的內容
  // ...
}
else if( 條件式2 ){
  // ...
}
else if( 條件式3 ){
  // ...
}
else{
  // 若上面所有條件判斷都是 false ，才會執行 
  // else 這個 { } 區塊中的內容

}
```


---

## 條件語法  switch


---

switch 寫法

```javascript [1|2-5|6-10|11-14|15-18]
switch (expression) {
  case value1:
        //當 expression 的值符合 value1
        //要執行的陳述句
    [break;]
  case value2:
        //當 expression 的值符合 value2
        //要執行的陳述句
    [break;]
  ...
  case valueN:
        //當 expression 的值符合 valueN
        //要執行的陳述句
    [break;]
  [default:
        //當 expression 的值都不符合上述條件
        //要執行的陳述句
    [break;]]
}

```
note:
switch 括號內的語法可能是運算式或是某個變數、值接著會進入 case 來判斷，
若括號內的結果剛好條件符合，則會執行 case 區塊內的指令。
而 default 的區塊就是當上面所有 case 都不成立的時候會執行。
需要注意的是，case 區塊並不像 if...else 用大括號 { } 來切分區塊的，
而是用 break 指令。所以如果沒有 break 程式碼會持續執行

---

範例運用

```javascript [1|2|3|6|7|8|9 ]
const expr = '木瓜';
switch (expr) {
  case '橘子':
    console.log('橘子一箱500');
    break;
  case '芒果':
  case '木瓜':
    console.log('芒果和木瓜一箱600');
    break;
  default:
    console.log(`Sorry,我們沒賣${expr}.`);
}

```

---

 老闆:芒果和木瓜一箱600

---

課程參考
* 4.4_ if - 簡報介紹
* 4.4.1_if - 程式碼教學
* 4.5_else if 簡報介紹
* 4.6_else if - 程式碼教學
* 4.7_switch - 簡報介紹
* 4.8_switch - 程式碼教學

---

練習一下

* [三元判斷式](https://www.freecodecamp.org/chinese-traditional/learn/javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator)
* [switch](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements)

* [if/else](https://www.freecodecamp.org/chinese-traditional/learn/javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements)

---

# 重點回顧

---

* 敘述句(陳述式) 就是執行某個動作 

* 運算式(表達式) 會產生一個「值」
* 運算式中 會透過提供一些數值給運算子
  進行運算
* 算術運算子 「加號 」其中一方是字串，另一端會被自動轉型為「字串」相連
* 減/乘/除 號 則會後透過 Number()將數值轉為「數字」，再進行運算
* ++ - - 遞增與遞減

---

* 相等 == 與全等 === 差別在於有沒有比較型別
  == 會自動幫你轉型別，比較不嚴謹

* 邏輯運算子在判斷的時候，會先對左邊的數值進行檢查

* 可以用 !!xxx 來將值轉成布林 

* 三元運算子寫法  條件 ? 值1 : 值2
* 條件語法介紹 if 和 switch
  if...else 用大括號 { } 來切分區塊  switch 的 case 則是用 break 指令來區分

---

# 參考資料

[運算式與運算子](https://ithelp.ithome.com.tw/articles/10191180)
[mdn運算式與運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90)
[mdn switch](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/switch)

<style>
/*     .reveal h1{
        font-size:2em;
    } */
    .reveal h1,.reveal h2 {
         color:#c9f2ff;
}
/*     .reveal{
        font-size:26px;
    } */
</style>
