深入理解ES6筆記（七）Set集合和Map集合

主要知識點：Set的基本操作，Weak Set，Map的基本操作，Weak Map

《深入理解ES6》筆記 目錄

ES6 的 Set

ES6 提供了新的數據結構 Set。它類似於數組，但是成員的值都是唯一的，沒有重複的值。

Set 本身是一個構造函數，用來生成 Set 數據結構。

創建 Set 並添加項目

let set = new Set();
set.add(5);
set.add("5");
console.log(set.size); // 2

可以使用數組來初始化一個 Set ，並且 Set 構造器會確保不重複地使用這些值:

let set = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log(set.size); // 5

使用 has() 方法來測試某個值是否存在於 Set 中:

let set = new Set();
set.add(5);
set.add("5");
console.log(set.has(5)); // true
console.log(set.has(6)); // false

移除值

使用 delete() 方法來移除單個值，或調用 clear() 方法來將所有值從 Set 中移除。

let set = new Set();
set.add(5);
set.add("5");
console.log(set.has(5)); // true
set.delete(5);
console.log(set.has(5)); // false
console.log(set.size); // 1
set.clear();
console.log(set.has("5")); // false
console.log(set.size); // 0

Set 上的 forEach() 方法

forEach() 方法會被傳遞一個回調函數，該回調接受三個參數：

1. 元素值；
2. 元素索引；
3. 目標 Set 自身。
   Set 中的每一項鍵與值是相等的

let set = new Set([1, 2]);
set.forEach(function(value, key, ownerSet) {
    console.log(key + " " + value);
    console.log(ownerSet === set);
});
// 輸出
1 1
true
2 2
true

將 Set 轉換爲數組

let set = new Set([1, 2, 3, 3, 3, 4, 5]),
array = [...set];
console.log(array); // [1,2,3,4,5]

可以用此方法進行數組去重：

function eliminateDuplicates(items) {
    return [...new Set(items)];
}
let numbers = [1, 2, 3, 3, 3, 4, 5],
noDuplicates = eliminateDuplicates(numbers);
console.log(noDuplicates); // [1,2,3,4,5]

Weak Set

Set的引用類型：對象存儲在 Set 的一個實例中時，實際上相當於把對象存儲在變量中。只要對於 Set 實例的引用仍然存在，所存儲的對象就無法被垃圾回收機制回收，從而無法釋放內存。

let set = new Set(),
key = {};
set.add(key);
console.log(set.size); // 1
// 取消原始引用
key = null;
console.log(set.size); // 1
// 重新獲得原始引用
key = [...set][0];

當 JS 代碼在網頁中運行，同時你想保持與 DOM 元素的聯繫，在該元素可能被其他腳本移除的情況下，你應當不希望自己的代碼保留對該 DOM 元素的最後一個引用（這種情況被稱爲內存泄漏）。
Weak Set
該類型只允許存儲對象弱引用，而不能存儲基本類型的值。對象的弱引用在它自己成爲該對象的唯一引用時，不會阻止垃圾回收：
創建 Weak Set

let set = new WeakSet(),
key = {};
// 將對象加入 set
set.add(key);
console.log(set.has(key)); // true
set.delete(key);
console.log(set.has(key)); // false

和Set的區別：

• WeakSet 的成員只能是對象，而不能是其他類型的值。

const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

• WeakSet 中的對象都是弱引用，即垃圾回收機制不考慮 WeakSet 對該對象的引用，也就是說，如果其他對象都不再引用該對象，那麼垃圾回收機制會自動回收該對象所佔用的內存，不考慮該對象還存在於 WeakSet 之中。
• Weak Set 不可迭代，因此不能被用在 for-of 循環中；
• Weak Set 無法暴露出任何迭代器（例如 keys() 與 values() 方法），因此沒有任何編程手段可用於判斷 Weak Set 的內容；
• Weak Set 沒有 forEach() 方法；
• Weak Set 沒有 size 屬性。

ES6 的 Map

ES6 的 Map 類型是鍵值對的有序列表，而鍵和值都可以是任意類型。

• 基本用法：

let map = new Map();
map.set("title", "Understanding ES6");
map.set("year", 2016);
console.log(map.get("title")); // "Understanding ES6"
console.log(map.get("year")); // 2016

如果任意一個鍵不存在於 Map 中， 則 get() 方法就會返回特殊值 undefined

可以將對象作爲鍵，這些鍵不會被強制轉換成其他形式，每個對象就都被認爲是唯一的

let map = new Map(),
key1 = {},
key2 = {};
map.set(key1, 5);
map.set(key2, 42);
console.log(map.get(key1)); // 5
console.log(map.get(key2)); // 42

Map 的方法

• has(key) ：判斷指定的鍵是否存在於 Map 中；
• delete(key) ：移除 Map 中的鍵以及對應的值；
• clear() ：移除 Map 中所有的鍵與值。

屬性：size

let map = new Map();
map.set("name", "Nicholas");
map.set("age", 25);
console.log(map.size); // 2
console.log(map.has("name")); // true
console.log(map.get("name")); // "Nicholas"
console.log(map.has("age")); // true
console.log(map.get("age")); // 25
map.delete("name");
console.log(map.has("name")); // false
console.log(map.get("name")); // undefined
console.log(map.size); // 1
map.clear();
console.log(map.has("name")); // false
console.log(map.get("name")); // undefined
console.log(map.has("age")); // false
console.log(map.get("age")); // undefined
console.log(map.size); // 0

Map 的初始化

將數組傳遞給 Map 構造器，以便使用數據來初始化一個 Map 。該數組中的每一項也必須是數組，內部數組的首個項會作爲鍵，第二項則爲對應值：

let map = new Map([["name", "Nicholas"], ["age", 25]]);
console.log(map.has("name")); // true
console.log(map.get("name")); // "Nicholas"
console.log(map.has("age")); // true
console.log(map.get("age")); // 25
console.log(map.size); // 2

便歷方法

• forEach

let map = new Map([ ["name", "Nicholas"], ["age", 25]]);
map.forEach(function(value, key, ownerMap) {
    console.log(key + " " + value);
    console.log(ownerMap === map);
});
//打印：
name Nicholas
true
age 25
true