ECMAScript 6 學習筆記（九）：Set 和 Map

摘要： Set ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。Set 本身是一個建構函式，用來生成 Set 資料結構。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x =>...

Set

ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。Set 本身是一個建構函式，用來生成 Set 資料結構。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
console.log(i);
}
// 2 3 5 4

Set 函式可以接受一個具有 iterable 介面的其他資料結構作為引數，用來初始化。

const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

應用

1. 陣列去重

[...new Set(array)]

2. 字串去重

[...new Set('ababbc')].join('')

例項的屬性和方法

1. 屬性

Set.prototype.constructor
Set.prototype.size

2. 方法

add(value)
delete(value)
has(value)
clear()

遍歷操作

keys()
values()
entries()
forEach()

Set 的遍歷順序就是插入順序。

Map

JavaScript 的物件（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字串當作鍵。這給它的使用帶來了很大的限制。為了解決這個問題，ES6 提供了 Map 資料結構。它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

與Set 類似，任何具有 Iterator 介面、且每個成員都是一個雙元素的陣列的資料結構都可以當作Map建構函式的引數。

// 陣列
const map = new Map([
['name', '張三'],
['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "張三"
map.has('title') // true
map.get('title') // "Author"

注意，只有對同一個物件的引用，Map 結構才將其視為同一個鍵。這一點要非常小心。

const map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined

let a = ['a'];
map.set(a, 555);
map.get(a) // 555

如果 Map 的鍵是一個簡單型別的值（數字、字串、布林值），則只要兩個值嚴格相等，Map 將其視為一個鍵，比如0 和-0 就是一個鍵，布林值true 和字串"true" 則是兩個不同的鍵。另外，undefined 和null 也是兩個不同的鍵。雖然NaN 不嚴格相等於自身，但 Map 將其視為同一個鍵。

let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123

例項的屬性和方法

1. 屬性

Map.prototype.constructor
Map.prototype.size

2. 方法

• set(key, value) ：設定鍵名key 對應的鍵值為value ，然後返回整個 Map 結構。如果key 已經有值，則鍵值會被更新，否則就新生成該鍵。
• get(key) ：讀取key 對應的鍵值，如果找不到key ，返回undefined 。
• delete(key) ：刪除某個鍵，返回一個布林值，表示刪除是否成功。
• has(key) ：返回一個布林值，表示某個鍵是否在當前 Map 物件之中。
• clear() ：清除所有成員，沒有返回值。

遍歷操作

keys()
values()
entries()
forEach()

Map 的遍歷順序就是插入順序。

WeakSet 和 WeakMap

Weak(Set/Map) 與 Set/Map 類似，只是它們的成員只能是物件，而不能是其他型別的值。其次，Weak(Set/Map) 中的物件都是弱引用，即垃圾回收機制不考慮 Weak(Set/Map) 對該物件的引用，也就是說，如果其他物件都不再引用該物件，那麼垃圾回收機制會自動回收該物件所佔用的記憶體，不考慮該物件還存在於 Weak(Set/Map) 之中。因此這兩種結構有助於防止記憶體洩漏。

1. WeakSet

WeakSet 只可以使用add() 、delete() 和has() 。WeakSet 沒有size 屬性，沒有辦法遍歷它的成員。WeakSet 不能遍歷，是因為成員都是弱引用，隨時可能消失，遍歷機制無法保證成員的存在，很可能剛剛遍歷結束，成員就取不到了。WeakSet 的一個用處，是儲存 DOM 節點，而不用擔心這些節點從文件移除時，會引發記憶體洩漏。

2. WeakMap

WeakSet 只可以使用get() 、set() 、has() 、delete() 。也沒有size 數屬性，沒法執行遍歷操作。