細說es6中的Set和Map

1.Set

ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。
Set 自己是一個構造函數，用來生成 Set 數據結構。
基本用法：
const set = new Set();
set函數能夠接受一個數組（或者具備iterable 接口的其餘數據結構）做爲參數，用來初始化：
const set = new Set(['1','2','3','2']); //注意：set結構不會接受重複的參數，這也體現了set結構去重的方法

擴展運算符： ... //能夠把set數據結構轉化爲數組類型
例如：
[...set]
另外一種方法是利用Array.from()方法：
const set = new Set(['1','2','3']);
例如： Array.from(set)
在set結構中，兩個對象老是不相等的，NaN也等於其自己。

下面是set結構的屬性和方法：
Set 結構的實例有如下屬性：
Set.prototype.constructor：構造函數，默認就是Set函數。
Set.prototype.size：返回Set實例的成員總數。

Set 實例的方法分爲兩大類：操做方法（用於操做數據）和遍歷方法（用於遍歷成員）。下面先介紹四個操做方法。
add(value)：添加某個值，返回 Set 結構自己。
delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
has(value)：返回一個布爾值，表示該值是否爲Set的成員。
clear()：清除全部成員，沒有返回值。
例如：
set.add(10) //向set添加一個成員
set.delete(10) //刪除set一個成員
set.has(10) //檢測這個值是否存在，返回布爾值true或false
set.clear() //清除全部set成員，沒有返回值

遍歷操做
Set 結構的實例有四個遍歷方法，能夠用於遍歷成員。

keys()：返回鍵名的遍歷器
values()：返回鍵值的遍歷器
entries()：返回鍵值對的遍歷器
forEach()：使用回調函數遍歷每一個成員
須要特別指出的是，Set的遍歷順序就是插入順序。這個特性有時很是有用，好比使用 Set 保存一個回調函數列表，調用時就能保證按照添加順序調用。

（1）keys()，values()，entries()
keys方法、values方法、entries方法返回的都是遍歷器對象（詳見《Iterator 對象》一章）。因爲 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），因此keys方法和values方法的行爲徹底一致。

2.WeakSet

含義:
WeakSet 結構與 Set 相似，也是不重複的值的集合。可是，它與 Set 有兩個區別。
(1),WeakSet 的成員只能是對象，而不能是其餘類型的值。
WeakSet 適合臨時存放一組對象
WeakSet 的成員是不適合引用的，由於它會隨時消失。另外，因爲 WeakSet 內部有多少個成員，取決於垃圾回收機制有沒有運行，運行先後極可能成員個數是不同的，而垃圾回收機制什麼時候運行是不可預測的，所以 ES6 規定 WeakSet 不可遍歷。
做爲構造函數，WeakSet 能夠接受一個數組或相似數組的對象做爲參數。（實際上，任何具備 Iterable 接口的對象，均可以做爲 WeakSet 的參數。）該數組的全部成員，都會自動成爲 WeakSet 實例對象的成員。
注意，是a數組的成員成爲 WeakSet 的成員，而不是a數組自己。這意味着，數組的成員只能是對象。

WeakSet 結構有如下三個方法。
WeakSet.prototype.add(value)：向 WeakSet 實例添加一個新成員。
WeakSet.prototype.delete(value)：清除 WeakSet 實例的指定成員。
WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在 WeakSet 實例之中。

const ws = new WeakSet();
const obj = {};
const foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo); // false

ws.delete(window);
ws.has(window); // false

另外：WeakSet 沒有size屬性，沒有辦法遍歷它的成員。

3.Map

含義和基本用法
JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），可是傳統上只能用字符串看成鍵。這給它的使用帶來了很大的限制。
爲了解決這個問題，ES6 提供了 Map 數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。也就是說，Object 結構提供了「字符串—值」的對應，Map 結構提供了「值—值」的對應，是一種更完善的 Hash 結構實現。若是你須要「鍵值對」的數據結構，Map 比 Object 更合適。
例如：
const m = new Map();
const o = {p: 'Hello World'};

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

m.has(o) // true
m.delete(o) // true
m.has(o) // false
事實上，不只僅是數組，任何具備 Iterator 接口、且每一個成員都是一個雙元素的數組的數據結構（詳見《Iterator》一章）均可以看成Map構造函數的參數。這就是說，Set和Map均可以用來生成新的 Map。

實例的屬性和操做方法

（1）size 屬性

size屬性返回 Map 結構的成員總數。

const map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
（2）set(key, value)

set方法設置鍵名key對應的鍵值爲value，而後返回整個 Map 結構。若是key已經有值，則鍵值會被更新，不然就新生成該鍵。

const m = new Map();

m.set('edition', 6) // 鍵是字符串
m.set(262, 'standard') // 鍵是數值
m.set(undefined, 'nah') // 鍵是 undefined
set方法返回的是當前的Map對象，所以能夠採用鏈式寫法。

let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
（3）get(key)

get方法讀取key對應的鍵值，若是找不到key，返回undefined。

const m = new Map();

const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 鍵是函數

m.get(hello) // Hello ES6!
（4）has(key)

has方法返回一個布爾值，表示某個鍵是否在當前 Map 對象之中。

const m = new Map();

m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');

m.has('edition') // true
m.has('years') // false
m.has(262) // true
m.has(undefined) // true
（5）delete(key)

delete方法刪除某個鍵，返回true。若是刪除失敗，返回false。

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true

m.delete(undefined)
m.has(undefined) // false
（6）clear()

clear方法清除全部成員，沒有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

遍歷方法

Map 結構原生提供三個遍歷器生成函數和一個遍歷方法。

keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回全部成員的遍歷器。
forEach()：遍歷 Map 的全部成員。
須要特別注意的是，Map 的遍歷順序就是插入順序。

4.WeakMap

WeakMap結構與Map結構相似，也是用於生成鍵值對的集合。
WeakMap與Map的區別有兩點。

首先，WeakMap只接受對象做爲鍵名（null除外），不接受其餘類型的值做爲鍵名。
其次，WeakMap的鍵名所指向的對象，不計入垃圾回收機制。

WeakMap的設計目的在於，有時咱們想在某個對象上面存放一些數據，可是這會造成對於這個對象的引用。請看下面的例子。

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
[e1, 'foo 元素'],
[e2, 'bar 元素'],
];
基本上，若是你要往對象上添加數據，又不想幹擾垃圾回收機制，就可使用 WeakMap。一個典型應用場景是，在網頁的 DOM 元素上添加數據，就可使用WeakMap結構。當該 DOM 元素被清除，其所對應的WeakMap記錄就會自動被移除。

const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');wm.get(element) // "some information"上面代碼中，先新建一個 Weakmap 實例。而後，將一個 DOM 節點做爲鍵名存入該實例，並將一些附加信息做爲鍵值，一塊兒存放在 WeakMap 裏面。這時，WeakMap 裏面對element的引用就是弱引用，不會被計入垃圾回收機制。總之，WeakMap的專用場合就是，它的鍵所對應的對象，可能會在未來消失。WeakMap結構有助於防止內存泄漏。