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.

8. 常用標準API

43 views

Published on

陣列的操作
Set、Map與ArrayBuffer
物件與JSON的轉換
規則表示式

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×