3. 流程語法與函式

3.流程語法與函式
• 學習目標
– 使用除錯器
– 認識基本流程語法
– 運用一級函式特性
– 使用yield建立產生器
– 認識模版字串與標記模版
2

變數與區塊
• 若在某個區塊中使用let或const宣告變數，
可視範圍限於區塊之中
• 在JavaScript中，還可以直接定義區塊
12

• 使用var宣告的變數，沒有區塊範圍的限制
• 這個特性在其他程式語言中並不常見，這
也是ES6以後不推薦使用var宣告變數的原
因之一
13

• let宣告的範圍限於區塊
• let宣告的變數存在著暫時死區
14

switch比對
• switch的case採用的是===嚴格比對
15

• 千萬不要在case比對中使用NaN
17

• 若是從頭至尾循序走訪陣列或字串，ES6新
增了for..of語法可以使用
19

• 對於U+0000至U+FFFF範圍外的字元，
for..of語法可以正確地取得「字元」而
不是碼元
20

• 想要列舉物件的特性名稱，可以使用
for..in語法
21

• 陣列也是一種物件，而索引不過是基於數
字的特性名稱
22

• for..in針對的是實例本身以及繼承而來
的可列舉特性
• 規範中並不包含列舉時特性的順序排列
23

• 想確認物件是否擁有某特性，可以使用in
運算子檢驗
• 只要實例本身擁有或是繼承而來的特性，
in運算子就會傳回true
24

• 想知道物件「本身」是否擁有某特性（而
不是繼承而來的特性），可以使用
hasOwnProperty()方法
25

• JavaScript會自動用換行來作為陳述句結束
的依據
• 不過這是JavaScript中不好的特性
32

• 區域函式（Local function）
35

• 不直接支援函式重載
• 指定的引數個數少於參數個數，未被指定引
數的參數會被設為undefined
36

• ES6以後可以使用預設引數
• ES6新支援物件實字寫法
37

• 參數的預設值，每次都會重新運算
38

• ES6之前的版本會使用Falsy family結合||捷
徑運算
39

• ES6可以在函式的參數名稱前加上「…」，
表示該參數接受不定長度引數
40

• 在ES6之前，若想實作出不定長度引數的效
果，必須借助arguments
• 是類陣列實例，存放著呼叫函式時的「全
部」引數，索引順序就是引數的指定順序
41

一級函式的運用
• 每個函式都是個物件，是Function的實例
• 對函式物件使用typeof，會傳回
'function'
43

• 函式跟基本型態、物件、陣列等一樣，都
被JavaScript視為一級公民來對待
• 可以自由地在變數、函式呼叫時指定，因
此具有這樣特性的函式，也被稱一級函式
（First-class function）
• 將某個可重用流程進行傳遞
44

• 函式是Function的實例，也因此具有一些
特性與方法
• name在ES6以前已經被廣泛實作，只不過
在ES6中才標準化
52

• 函式宣告與函式實字不同的地方
54

• 函式實字是可以附加名稱的
• 立即呼叫運算式（Immediately Invoked
Functions Expression, IIFE）
55

Closure
• 函式與作用域環境（Lexical environment）
的組合
• 自由變數（Free variable）
58

• 函式會捕捉的是變數，不是變數值
59

• 想要捕捉每次的i變數值，而不是變數本身
60

產生器函式
• 函式並不會因為yield而結束，只是將流
程控制權讓給函式的呼叫者
62

• 產生器函式會傳回產生器物件，此物件具
有next()方法
63

• 具有yield的函式，還是可以使用return
66

• 資料來源是直接從另一個產生器取得
68

標記模版
• 特殊形式的函式呼叫
• 底下的程式碼執行效果，相當於f('10 +
20 = 30')
73

• f`${a} + ${b} = ${a + b}`
– 等同於呼叫f(['', ' + ', ' = ', ''],
10, 20, 30)
74

• String.raw函式是其中一個例子
75

Recommended