1.
8.常用標準API
• 學習目標
– 陣列的操作
– Set、Map與ArrayBuffer
– 物件與JSON的轉換
– 規則表示式
2

2.
Array.isArray()
• 判斷是否為原生的「真」陣列
3

3.
• 使用類別語法繼承Array，子類別實例會
被Array.isArray()判斷為true
4

4.
Array.of()
• 取代Array建構式
5

5.
• 不建議使用Array建構式指定元素來建立
陣列
6

6.
• 使用類別語法繼承Array，透過子類別的
of()方法建立之物件，也會是子類別型態
7

7.
Array.from()
• 接受類陣列或可迭代物件
8

8.
• 使用類別語法繼承Array，透過子類別的
from()方法建立之物件，會是子類別型態
9

9.
改變陣列
• sort()方法傳回值是原陣列，主要是為了
可以支援方法鏈連續操作風格
• reverse()方法是原地反轉陣列後傳回原
陣列
10

10.
• 如果要用某值填滿陣列
• 建立類陣列物件時
11

11.
實現堆疊
12

12.
13

13.
• Array沒有提供附加陣列的方法，不過可
以透過push()來實現
14

14.
實現佇列
15

15.
16

16.
• Array.prototype定義的方法，都具有通用
性，可以對普通的物件進行操作
• 操作結果會令指定的物件成為類陣列
17

17.
函數式風格API
• 若說JavaScript令函數式程式設計的概念，
得以在開發者間耳熟能詳也不為過
18

18.
• indexOf()、lastIndexOf()、
includes()在比對元素時，使用的是===
• 應該避免在陣列中存放NaN
19

19.
• 純函數式程式語言不提供迴圈語法
20

20.
• 在純函數式典範中，沒有變數的概念，也
不能改變物件或資料結構的狀態
21

21.
遞迴
• 思考邊界條件為何
• 一次做一件事
• 別管上層遞迴或下層遞迴的狀態
22

22.
• JavaScript支援一級函式，若有個重複性任
務，有對應的方法在不使用迴圈、不改變
物件狀態的情況下完成需求，該方法可以
說具有函數式設計的概念
23

23.
24

24.
• reduce()方法是從左而右迭代元素
• 如果需要從右而左迭代元素，可以使用
reduceRight()
25

25.
• reduce、reduceRight名稱本身很抽象，
建議封裝在擁有具體名稱的函式之中
26

26.
Set與WeakSet
• 若不想收集重複的值
27

27.
• Set本身是無序，不具備索引
28

28.
• SameValueZero演算，相等比較採用===，
然而0等於-0，NaN等於NaN
29

29.
• WeakSet只能加入物件
• 只要物件沒有其他名稱參考著，就會回收
物件
• 用來避免記憶體洩漏（Memory leak）
30

30.
Map與WeakMap
• 物件的鍵只能是字串（ES6以後可使用
Symbol）
31

31.
• Map的鍵可以使用基本型態、undefined、
NaN、null與物件
• Map對鍵的唯一性採用的是
SameValueZero演算
32

32.
33

33.
• 建構Map時，可以使用可迭代物件
• ES10新增了Object.fromEntries()
34

34.
• WeakMap只能使用物件作為鍵
• 只要物件沒有其他名稱參考，就會回收物件
• 避免記憶體洩漏
35

35.
36

36.
37

37.
ArrayBuffer
• 儲存二進位資料
• 要改變或取得ArrayBuffer內容，方式之
一是透過TypedArray包裹ArrayBuffer
38

38.
39

39.
• 在不同的TypedArray型態下，每個元素的
位元組長度不同
40

40.
• TypedArray是以元素為單位
41

41.
• 建構TypedArray型態的實例時，也可以使
用類陣列物件
• TypedArray對待ArrayBuffer是採整體
觀點，也就是對待各元素的觀點是一致的
42

42.
• 如果想對ArrayBuffer的各個區段採用不
同觀點
43

43.
JSON
• 是個資料格式，由於易讀、易寫、易於剖
析、可表現階層性資料
• 現今是各應用程式間常用的資料交換格式
• 參考JavaScript物件實字與陣列實字語法而
制定
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.
• www.json.org
• JSON主要有兩種結構
– 名稱／值成對的資料
– 有序的值清單
46

46.
• 名稱必須用""雙引號包括。
• 值可以是""雙引號包括的文字，或者是數字、
true、false、null、JavaScript陣列或
子JSON格式。
47

