ES6資料結構之Set和Map
- Set
（1）基本用法:
ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。
Set 本身是一個建構函式，用來生成 Set 資料結構。
Set 函式可以接受一個數組（或者具有 iterable 介面的其他資料結構）作為引數，用來初始化。
// 例一 const set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] // 例二 const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 // 例三 const set = new Set(document.querySelectorAll('div')); set.size // 56 // 類似於 const set = new Set(); document .querySelectorAll('div') .forEach(div => set.add(div)); set.size // 56 // 去除陣列的重複成員 [...new Set(array)]
向 Set 加入值的時候，不會發生型別轉換，所以5和"5"是兩個不同的值。Set 內部判斷兩個值是否不同，使用的演算法叫做“Same-value-zero equality”，它類似於精確相等運算子（===），主要的區別是NaN等於自身，而精確相等運算子認為NaN不等於自身。
//向 Set 例項添加了兩個NaN，但是隻能加入一個。這表明，在 Set 內部，兩個NaN是相等
let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}
另外，兩個物件總是不相等的
let set = new Set(); set.add({}); set.size // 1 set.add({}); set.size // 2
（2） Set屬性的例項和方法
Set 結構的例項有以下屬性。
Set.prototype.constructor：建構函式，預設就是Set函式。
Set.prototype.size：返回Set例項的成員總數。
Set 例項的方法分為兩大類：
操作方法（用於操作資料）和遍歷方法（用於遍歷成員）。下面先介紹四個操作方法。
add(value)：新增某個值，返回 Set 結構本身。
delete(value)：刪除某個值，返回一個布林值，表示刪除是否成功。
has(value)：返回一個布林值，表示該值是否為Set的成員。
clear()：清除所有成員，沒有返回值。
Array.from方法可以將 Set 結構轉為陣列，這就提供了去除陣列重複成員的另一種方法。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
//去除陣列重複成員
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
（3）遍歷操作
Set 結構的例項有四個遍歷方法，可以用於遍歷成員。
keys()：返回鍵名的遍歷器
values()：返回鍵值的遍歷器
entries()：返回鍵值對的遍歷器
forEach()：使用回撥函式遍歷每個成員
需要特別指出的是，Set的遍歷順序就是插入順序。這個特性有時非常有用，比如使用 Set 儲存一個回撥函式列表，呼叫時就能保證按照新增順序呼叫。
keys方法、values方法、entries方法返回的都是遍歷器物件。由於 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以keys方法和values方法的行為完全一致。
let set = new Set(['red', 'green', 'blue']);
console.log('keys:')
for (let item of set.keys()) {
console.log(item);
}
console.log('values:')
for (let item of set.values()) {
console.log(item);
}
console.log('entries:')
for (let item of set.entries()) {
console.log(item);
}//entries方法返回的遍歷器，同時包括鍵名和鍵值，所以每次輸出一個數組，它的兩個成員完全相等。
/* keys:
red
green
blue
values:
red
green
blue
entries:
["red", "red"]
["green", "green"]
["blue", "blue"]*/
//Set 結構的例項預設可遍歷，它的預設遍歷器生成函式就是它的values方法。
Set.prototype[Symbol.iterator] === Set.prototype.values
// true
// 這意味著，可以省略values方法，直接用for...of迴圈遍歷 Set。
let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
console.log(x);
}
// red
// green
// blue
forEach方法，用於對每個成員執行某種操作，沒有返回值。
let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ’ : ’ + value))
// 1 : 1
// 4 : 4
// 9 : 9
上面程式碼說明，forEach方法的引數就是一個處理函式。該函式的引數與陣列的forEach一致，依次為鍵值、鍵名、集合本身（上例省略了該引數）。這裡需要注意，Set 結構的鍵名就是鍵值（兩者是同一個值），因此第一個引數與第二個引數的值永遠都是一樣的。
另外，forEach方法還可以有第二個引數，表示繫結處理函式內部的this物件。
遍歷的應用
擴充套件運算子（…）內部使用for…of迴圈，所以也可以用於 Set 結構。
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']
擴充套件運算子和 Set 結構相結合，就可以去除陣列的重複成員。
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]
而且，陣列的map和filter方法也可以間接用於 Set 了。
et set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set結構：{2, 4, 6}
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set結構：{2, 4}
因此使用 Set 可以很容易地實現並集（Union）、交集（Intersect）和差集（Difference）。
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 並集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
如果想在遍歷操作中，同步改變原來的 Set 結構，目前沒有直接的方法，但有兩種變通方法。一種是利用原 Set 結構映射出一個新的結構，然後賦值給原來的 Set 結構；另一種是利用Array.from方法。
// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6
// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6
上面程式碼提供了兩種方法，直接在遍歷操作中改變原來的 Set 結構。
- WeakSet
WeakSet 結構與 Set 類似，也是不重複的值的集合。但是，它與 Set 有兩個區別。
首先，WeakSet 的成員只能是物件，而不能是其他型別的值。
其次，WeakSet 中的物件都是弱引用，即垃圾回收機制不考慮 WeakSet 對該物件的引用，也就是說，如果其他物件都不再引用該物件，那麼垃圾回收機制會自動回收該物件所佔用的記憶體，不考慮該物件還存在於 WeakSet 之中。
這是因為垃圾回收機制依賴引用計數，如果一個值的引用次數不為0，垃圾回收機制就不會釋放這塊記憶體。結束使用該值之後，有時會忘記取消引用，導致記憶體無法釋放，進而可能會引發記憶體洩漏。
WeakSet 裡面的引用，都不計入垃圾回收機制，所以就不存在這個問題。因此，WeakSet 適合臨時存放一組物件，以及存放跟物件繫結的資訊。只要這些物件在外部消失，它在 WeakSet 裡面的引用就會自動消失。
由於上面這個特點，WeakSet 的成員是不適合引用的，因為它會隨時消失。另外，由於 WeakSet 內部有多少個成員，取決於垃圾回收機制有沒有執行，執行前後很可能成員個數是不一樣的，而垃圾回收機制何時執行是不可預測的，因此 ES6 規定 WeakSet 不可遍歷。
WeakSet語法：
WeakSet 是一個建構函式，可以使用new命令，建立 WeakSet 資料結構。const ws = new WeakSet();
作為建構函式，WeakSet 可以接受一個數組或類似陣列的物件作為引數。（實際上，任何具有 Iterable 介面的物件，都可以作為 WeakSet 的引數。）該陣列的所有成員，都會自動成為 WeakSet 例項物件的成員。
const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}
// 上面程式碼中，a是一個數組，它有兩個成員，也都是陣列。將a作為 WeakSet 建構函式的引數，a的成員會自動成為 WeakSet 的成員。
// 注意，是a陣列的成員成為 WeakSet 的成員，而不是a陣列本身。這意味著，陣列的成員只能是物件。
const b = [3, 4];
const ws = new WeakSet(b);
// Uncaught TypeError: Invalid value used in weak set(…)
上面程式碼中，陣列b的成員不是物件，加入 WeaKSet 就會報錯。
WeakSet 結構有以下三個方法。
WeakSet.prototype.add(value)：向 WeakSet 例項新增一個新成員。
WeakSet.prototype.delete(value)：清除 WeakSet 例項的指定成員。
WeakSet.prototype.has(value)：返回一個布林值，表示某個值是否在
WeakSet 沒有size屬性，沒有辦法遍歷它的成員。WeakSet 不能遍歷，是因為成員都是弱引用，隨時可能消失，遍歷機制無法保證成員的存在，很可能剛剛遍歷結束，成員就取不到了。
WeakSet 的一個用處，是儲存 DOM 節點，而不用擔心這些節點從文件移除時，會引發記憶體洩漏。
-
Map
（1）定義和使用
Map是JavaScript 的物件（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字串當作鍵。這給它的使用帶來了很大的限制。
ES6 提供了 Map 資料結構。它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。也就是說，Object 結構提供了“字串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的資料結構，Map 比 Object 更合適。
不僅僅是陣列，任何具有 Iterator 介面、且每個成員都是一個雙元素的陣列的資料結構（詳見《Iterator》一章）都可以當作Map建構函式的引數。這就是說，Set和Map都可以用來生成新的 Map。如果對同一個鍵多次賦值，後面的值將覆蓋前面的值。
如果讀取一個未知的鍵，則返回undefined。
同樣的值的兩個例項，在 Map 結構中被視為兩個鍵。Map 的鍵實際上是跟記憶體地址繫結的，只要記憶體地址不一樣，就視為兩個鍵。這就解決了同名屬性碰撞（clash）的問題，我們擴充套件別人的庫的時候，如果使用物件作為鍵名，就不用擔心自己的屬性與原作者的屬性同名。
如果 Map 的鍵是一個簡單型別的值（數字、字串、布林值），則只要兩個值嚴格相等，Map 將其視為一個鍵，比如0和-0就是一個鍵，布林值true和字串true則是兩個不同的鍵。
另外，undefined和null也是兩個不同的鍵。
雖然NaN不嚴格相等於自身，但 Map 將其視為同一個鍵。
//我們分別使用 Set 物件和 Map 物件，當作Map建構函式的引數，結果都生成了新的 Map 物件
const set = new Set([
['foo', 1],
['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1
const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3
//如果對同一個鍵多次賦值，後面的值將覆蓋前面的值。
const map = new Map();
map
.set(1, 'aaa')
.set(1, 'bbb');
map.get(1) // "bbb"
//如果讀取一個未知的鍵，則返回undefined。
new Map().get('asfddfsasadf')
// undefined
//只有對同一個物件的引用，Map 結構才將其視為同一個鍵。這一點要非常小心。
const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined
上面程式碼的set和get方法，表面是針對同一個鍵，但實際上這是兩個值，記憶體地址是不一樣的，因此get方法無法讀取該鍵，返回undefined。
（2）例項的屬性和操作方法
size屬性返回 Map 結構的成員總數。
set(key, value)中set方法設定鍵名key對應的鍵值為value，然後返回整個 Map 結構。如果key已經有值，則鍵值會被更新，否則就新生成該鍵。set方法返回的是當前的Map物件，因此可以採用鏈式寫法。
const m = new Map();
m.set('edition', 6) // 鍵是字串
m.set(262, 'standard') // 鍵是數值
m.set(undefined, 'nah') // 鍵是 undefined
//鏈式寫法
let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
get(key) get方法讀取key對應的鍵值，如果找不到key，返回undefined。
has(key) has方法返回一個布林值，表示某個鍵是否在當前 Map 物件之中。
delete(key) delete方法刪除某個鍵，返回true。如果刪除失敗，返回false。
clear() clear方法清除所有成員，沒有返回值。
遍歷方法 ：
Map 結構原生提供三個遍歷器生成函式和一個遍歷方法。
keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回所有成員的遍歷器。
forEach()：遍歷 Map 的所有成員。
需要特別注意的是，Map 的遍歷順序就是插入順序。
Map 結構轉為陣列結構，比較快速的方法是使用擴充套件運算子（…）。
結合陣列的map方法、filter方法，可以實現 Map 的遍歷和過濾（Map 本身沒有map和filter方法）。此外，Map 還有一個forEach方法，與陣列的forEach方法類似，也可以實現遍歷。forEach方法還可以接受第二個引數，用來繫結this。
//陣列的遍歷和過濾
const map0 = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
const map1 = new Map(
[...map0].filter(([k, v]) => k < 3)
);
// 產生 Map 結構 {1 => 'a', 2 => 'b'}
const map2 = new Map(
[...map0].map(([k, v]) => [k * 2, '_' + v])
);
// 產生 Map 結構 {2 => '_a', 4 => '_b', 6 => '_c'}
//forEach實現遍歷
map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});
//forEach接收第二個引數，用來繫結this
//forEach方法的回撥函式的this，就指向reporter。
const reporter = {
report: function(key, value) {
console.log("Key: %s, Value: %s", key, value);
}
};
map.forEach(function(value, key, map) {
this.report(key, value);
}, reporter);
（3）與其他資料結構的互相轉換
a，Map 互轉陣列（Map 轉為陣列最方便的方法，就是使用擴充套件運算子（…），將陣列傳入 Map 建構函式，就可以轉為 Map）
//Map轉陣列
const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
//陣列轉Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
b，Map互轉物件（如果所有 Map 的鍵都是字串，它可以無損地轉為物件；如果有非字串的鍵名，那麼這個鍵名會被轉成字串，再作為物件的鍵名。）
//Map轉物件
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }
//物件轉Map
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}
c，Map互轉JSON（Map 轉為 JSON 要區分兩種情況。一種情況是，Map 的鍵名都是字串，這時可以選擇轉為物件 JSON。JSON 轉為 Map，正常情況下，所有鍵名都是字串。）
//map轉json
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'
//另一種情況是，Map 的鍵名有非字串，這時可以選擇轉為陣列 JSON。
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'
//json轉Map
JSON 轉為 Map，正常情況下，所有鍵名都是字串。
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
//但是，有一種特殊情況，整個 JSON 就是一個數組，且每個陣列成員本身，又是一個有兩個成員的陣列。這時，它可以一一對應地轉為 Map。這往往是 Map 轉為陣列 JSON 的逆操作。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
- WeakMap
WeakMap結構與Map結構類似，也是用於生成鍵值對的集合
// WeakMap 可以使用 set 方法新增成員
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2
// WeakMap 也可以接受一個數組，
// 作為建構函式的引數
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"
WeakMap與Map的區別有兩點:
首先，WeakMap只接受物件作為鍵名（null除外），不接受其他型別的值作為鍵名。
其次，WeakMap的鍵名所指向的物件，不計入垃圾回收機制。
WeakMap的設計目的在於，有時我們想在某個物件上面存放一些資料，但是這會形成對於這個物件的引用。
WeakMap 就是為了解決記憶體洩露問題而誕生的，它的鍵名所引用的物件都是弱引用，即垃圾回收機制不將該引用考慮在內。因此，只要所引用的物件的其他引用都被清除，垃圾回收機制就會釋放該物件所佔用的記憶體。也就是說，一旦不再需要，WeakMap 裡面的鍵名物件和所對應的鍵值對會自動消失，不用手動刪除引用。
基本上，如果你要往物件上新增資料，又不想幹擾垃圾回收機制，就可以使用 WeakMap。一個典型應用場景是，在網頁的 DOM 元素上新增資料，就可以使用WeakMap結構。當該 DOM 元素被清除，其所對應的WeakMap記錄就會自動被移除。
注意，WeakMap 弱引用的只是鍵名，而不是鍵值。鍵值依然是正常引用。
const wm = new WeakMap();
let key = {};
let obj = {foo: 1};
wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}
// 鍵值obj是正常引用。所以，即使在 WeakMap 外部消除了obj的引用，WeakMap 內部的引用依然存在。
WeakMap 的語法
WeakMap 與 Map 在 API 上的區別主要是兩個，一是沒有遍歷操作（即沒有keys()、values()和entries()方法），也沒有size屬性。因為沒有辦法列出所有鍵名，某個鍵名是否存在完全不可預測，跟垃圾回收機制是否執行相關。這一刻可以取到鍵名，下一刻垃圾回收機制突然運行了，這個鍵名就沒了，為了防止出現不確定性，就統一規定不能取到鍵名。二是無法清空，即不支援clear方法。因此，WeakMap只有四個方法可用：get()、set()、has()、delete()。
const wm = new WeakMap();
// size、forEach、clear 方法都不存在
wm.size // undefined
wm.forEach // undefined
wm.clear // undefined
WeakMap 的用途：
WeakMap 應用的典型場合就是 DOM 節點作為鍵名。
WeakMap 的另一個用處是部署私有屬性。
//myElement是一個 DOM 節點，每當發生click事件，就更新一下狀態。
//我們將這個狀態作為鍵值放在 WeakMap 裡，對應的鍵名就是myElement。
//一旦這個 DOM 節點刪除，該狀態就會自動消失，不存在記憶體洩漏風險。
let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();
myWeakmap.set(myElement, {timesClicked: 0});
myElement.addEventListener('click', function() {
let logoData = myWeakmap.get(myElement);
logoData.timesClicked++;
}, false);
//Countdown類的兩個內部屬性_counter和_action，是例項的弱引用，所以如果刪除例項，它們也就隨之消失，不會造成記憶體洩漏。
const _counter = new WeakMap();
const _action = new WeakMap();
class Countdown {
constructor(counter, action) {
_counter.set(this, counter);
_action.set(this, action);
}
dec() {
let counter = _counter.get(this);
if (counter < 1) return;
counter--;
_counter.set(this, counter);
if (counter === 0) {
_action.get(this)();
}
}
}
const c = new Countdown(2, () => console.log('DONE'));
c.dec()
c.dec()
// DONE