Successfully reported this slideshow.
Your SlideShare is downloading. ×

8. 常用標準API

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 105 Ad
Advertisement

More Related Content

Slideshows for you (16)

Advertisement

Recently uploaded (20)

8. 常用標準API

  1. 1. 8.常用標準API • 學習目標 – 陣列的操作 – Set、Map與ArrayBuffer – 物件與JSON的轉換 – 規則表示式 2
  2. 2. Array.isArray() • 判斷是否為原生的「真」陣列 3
  3. 3. • 使用類別語法繼承Array,子類別實例會 被Array.isArray()判斷為true 4
  4. 4. Array.of() • 取代Array建構式 5
  5. 5. • 不建議使用Array建構式指定元素來建立 陣列 6
  6. 6. • 使用類別語法繼承Array,透過子類別的 of()方法建立之物件,也會是子類別型態 7
  7. 7. Array.from() • 接受類陣列或可迭代物件 8
  8. 8. • 使用類別語法繼承Array,透過子類別的 from()方法建立之物件,會是子類別型態 9
  9. 9. 改變陣列 • sort()方法傳回值是原陣列,主要是為了 可以支援方法鏈連續操作風格 • reverse()方法是原地反轉陣列後傳回原 陣列 10
  10. 10. • 如果要用某值填滿陣列 • 建立類陣列物件時 11
  11. 11. 實現堆疊 12
  12. 12. 13
  13. 13. • Array沒有提供附加陣列的方法,不過可 以透過push()來實現 14
  14. 14. 實現佇列 15
  15. 15. 16
  16. 16. • Array.prototype定義的方法,都具有通用 性,可以對普通的物件進行操作 • 操作結果會令指定的物件成為類陣列 17
  17. 17. 函數式風格API • 若說JavaScript令函數式程式設計的概念, 得以在開發者間耳熟能詳也不為過 18
  18. 18. • indexOf()、lastIndexOf()、 includes()在比對元素時,使用的是=== • 應該避免在陣列中存放NaN 19
  19. 19. • 純函數式程式語言不提供迴圈語法 20
  20. 20. • 在純函數式典範中,沒有變數的概念,也 不能改變物件或資料結構的狀態 21
  21. 21. 遞迴 • 思考邊界條件為何 • 一次做一件事 • 別管上層遞迴或下層遞迴的狀態 22
  22. 22. • JavaScript支援一級函式,若有個重複性任 務,有對應的方法在不使用迴圈、不改變 物件狀態的情況下完成需求,該方法可以 說具有函數式設計的概念 23
  23. 23. 24
  24. 24. • reduce()方法是從左而右迭代元素 • 如果需要從右而左迭代元素,可以使用 reduceRight() 25
  25. 25. • reduce、reduceRight名稱本身很抽象, 建議封裝在擁有具體名稱的函式之中 26
  26. 26. Set與WeakSet • 若不想收集重複的值 27
  27. 27. • Set本身是無序,不具備索引 28
  28. 28. • SameValueZero演算,相等比較採用===, 然而0等於-0,NaN等於NaN 29
  29. 29. • WeakSet只能加入物件 • 只要物件沒有其他名稱參考著,就會回收 物件 • 用來避免記憶體洩漏(Memory leak) 30
  30. 30. Map與WeakMap • 物件的鍵只能是字串(ES6以後可使用 Symbol) 31
  31. 31. • Map的鍵可以使用基本型態、undefined、 NaN、null與物件 • Map對鍵的唯一性採用的是 SameValueZero演算 32
  32. 32. 33
  33. 33. • 建構Map時,可以使用可迭代物件 • ES10新增了Object.fromEntries() 34
  34. 34. • WeakMap只能使用物件作為鍵 • 只要物件沒有其他名稱參考,就會回收物件 • 避免記憶體洩漏 35
  35. 35. 36
  36. 36. 37
  37. 37. ArrayBuffer • 儲存二進位資料 • 要改變或取得ArrayBuffer內容,方式之 一是透過TypedArray包裹ArrayBuffer 38
  38. 38. 39
  39. 39. • 在不同的TypedArray型態下,每個元素的 位元組長度不同 40
  40. 40. • TypedArray是以元素為單位 41
  41. 41. • 建構TypedArray型態的實例時,也可以使 用類陣列物件 • TypedArray對待ArrayBuffer是採整體 觀點,也就是對待各元素的觀點是一致的 42
  42. 42. • 如果想對ArrayBuffer的各個區段採用不 同觀點 43
  43. 43. JSON • 是個資料格式,由於易讀、易寫、易於剖 析、可表現階層性資料 • 現今是各應用程式間常用的資料交換格式 • 參考JavaScript物件實字與陣列實字語法而 制定 44
  44. 44. • 全名JavaScript Object Notation • Douglas Crockford在2000年初設計 • 2013年在ECMA-404與RFC 7158標準化 – ECMA-404主要是規範語法 – RFC涵蓋了一些安全與資料交換上的考量 • 2017年發佈了JSON新版規範ECMA-404第 二版與RFC 8259 – 最大的差異是規範非封閉系統間交換資料時, 必須使用UTF-8 45
  45. 45. • www.json.org • JSON主要有兩種結構 – 名稱/值成對的資料 – 有序的值清單 46
  46. 46. • 名稱必須用""雙引號包括。 • 值可以是""雙引號包括的文字,或者是數字、 true、false、null、JavaScript陣列或 子JSON格式。 47
  47. 47. • 在網路上傳輸JSON資料時,常會去除不必 要的空白、縮排等,以節省流量開銷 • 有序清單形式,也是合法的JSON格式 48
  48. 48. • ES5內建JSON作為JSON API名稱空間 – JSON.stringify() – JSON.parse() 49
  49. 49. • JSON.stringify()會遞迴地走訪可列舉 特性進行JSON格式轉換,然而不包含符號 50
  50. 50. 51 • 指定特性轉換JSON字串
  51. 51. • 若想考量JSON格式的可讀性 52
  52. 52. • JSON.stringify()會使用toJSON() 53
  53. 53. • 想將JSON字串剖析為JavaScript物件 54
  54. 54. 規則表示式 • 根據某字串切割 • 任意數字呢? 55
  55. 55. • /regex/規則表示式實字(Regular expression literal) • 也可以用new來建立RegExp實例 • 別把規則表示式與字串搞混了 • 規則表示式是一套語言,在JavaScript中可 以使用字串來表示規則表示式 56
  56. 56. 簡介規則表示式 • 字面字元(Literals) – 按照字面意義比對的字元 – 例如Orz • 詮譯字元(Metacharacters) – 不按照字面比對,在不同情境會有不同意義 – 例如[^Orz] – 理解詮譯字元在不同情境中想詮譯的概念,對 於規則表示式的閱讀非常重要 57
  57. 57. 字元表示 • 字母和數字在規則表示式中,都是按照字 面意義比對 • 有些字元之前加上了之後,會被當作詮譯 字元 58
  58. 58. 59
  59. 59. • 詮譯字元在規則表示式中有特殊意義,例 如! $ ^ * ( ) + = { } [ ] | : . ?等,若要比對 這些字元,必須加上轉譯符號 • 要比對!,則必須使用!,要比對$字元,則 必須使用$ 60
  60. 60. • 規則表示式為XY,那麼表示比對「X之後要 跟隨著Y」 • 如果想表示「X或Y」,可以使用X|Y • 如果有多個字元要以「或」的方式表示, 例如「X或Y或Z」,可以使用字元類表示為 [XYZ] 61
  61. 61. 字元類 62
  62. 62. 預定義字元類 • 有些字元類很常用,例如[0-9]撰寫為d 更為方便 63
  63. 63. 貪婪量詞 • dddd-dddddd更簡單的寫法 是d{4}-d{6} 64
  64. 64. • 貪婪量詞會儘可能地找出最長的符合文字 – 文字xfooxxxxxxfoo,若使用規則表示 式.*foo比對 – 比對器會先吃掉整個xfooxxxxxxfoo,在吐出 foo後符合了foo,而剩下的xfooxxxxxx符合.* – 最後得到的符合字串就是整個xfooxxxxxxfoo 65
  65. 65. 逐步量詞 • 在貪婪量詞表示法後加上? • 比對器看到逐步量詞時,會一邊吃掉剩餘 文字,一邊看看吃下的文字是否符合規則 表示式 • 逐步量詞會儘可能地找出長度最短的符合 文字 66
  66. 66. • 文字xfooxxxxxxfoo若用規則表示式.*?foo比 對 – 比對器在吃掉xfoo後發現符合*?foo,接著繼 續吃掉xxxxxxfoo發現符合 – xfoo與xxxxxxfoo都符合規則表示式 67
  67. 67. 邊界比對 • 想依當中單字dog切出前後兩個子字串? 68
  68. 68. 69
  69. 69. 分組與參考 • 使用()為規則表示式分組 – 作為子規則表示式 – 搭配量詞使用 – 若有字串符合了規則表示式分組,字串會被捕 捉(Capture) 70
  70. 70. 回頭參考(Back reference) • 分組計數((A)(B(C))) 1. ((A)(B(C))) 2. (A) 3. (B(C)) 4. (C) • 回頭參考分組時,是在後加上分組計數, 表示參考第幾個分組的比對結果 71
  71. 71. • dd要求比對兩個數字 • (dd)1表示要輸入四個數字,輸入的前 兩個數字與後兩個數字必須相同 • 輸入1212會符合 • 輸入1234則不符合 72
  72. 72. • ["'][^"']*["']比對單引號或雙引號中 0或多個字元,但沒有比對兩個都要是單引 號或雙引號 • (["'])[^"']*1則比對出前後引號必須 一致 73
  73. 73. 擴充標記 • (?…) • 使用(?:…)來表示不捕捉分組 – 若只想比對郵件位址格式,不打算捕捉分組, 可以使用^[a-zA-Z]+d*@(?:[a-zA-Z0- 9]+.)+com • 使用(?<name>…)來為分組命名,在同一 個規則表示式中使用k<name>取用分組 – (?<tens>dd)k<tens> 74
  74. 74. • 如果想比對出的對象,之後必須跟隨或沒 有跟隨著特定文字,可以使用(?=…)或 (?!…) – 分別稱為Lookahead與Negative lookahead 75
  75. 75. • 如果想比對出的對象,前面必須有或沒有 著特定文字,可以使用(?<=…)或(?<!…) – 分別稱為Lookbehind與Negative lookbehind 76
  76. 76. search()、replace() 77
  77. 77. • 黏性匹配的例子: • 使用$n來捕捉被分組匹配的文字 78
  78. 78. • 也可以改用函式: • 指定命名時是使用$<name>的形式 79
  79. 79. match() 80
  80. 80. matchAll() 81
  81. 81. 使用RegExp • 若必須動態地、依需求建立最後的規則表 示式,可以使用字串方式來組合 82
  82. 82. • 可以在第二個參數處指定旗標 83
  83. 83. 操作RegExp方法 • 搜尋、測試字串中是否有符合規則表示式 的子字串 84
  84. 84. • RegExp實例狀態是可變的(Mutable) • 若規則表示式被設置了全域旗標,RegExp 實例的lastIndex就會有作用 85
  85. 85. • RegExp有個exec()方法,用來比對字串, 如果有符合的字串,會傳回一個陣列 • 如果分組使用了(?:...)就不會捕捉,傳 回的陣列中也就不會有該分組的值 86
  86. 86. 87
  87. 87. • 如果加上了全域旗標,每呼叫一次exec(), 傳回的陣列會是當次符合的結果,最後沒 有符合結果時傳回null 88
  88. 88. 89
  89. 89. 規則表示式協定 • String有split()、search()、 replace()、match()以及ES11以後新增 了matchAll()方法 • RegExp也有定義有這些方法,不過是以符 號Symbol.split、Symbol.search、 Symbol.replace、Symbol.match定義, ES11後還多了個Symbol.matchAll 90
  90. 90. 91
  91. 91. • 切割、搜尋等與規則表示式相關的職責, 集中在RegExp上了 • String的split()、search()等方法, 會將比對的工作委託給RegExp實例上對應 的協定 • 必要時可以繼承RegExp來重新定義相關的 方法,修正或增強String的split()、 search()等方法的功能 92
  92. 92. 93
  93. 93. Unicode規則表示式 • 在規則表示式中,uhhhh是以四位數十六 進位數字指定「碼元」(而不是碼點) • 如果字元在U+0000至U+FFFF以內,例如 「林」的碼點U+6797 • 規則表示式比對時可以使用u6797來指定 94
  94. 94. • 有些字元超出了U+0000至U+FFFF以外 • JavaScript對Unicode規則表示式,從ES6 開始逐步支援,想運用的話,必須開啟u旗 標採用Unicode模式 95
  95. 95. Unicode模式 • 若要在規則表示式使用u{…},必須開啟u 旗標 • 在啟用Unicode模式的情況下,既有的 uhhhh寫法就是指定「碼點」 96
  96. 96. • 啟用Unicode模式後,對於0xFFFF以外的 字元,才會進行正確的辨識,這會影響預 定義字元類、量詞等的判斷 • 未啟用Unicode模式前,預定義字元類S 表示非空白字元,然而,對0xFFFF以外的 字元會誤判 • 只有在加上u旗標的情況下才會正確比對; • W、「.」也只有在啟用Unicode模式下, 才能正確比對0xFFFF以外的字元 97
  97. 97. 98
  98. 98. Unicode特性轉譯 • ES9以後支援規則表示式的Unicode特性轉 譯(Unicode property escapes) • 必須認識Unicode規範中的分類 (Category)、文字(Script) 99
  99. 99. • 每個Unicode字元會隸屬於某個分類 – Letter、Uppercase Letter等一般分類 – 每個分類也給予了L、Lu等縮寫名稱。 • 隸屬於Letter分類的字元都是字母,a到z、 A到Z、全形的a到z、A到Z都在Letter 分類中 • 其他如希臘字母α、β、γ等,也都隸屬於 Letter分類。 100
  100. 100. • 開啟Unicode模式,可以使用 p{General_Category=Letter}、 p{gc=Letter}、p{Letter}、p{L} 等方式來指定分類 101
  101. 101. 102
  102. 102. • Unicode將希臘文、漢字等組織為文字 (Script)特性 • 如果想在規則表示式中以文字特性比對, 可以使用p{Script=Greek}、 p{Script_Extensions=Greek}、 p{sc=Han}、p{scx=Han}的寫法 • (Han包含了正體中文、簡體中文,以及日、 韓、越南文的全部漢字) 103
  103. 103. 104
  104. 104. • 二元特性 105

×