Successfully reported this slideshow.
Your SlideShare is downloading. ×

3. 流程語法與函式

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Worktest测试框架原理
Worktest测试框架原理
Loading in …3
×

Check these out next

1 of 76 Ad
Advertisement

More Related Content

Advertisement

Recently uploaded (20)

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

×