HyUI v4.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) --- 其實沒關係再一下下 --- 再一下下... --- 就換寶弟主講了 雖然也是JavaScript --- # 控制判斷 #### (運算子,if,switch) ###### tags: `HyUI4.0` --- ### 運算式 (Expression) ### 與運算子(Operator) --- JavaScript 的語法基本上可以分為兩大類 * 「敘述句/ 陳述式 (Statement)」 * 「運算式／表達式 (Expression)」 --- ### 敘述句 (Statement) 敘述句就是執行某個動作像是變數的宣告、賦值，迴圈和 if 判斷式等等都可以被歸類於此 ```javascript= var foo; ``` --- ### 運算式 (Expression) 會產生一個「值」像是我們在呼叫 function 時的參數，或者透過 = 賦值時在 = 「右側」的部分都屬於運算式 ```javascript= var a = 10 * 10; ``` 上例 = 右側的 10 * 10 就是運算式。 --- 在運算式中會透過提供一些數值給「運算子」(Operator) 進行運算 --- ### 運算子(Operator) --- 運算子的類型很多，依照性質來分類，大致上可以分成下面幾種 --- * 算術運算子 (Arithmetic Operator) * 指派運算子 (Assignment Operator) * 比較運算子 (Comparison Operator) * 邏輯運算子 (Logical Operator) * 字串運算子 (String Operator) * 特殊運算子 (Special Operator) * 條件（三元）運算子 note: 這次我們會挑幾種常用的跟大家介紹 --- ### 算術運算子算術運算子包括數學四則運算「加、減、乘、除」 --- ### 加號 (+) 如果加號 + 前後雙方都是「數字」的話 ```javascript= var a = 1 + 2; console.log(a); // 3 ``` --- 如果加號 + 前後為「數字」+「字串」的話 ```javascript= 100 + "100" // "100100" 100 + "ABC" // "100ABC" "ABC" + "XYZ" // "ABCXYZ" ``` 其中一方是字串，另一端會被「自動轉型」為字串後，連接在一起 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; ``` "10 加 100 的數字會是10100"  正解： 'var str = "10 加 100 的數字會是" + (num1 + num2);' --- ### 減號 (-) --- 單純的數字算式 ```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() 嘗試將數值轉為「數字」，再進行運算。 --- ## 乘號 (*) --- 乘法運算子由一個「星號」 * 來代表，用來計算前後兩個數值的乘積 ```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 為弱型別語言所以型別會自動轉型在做運算時要留意型別狀態 ~~(我們也比較少用到需要注意型別的問題)~~ --- ### 遞增 ++ 與遞減 - - --- 遞增與遞減就如同字面上意思當變數遇上了` ++ `就會加一，而 `-- `就會減一 --- 可以把他們當作是： 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 ); ``` true  --- 再看看其他例子 ```javascript false == 0 // true true == 1 // true [] == [] // false [] == ![] // true [] == '' // true [] == 0 // true [''] == '' // true [0] == 0 // true [0] == '' // false [''] == 0 // true ``` --- **JavaScript 自動轉型的規則** === 與 == 雖然都是比較的意思但最大的差別在於 「 === 不會替數值做自動轉型」  --- 盡量使用 === 來取代 == 不等於 != 與 !== 也是一樣的觀念 --- 數值的大於 > 與小於 <  ```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  --- 課程參考 * 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>