ES6中新增Set、Map兩種數據結構理解
如果要用一句來描述，我們可以說Set是一種叫做集合的數據結構，Map是一種叫做字典的數據結構。
什么是集合？什么又是字典？
- 集合
是由一堆無序的、相關聯的，且不重復的內存結構【數學中稱為元素】組成的組合 - 字典
是一些元素的集合。每個元素有一個稱作key 的域，不同元素的key 各不相同。
區別？
- 共同點：集合、字典都可以存儲不重復的值。
- 不同點：集合是以[值，值]的形式存儲元素，字典是以[鍵，值]的形式存儲。
一、Set
Set是es6新增的數據結構，類似于數組，但是成員的值都是唯一的，沒有重復的值，我們一般稱為集合。
Set本身是一個構造函數，用來生成 Set 數據結構。
const s = new Set();增刪改查
Set的實例關于增刪改查的方法：
- add()
- delete()
- has()
- clear()
add()
添加某個值，返回 Set 結構本身。
當添加實例中已經存在的元素，set不會進行處理添加。
s.add(1).add(2).add(2); // 2只被添加了一次delete()
刪除某個值，返回一個布爾值，表示刪除是否成功。
s.delete(1)has()
返回一個布爾值，判斷該值是否為Set的成員。
s.has(2)clear()
清除所有成員，沒有返回值。
s.clear()遍歷
Set實例遍歷的方法有如下：
關于遍歷的方法，有如下：
- keys()：返回鍵名的遍歷器
- values()：返回鍵值的遍歷器
- entries()：返回鍵值對的遍歷器
- forEach()：使用回調函數遍歷每個成員
Set的遍歷順序就是插入順序。
keys方法、values方法、entries方法返回的都是遍歷器對象。
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]forEach()用于對每個成員執行某種操作，沒有返回值，鍵值、鍵名都相等，同樣的forEach方法有第二個參數，用于綁定處理函數的this。
let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9擴展運算符和 Set 結構相結合實現數組或字符串去重。
// 數組
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; // [3, 5, 2]
// 字符串
let str = "352255";
let unique = [...new Set(str)].join(""); // ""實現并集、交集、和差集。
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}
// （a 相對于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}二、Map
Map類型是鍵值對的有序列表，而鍵和值都可以是任意類型。
Map本身是一個構造函數，用來生成 Map 數據結構。
const m = new Map()增刪改查
Map 結構的實例針對增刪改查有以下屬性和操作方法：
- size 屬性
- set()
- get()
- has()
- delete()
- clear()
size
size屬性返回 Map 結構的成員總數。
const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2set()
設置鍵名key對應的鍵值為value，然后返回整個 Map 結構。
如果key已經有值，則鍵值會被更新，否則就新生成該鍵。
同時返回的是當前Map對象，可采用鏈式寫法。
const m = new Map();
m.set('edition', 6) // 鍵是字符串
m.set(262, 'standard') // 鍵是數值
m.set(undefined, 'nah') // 鍵是 undefined
m.set(1, 'a').set(2, 'b').set(3, 'c') // 鏈式操作get()
get方法讀取key對應的鍵值，如果找不到key，返回undefined。
const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 鍵是函數
m.get(hello) // Hello ES6!has()
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) // truedelete()
delete方法刪除某個鍵，返回true。如果刪除失敗，返回false。
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true
m.delete(undefined)
m.has(undefined) // falseclear()
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 的所有成員
遍歷順序就是插入順序。
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});三、WeakSet 和 WeakMap
WeakSet
創建WeakSet實例。
const ws = new WeakSet();WeakSet 可以接受一個具有 Iterable 接口的對象作為參數。
const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}在API中WeakSet與Set有兩個區別：
- 沒有遍歷操作的API
- 沒有size屬性
WeackSet只能成員只能是引用類型，而不能是其他類型的值。
let ws=new WeakSet();
// 成員不是引用類型
let weakSet=new WeakSet([2,3]);
console.log(weakSet) // 報錯
// 成員為引用類型
let obj1={name:1}
let obj2={name:1}
let ws=new WeakSet([obj1,obj2]);
console.log(ws) //WeakSet {{…}, {…}}WeakSet 里面的引用只要在外部消失，它在 WeakSet 里面的引用就會自動消失。
WeakMap
WeakMap結構與Map結構類似，也是用于生成鍵值對的集合。
在API中WeakMap與Map有兩個區別：
- 沒有遍歷操作的API
- 沒有clear清空方法
// 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只接受對象作為鍵名（null除外），不接受其他類型的值作為鍵名。
const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map keyWeakMap的鍵名所指向的對象，一旦不再需要，里面的鍵名對象和所對應的鍵值對會自動消失，不用手動刪除引用。
舉個場景例子：
在網頁的 DOM 元素上添加數據，就可以使用WeakMap結構，當該 DOM 元素被清除，其所對應的WeakMap記錄就會自動被移除。
const wm = new WeakMap();
const element = document.getElementById('example');
wm.set(element, 'some information');
wm.get(element) // "some information"注意：WeakMap 弱引用的只是鍵名，而不是鍵值。鍵值依然是正常引用。
下面代碼中，鍵值obj會在WeakMap產生新的引用，當你修改obj不會影響到內部。
const wm = new WeakMap();
let key = {};
let obj = {foo: 1};
wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}
