-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path5-3.html
126 lines (125 loc) · 5.58 KB
/
5-3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./public/favicon.ico" />
<meta http-equiv="cache-control" content="no-cache" />
<title></title>
<link rel="stylesheet" href=" https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="./hightlight/default.min.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/copybutton.css" />
<link rel="stylesheet" href="./css/hightlight.css" />
<script src="./hightlight/hightlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BEVZJDBC7Z"></script>
<script src="./js/gtag.js"></script>
</head>
<body>
<header>
<nav>
<h1>
<span id="toggle-menu"></span>
<a href="index.html"></a>
</h1>
</nav>
</header>
<main>
<aside>
<nav></nav>
</aside>
<article>
<h2>Chapter 5 運用 ECMAScript 集合</h2>
<h2>5-3 ES6 的集合</h2>
<p>
内建的 Set 集合是 ES6 中新的資料集合類型，可用於表示一群資料。在各種角度來看，Set 集合與 Map 映射類似。
<ul>
<li>Set 也是可迭代</li>
<li>Set 建構子也可接受個可迭代物件傳入</li>
<li>Set 也具有 Size 特性</li>
<li>Set 的值可為任意值或物件參考，就像是 Map 的鍵</li>
<li>Set 的值必須唯一，就像是 Map 的鍵</li>
<li>Set 的定義中，NaN 等於 NaN</li>
<li>具有 .keys 、 .values 、 .entries 、 .forEach 、 .has 、 .delete 、 .clear</li>
</ul>
</p>
<p>
同時，Set 集合與 Map 映射在一些項目上起有差異的。集合並沒有鍵/值配對；它是一維的。你可以將集合視為陣列，只是其中的每個資料項均不相同。
</p>
<p>
在 Set 集合中並沒有 .get 方法。
一個 Set.get(value) 這樣的方法是多餘的：因為它是一維的 (one-dimensional)，而你已經有 value 值且是唯一的。如果你想要確認 value 值是否在集合可以使用 set.has(value)
</p>
<p>
相同地， Set.set(value)這樣的方法也不必要，因為你並不會設定將一個 key 指向一個 value 值，而是只會將一個值加入至集合中。所以，將值加入至集合的方法為 set.add 如下面程式範例。
</p>
<pre><code class="language-js">
const set = new Set()
set.add({ an: 'example' })
</code></pre>
<p>
集合是可迭代的，但你只能迭代取得值，而不像是映射可迭代取得鍵/值配對。下方的範例說明，利用展開運算子可將集合展開為一個陣列,建立一個一維的資料串。
</p>
<pre><code class="language-js">
const set = new Set(['a','b','c'])
console.log([...set])
// ['a','b','c']
</code></pre>
<p>
而在下一個範例，你可以看到一個集合不會包含重複的資料項目：在 Set 中的每個資料項都必須是唯一的。
</p>
<pre><code class="language-js">
const set = new Set(['a','b','b','c','c'])
console.log([...set])
// ['a','b','c']
</code></pre>
<p>
以下的程式會建立一個 Set 集合，包含著一個頁面中所有的<div>，元件。並輸出所找到的元件總數。接著我們再次查詢 DOM ，再次對每一個 DOM 元件都呼叫 set.add 加入至集合。若元件已存在於 set
中, .size 特性就不會變更，也就表示 set 仍維持不變。
</p>
<pre><code class="language-js">
function allDiv(){
return document.querySelectorAll('div')
}
const set = new Set(allDiv())
console.log(set.size) // 56
allDiv().forEach(div=> set.add(div))
console.log(set.size) // 56
</code></pre>
<p>
因為 Set 並沒有鍵，Set#entries 方法對集合中的每一個資料項均會回傳一個 [value, value] 迭代器。
</p>
<pre><code class="language-js">
const set = new Set(['a','b','c'])
console.log([...set.entries()])
// [['a','a'],['b', 'b'],['c','c']]
</code></pre>
<p>
Set#entries 方法與 Map#entries 方法是一致的，它會回傳一個 [key,value] 配對的迭代器。建議不要預設使用 set#entries 作為 Set 集合的迭代器,因為若需要展開，可以在
for..of 和 Array.from 中進行。在這些情況下，你應該是想要取出集合中的值，而不是 [value,value] 這樣的配對序列。
</p>
<p>
如下所示，預設的 Set 迭代器使用 Set#values，相對於 Map，它以 Map#entries 作為預設的迭代器。
</p>
<pre><code class="language-js">
const map = new Map()
console.log(map[Symbol.iterator] === map.entries) // true
const set = new Set()
console.log(set[Symbol.iterator] === set.entries) // false
console.log(set[Symbol.iterator] === set.values) // true
</code></pre>
<p>
為了保持一致性，Set#keys 方法對每個值也都是回傳一個迭代器，而且事實上它是參考至 Set#values 的迭代器。
</p>
<pre><code class="language-js">
const set = new set()
console.log(set.keys === set.values) // true
</code></pre>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>