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

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

3. 使用Visual Studio Code
3

4. 4

5. 5

6. 6

7. 7

8. 8

9. if分支判斷
9

10. 10

11. 11

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

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

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

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

16. 16

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

18. for迴圈
18

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

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

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

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

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

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

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

26. while迴圈
26

27. break、continue
27

28. 28

29. • 配合標籤使用
29

30. 30

31. 宣告函式
31

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

33. • {}的風格問題
33

34. • 遞迴（Recursion）
34

35. • 區域函式（Local function）
35

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

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

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

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

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

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

42. 選項物件
42

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

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

45. filter()函式
45

46. 46

47. 47

48. map()函式
48

49. 49

50. 陣列filter()、map()
50

51. 陣列sort()
51

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

53. 函式實字
53

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

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

56. 匿名函式
56

57. 箭號函式
57

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

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

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

61. • 使用ES6的let
61

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

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

64. 生產者與消費者
64

65. 65

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

67. 67

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

69. • 使用yield*改寫
69

70. 模版字串
70

71. 71

72. 72

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

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

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

76. 76