Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

3. 流程語法與函式

34 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

3. 流程語法與函式

  1. 1. 3.流程語法與函式 • 學習目標 – 使用除錯器 – 認識基本流程語法 – 運用一級函式特性 – 使用yield建立產生器 – 認識模版字串與標記模版 2
  2. 2. 使用Visual Studio Code 3
  3. 3. 4
  4. 4. 5
  5. 5. 6
  6. 6. 7
  7. 7. 8
  8. 8. if分支判斷 9
  9. 9. 10
  10. 10. 11
  11. 11. 變數與區塊 • 若在某個區塊中使用let或const宣告變數, 可視範圍限於區塊之中 • 在JavaScript中,還可以直接定義區塊 12
  12. 12. • 使用var宣告的變數,沒有區塊範圍的限制 • 這個特性在其他程式語言中並不常見,這 也是ES6以後不推薦使用var宣告變數的原 因之一 13
  13. 13. • let宣告的範圍限於區塊 • let宣告的變數存在著暫時死區 14
  14. 14. switch比對 • switch的case採用的是===嚴格比對 15
  15. 15. 16
  16. 16. • 千萬不要在case比對中使用NaN 17
  17. 17. for迴圈 18
  18. 18. • 若是從頭至尾循序走訪陣列或字串,ES6新 增了for..of語法可以使用 19
  19. 19. • 對於U+0000至U+FFFF範圍外的字元, for..of語法可以正確地取得「字元」而 不是碼元 20
  20. 20. • 想要列舉物件的特性名稱,可以使用 for..in語法 21
  21. 21. • 陣列也是一種物件,而索引不過是基於數 字的特性名稱 22
  22. 22. • for..in針對的是實例本身以及繼承而來 的可列舉特性 • 規範中並不包含列舉時特性的順序排列 23
  23. 23. • 想確認物件是否擁有某特性,可以使用in 運算子檢驗 • 只要實例本身擁有或是繼承而來的特性, in運算子就會傳回true 24
  24. 24. • 想知道物件「本身」是否擁有某特性(而 不是繼承而來的特性),可以使用 hasOwnProperty()方法 25
  25. 25. while迴圈 26
  26. 26. break、continue 27
  27. 27. 28
  28. 28. • 配合標籤使用 29
  29. 29. 30
  30. 30. 宣告函式 31
  31. 31. • JavaScript會自動用換行來作為陳述句結束 的依據 • 不過這是JavaScript中不好的特性 32
  32. 32. • {}的風格問題 33
  33. 33. • 遞迴(Recursion) 34
  34. 34. • 區域函式(Local function) 35
  35. 35. • 不直接支援函式重載 • 指定的引數個數少於參數個數,未被指定引 數的參數會被設為undefined 36
  36. 36. • ES6以後可以使用預設引數 • ES6新支援物件實字寫法 37
  37. 37. • 參數的預設值,每次都會重新運算 38
  38. 38. • ES6之前的版本會使用Falsy family結合||捷 徑運算 39
  39. 39. • ES6可以在函式的參數名稱前加上「…」, 表示該參數接受不定長度引數 40
  40. 40. • 在ES6之前,若想實作出不定長度引數的效 果,必須借助arguments • 是類陣列實例,存放著呼叫函式時的「全 部」引數,索引順序就是引數的指定順序 41
  41. 41. 選項物件 42
  42. 42. 一級函式的運用 • 每個函式都是個物件,是Function的實例 • 對函式物件使用typeof,會傳回 'function' 43
  43. 43. • 函式跟基本型態、物件、陣列等一樣,都 被JavaScript視為一級公民來對待 • 可以自由地在變數、函式呼叫時指定,因 此具有這樣特性的函式,也被稱一級函式 (First-class function) • 將某個可重用流程進行傳遞 44
  44. 44. filter()函式 45
  45. 45. 46
  46. 46. 47
  47. 47. map()函式 48
  48. 48. 49
  49. 49. 陣列filter()、map() 50
  50. 50. 陣列sort() 51
  51. 51. • 函式是Function的實例,也因此具有一些 特性與方法 • name在ES6以前已經被廣泛實作,只不過 在ES6中才標準化 52
  52. 52. 函式實字 53
  53. 53. • 函式宣告與函式實字不同的地方 54
  54. 54. • 函式實字是可以附加名稱的 • 立即呼叫運算式(Immediately Invoked Functions Expression, IIFE) 55
  55. 55. 匿名函式 56
  56. 56. 箭號函式 57
  57. 57. Closure • 函式與作用域環境(Lexical environment) 的組合 • 自由變數(Free variable) 58
  58. 58. • 函式會捕捉的是變數,不是變數值 59
  59. 59. • 想要捕捉每次的i變數值,而不是變數本身 60
  60. 60. • 使用ES6的let 61
  61. 61. 產生器函式 • 函式並不會因為yield而結束,只是將流 程控制權讓給函式的呼叫者 62
  62. 62. • 產生器函式會傳回產生器物件,此物件具 有next()方法 63
  63. 63. 生產者與消費者 64
  64. 64. 65
  65. 65. • 具有yield的函式,還是可以使用return 66
  66. 66. 67
  67. 67. • 資料來源是直接從另一個產生器取得 68
  68. 68. • 使用yield*改寫 69
  69. 69. 模版字串 70
  70. 70. 71
  71. 71. 72
  72. 72. 標記模版 • 特殊形式的函式呼叫 • 底下的程式碼執行效果,相當於f('10 + 20 = 30') 73
  73. 73. • f`${a} + ${b} = ${a + b}` – 等同於呼叫f(['', ' + ', ' = ', ''], 10, 20, 30) 74
  74. 74. • String.raw函式是其中一個例子 75
  75. 75. 76

×