47.
• 在網路上傳輸JSON資料時，常會去除不必
要的空白、縮排等，以節省流量開銷
• 有序清單形式，也是合法的JSON格式
48

48.
• ES5內建JSON作為JSON API名稱空間
– JSON.stringify()
– JSON.parse()
49

49.
• JSON.stringify()會遞迴地走訪可列舉
特性進行JSON格式轉換，然而不包含符號
50

50.
51
• 指定特性轉換JSON字串

51.
• 若想考量JSON格式的可讀性
52

52.
• JSON.stringify()會使用toJSON()
53

53.
• 想將JSON字串剖析為JavaScript物件
54

54.
規則表示式
• 根據某字串切割
• 任意數字呢？
55

55.
• /regex/規則表示式實字（Regular
expression literal）
• 也可以用new來建立RegExp實例
• 別把規則表示式與字串搞混了
• 規則表示式是一套語言，在JavaScript中可
以使用字串來表示規則表示式
56

56.
簡介規則表示式
• 字面字元（Literals）
– 按照字面意義比對的字元
– 例如Orz
• 詮譯字元（Metacharacters）
– 不按照字面比對，在不同情境會有不同意義
– 例如[^Orz]
– 理解詮譯字元在不同情境中想詮譯的概念，對
於規則表示式的閱讀非常重要
57

57.
字元表示
• 字母和數字在規則表示式中，都是按照字
面意義比對
• 有些字元之前加上了之後，會被當作詮譯
字元
58

58.
59

59.
• 詮譯字元在規則表示式中有特殊意義，例
如! $ ^ * ( ) + = { } [ ] | : . ?等，若要比對
這些字元，必須加上轉譯符號
• 要比對!，則必須使用!，要比對$字元，則
必須使用$
60

60.
• 規則表示式為XY，那麼表示比對「X之後要
跟隨著Y」
• 如果想表示「X或Y」，可以使用X|Y
• 如果有多個字元要以「或」的方式表示，
例如「X或Y或Z」，可以使用字元類表示為
[XYZ]
61

61.
字元類
62

62.
預定義字元類
• 有些字元類很常用，例如[0-9]撰寫為d
更為方便
63

63.
貪婪量詞
• dddd-dddddd更簡單的寫法
是d{4}-d{6}
64

64.
• 貪婪量詞會儘可能地找出最長的符合文字
– 文字xfooxxxxxxfoo，若使用規則表示
式.*foo比對
– 比對器會先吃掉整個xfooxxxxxxfoo，在吐出
foo後符合了foo，而剩下的xfooxxxxxx符合.*
– 最後得到的符合字串就是整個xfooxxxxxxfoo
65

65.
逐步量詞
• 在貪婪量詞表示法後加上?
• 比對器看到逐步量詞時，會一邊吃掉剩餘
文字，一邊看看吃下的文字是否符合規則
表示式
• 逐步量詞會儘可能地找出長度最短的符合
文字
66

66.
• 文字xfooxxxxxxfoo若用規則表示式.*?foo比
對
– 比對器在吃掉xfoo後發現符合*?foo，接著繼
續吃掉xxxxxxfoo發現符合
– xfoo與xxxxxxfoo都符合規則表示式
67

67.
邊界比對
• 想依當中單字dog切出前後兩個子字串？
68

68.
69

69.
分組與參考
• 使用()為規則表示式分組
– 作為子規則表示式
– 搭配量詞使用
– 若有字串符合了規則表示式分組，字串會被捕
捉（Capture）
70

70.
回頭參考（Back reference）
• 分組計數((A)(B(C)))
1. ((A)(B(C)))
2. (A)
3. (B(C))
4. (C)
• 回頭參考分組時，是在後加上分組計數，
表示參考第幾個分組的比對結果
71

71.
• dd要求比對兩個數字
• (dd)1表示要輸入四個數字，輸入的前
兩個數字與後兩個數字必須相同
• 輸入1212會符合
• 輸入1234則不符合
72

