ES6 - 集合

---

---

ES6 引入了兩種新的資料結構：Map 和 Set。

• Map − 這種資料結構能夠將鍵對映到值。

• Set − Set 類似於陣列。但是，Set 不允許重複。

Map

Map 物件是一個簡單的鍵值對。Map 中的鍵和值可以是原始值或物件。

以下是它的語法。

new Map([iterable]) 

引數 iterable 代表任何其元素包含鍵值對的可迭代物件。Map 是有序的，即它們按照插入順序遍歷元素。

Map 屬性

瞭解基本的 Map 操作

set() 函式設定 Map 物件中鍵的值。set() 函式接受兩個引數，即鍵及其值。此函式返回 Map 物件。

has() 函式返回一個布林值，指示 Map 物件中是否存在指定的鍵。此函式接受一個鍵作為引數。

var map = new Map(); 
map.set('name','Tutorial Point'); 
map.get('name'); // Tutorial point

上面的例子建立了一個 map 物件。該 map 只有一個元素。元素鍵用name表示。該鍵對映到值Tutorial point。

注意 − Map 區分具有相似值但資料型別不同的值。換句話說，整數鍵 1 與字串鍵“1”被認為是不同的。請考慮以下示例以更好地理解此概念

var map = new Map(); 
map.set(1,true); 
console.log(map.has("1")); //false 
map.set("1",true); 
console.log(map.has("1")); //true

輸出

false 
true 

set() 方法也是可鏈式的。請考慮以下示例。

var roles = new Map(); 
roles.set('r1', 'User') 
.set('r2', 'Guest') 
.set('r3', 'Admin'); 
console.log(roles.has('r1'))

輸出

True 

上面的例子定義了一個 map 物件。該示例將 set() 函式連結起來以定義鍵值對。

get() 函式用於檢索與指定鍵對應的值。

Map 建構函式也可以傳入一個數組。此外，map 也支援使用擴充套件運算子來表示陣列。

示例

var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);  
console.log(roles.get('r2'))

上述程式碼成功執行後將顯示以下輸出。

Guest

注意 − 如果 map 中不存在指定的鍵，則 get() 函式返回 undefined。

如果鍵已存在於 map 中，則 set() 將替換該鍵的值。請考慮以下示例。

var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);  
console.log(`value of key r1 before set(): ${roles.get('r1')}`) 
roles.set('r1','superUser') 
console.log(`value of key r1 after set(): ${roles.get('r1')}`)

上述程式碼成功執行後將顯示以下輸出。

value of key r1 before set(): User 
value of key r1 after set(): superUser

Map 方法

for…of 迴圈

以下示例演示了使用 for…of 迴圈遍歷 map。

'use strict' 
var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);
for(let r of roles.entries()) 
console.log(`${r[0]}: ${r[1]}`);

上述程式碼成功執行後將顯示以下輸出。

r1: User 
r2: Guest 
r3: Admin

弱 Map

弱 Map 與 Map 相同，但以下例外：

• 其鍵必須是物件。

• 弱 Map 中的鍵可以被垃圾回收。垃圾回收是清除程式中未引用物件所佔用的記憶體的過程。

• 弱 Map 無法迭代或清除。

示例：弱 Map

'use strict' 
let weakMap = new WeakMap(); 
let obj = {}; 
console.log(weakMap.set(obj,"hello"));  
console.log(weakMap.has(obj));// true

上述程式碼成功執行後將顯示以下輸出。

WeakMap {} 
true

Set

Set 是 ES6 資料結構。它類似於陣列，區別在於它不能包含重複項。換句話說，它允許你儲存唯一的值。Set 支援原始值和物件引用。

與 Map 一樣，Set 也是有序的，即元素按其插入順序進行迭代。可以使用以下語法初始化 Set。

Set 屬性

Set 方法

弱 Set

弱 Set 只能包含物件，並且它們包含的物件可能會被垃圾回收。與弱 Map 一樣，弱 Set 無法迭代。

示例：使用弱 Set

'use strict' 
   let weakSet = new WeakSet();  
   let obj = {msg:"hello"}; 
   weakSet.add(obj); 
   console.log(weakSet.has(obj)); 
   weakSet.delete(obj); 
   console.log(weakSet.has(obj));

上述程式碼成功執行後將顯示以下輸出。

true 
false

迭代器

迭代器是一個物件，它允許一次訪問一個物件的集合。Set 和 Map 都有返回迭代器的方法。

迭代器是具有next() 方法的物件。當呼叫 next() 方法時，它返回一個具有'value' 和'done' 屬性的物件。'done' 是布林值，在讀取集合中的所有專案後將返回 true

示例 1：Set 和迭代器

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.entries(); 
console.log(iterator.next())

上述程式碼成功執行後將顯示以下輸出。

{ value: [ 'a', 'a' ], done: false } 

由於 Set 不儲存鍵值，因此值陣列包含相似的鍵和值。done 將為 false，因為還有更多元素需要讀取。

示例 2：Set 和迭代器

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.values(); 
console.log(iterator.next());

上述程式碼成功執行後將顯示以下輸出。

{ value: 'a', done: false }  

示例 3：Set 和迭代器

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.keys(); 
console.log(iterator.next()); 

上述程式碼成功執行後將顯示以下輸出。

{ value: 'a', done: false }  

示例 4：Map 和迭代器

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.entries(); 
console.log(iterator.next()); 

上述程式碼成功執行後將顯示以下輸出。

{ value: [ 1, 'one' ], done: false }  

示例 5：Map 和迭代器

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.values(); 
console.log(iterator.next());  

上述程式碼成功執行後將顯示以下輸出。

{value: "one", done: false} 

示例 6：Map 和迭代器

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.keys(); 
console.log(iterator.next());  

上述程式碼成功執行後將顯示以下輸出。

{value: 1, done: false}