72.
• ["'][^"']*["']比對單引號或雙引號中
0或多個字元，但沒有比對兩個都要是單引
號或雙引號
• (["'])[^"']*1則比對出前後引號必須
一致
73

73.
擴充標記
• (?…)
• 使用(?:…)來表示不捕捉分組
– 若只想比對郵件位址格式，不打算捕捉分組，
可以使用^[a-zA-Z]+d*@(?:[a-zA-Z0-
9]+.)+com
• 使用(?<name>…)來為分組命名，在同一
個規則表示式中使用k<name>取用分組
– (?<tens>dd)k<tens>
74

74.
• 如果想比對出的對象，之後必須跟隨或沒
有跟隨著特定文字，可以使用(?=…)或
(?!…)
– 分別稱為Lookahead與Negative lookahead
75

75.
• 如果想比對出的對象，前面必須有或沒有
著特定文字，可以使用(?<=…)或(?<!…)
– 分別稱為Lookbehind與Negative lookbehind
76

76.
search()、replace()
77

77.
• 黏性匹配的例子：
• 使用$n來捕捉被分組匹配的文字
78

78.
• 也可以改用函式：
• 指定命名時是使用$<name>的形式
79

79.
match()
80

80.
matchAll()
81

81.
使用RegExp
• 若必須動態地、依需求建立最後的規則表
示式，可以使用字串方式來組合
82

82.
• 可以在第二個參數處指定旗標
83

83.
操作RegExp方法
• 搜尋、測試字串中是否有符合規則表示式
的子字串
84

84.
• RegExp實例狀態是可變的（Mutable）
• 若規則表示式被設置了全域旗標，RegExp
實例的lastIndex就會有作用
85

85.
• RegExp有個exec()方法，用來比對字串，
如果有符合的字串，會傳回一個陣列
• 如果分組使用了(?:...)就不會捕捉，傳
回的陣列中也就不會有該分組的值
86

86.
87

87.
• 如果加上了全域旗標，每呼叫一次exec()，
傳回的陣列會是當次符合的結果，最後沒
有符合結果時傳回null
88

88.
89

89.
規則表示式協定
• String有split()、search()、
replace()、match()以及ES11以後新增
了matchAll()方法
• RegExp也有定義有這些方法，不過是以符
號Symbol.split、Symbol.search、
Symbol.replace、Symbol.match定義，
ES11後還多了個Symbol.matchAll
90

90.
91

91.
• 切割、搜尋等與規則表示式相關的職責，
集中在RegExp上了
• String的split()、search()等方法，
會將比對的工作委託給RegExp實例上對應
的協定
• 必要時可以繼承RegExp來重新定義相關的
方法，修正或增強String的split()、
search()等方法的功能
92

92.
93

93.
Unicode規則表示式
• 在規則表示式中，uhhhh是以四位數十六
進位數字指定「碼元」（而不是碼點）
• 如果字元在U+0000至U+FFFF以內，例如
「林」的碼點U+6797
• 規則表示式比對時可以使用u6797來指定
94

94.
• 有些字元超出了U+0000至U+FFFF以外
• JavaScript對Unicode規則表示式，從ES6
開始逐步支援，想運用的話，必須開啟u旗
標採用Unicode模式
95

95.
Unicode模式
• 若要在規則表示式使用u{…}，必須開啟u
旗標
• 在啟用Unicode模式的情況下，既有的
uhhhh寫法就是指定「碼點」
96

96.
• 啟用Unicode模式後，對於0xFFFF以外的
字元，才會進行正確的辨識，這會影響預
定義字元類、量詞等的判斷
• 未啟用Unicode模式前，預定義字元類S
表示非空白字元，然而，對0xFFFF以外的
字元會誤判
• 只有在加上u旗標的情況下才會正確比對；
• W、「.」也只有在啟用Unicode模式下，
才能正確比對0xFFFF以外的字元
97

97.
98

98.
Unicode特性轉譯
• ES9以後支援規則表示式的Unicode特性轉
譯（Unicode property escapes）
• 必須認識Unicode規範中的分類
（Category）、文字（Script）
99

99.
• 每個Unicode字元會隸屬於某個分類
– Letter、Uppercase Letter等一般分類
– 每個分類也給予了L、Lu等縮寫名稱。
• 隸屬於Letter分類的字元都是字母，a到z、
A到Z、全形的ａ到ｚ、Ａ到Ｚ都在Letter
分類中
• 其他如希臘字母α、β、γ等，也都隸屬於
Letter分類。
100

100.
• 開啟Unicode模式，可以使用
p{General_Category=Letter}、
p{gc=Letter}、p{Letter}、p{L}
等方式來指定分類
101

101.
102

102.
• Unicode將希臘文、漢字等組織為文字
（Script）特性
• 如果想在規則表示式中以文字特性比對，
可以使用p{Script=Greek}、
p{Script_Extensions=Greek}、
p{sc=Han}、p{scx=Han}的寫法
• （Han包含了正體中文、簡體中文，以及日、
韓、越南文的全部漢字）
103

103.
104

104.
• 二元特性
105