ES6的Set和Map 以及WeakSet和WeakMap

1、Set

1.1概念：ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Set，它類似數(shù)組，但是成員的值都是唯一的。

eg:
const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); }
上面代碼，通過add方法向Set結(jié)構(gòu)假如成員，輸出為：2，3，5，4

Set函數(shù)可以接受一個數(shù)組（或類似數(shù)組的對象）作為參數(shù)，用來初始化

// 例一
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

// 例三
function divs () { return [...document.querySelectorAll('div')]; }

const set = new Set(divs()); set.size // 56

// 類似于
divs().forEach(div => set.add(div)); set.size // 56
上面代碼，例一和二都是數(shù)組作為參數(shù)，例三是接受類似數(shù)組的對象作為參數(shù)。

去除數(shù)組重復(fù)成員的方法
// 去除數(shù)組的重復(fù)成員 [...new Set(array)]

向set里加入值的時候，不會發(fā)生類型轉(zhuǎn)化，所以5和“5”是兩個不同的值，Set內(nèi)部判斷兩個值是否不同，使用的算法叫做“Same-value equality” 類似于精確相等運(yùn)算符(===)，而區(qū)別是，NaN等于自身，而精確相等運(yùn)算符認(rèn)為NaN不等于自身。此外兩個對象總是不相等。
1.2Set實例的屬性和方法

Set 結(jié)構(gòu)的實例有以下屬性。

Set.prototype.constructor：構(gòu)造函數(shù)，默認(rèn)就是Set函數(shù)。
Set.prototype.size：返回Set實例的成員總數(shù)。

Set 實例的方法分為兩大類：操作方法（用于操作數(shù)據(jù)）和遍歷方法（用于遍歷成員）。下面先介紹四個操作方法。

add(value)：添加某個值，返回Set結(jié)構(gòu)本身。
delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
has(value)：返回一個布爾值，表示該值是否為Set的成員。
clear()：清除所有成員，沒有返回值。

下面是一個對比，判斷是否包括在一個鍵上面，Object結(jié)構(gòu)和Set結(jié)構(gòu)的寫法不同。

對象的寫法
const obj = {
'width':1,
'height':1
}

if(obj[someName]){
//....
}

Set的寫法
const obj = new Set()
obj.add('width');
obj.add('height');

if(obj.has(someName)){//....}

Array.from方法可以將Set結(jié)構(gòu)轉(zhuǎn)為數(shù)組
const items = new Set（[1,2,3,4,5]）;
const array = Array.from(items);

這也就提供了去除數(shù)組重復(fù)成員的另一種方法。
function dedupe(array){ return Array.from(new Set(array)); } dedupe([1,1,2,3]) //[1,2,3]

1.3遍歷操作

Set結(jié)構(gòu)的實例有死歌遍歷方法，可以用于遍歷成員。

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

.keys()：返回鍵名的遍歷器

.values()：返回鍵值的遍歷器

.entries()：返回鍵值對的遍歷器

.forEach()：使用回調(diào)函數(shù)遍歷每個成員

遍歷
let set = new Set(['red','green','blue']);
for(let x of set){ console.log(x); }
//red //green //blue

forEach()方法，用于對每個成員執(zhí)行某種操作，沒有返回值
let set = new Set([1, 2, 3]); set.forEach((value, key) => console.log(value * 2) ) // 2 // 4 // 6

遍歷的應(yīng)用

擴(kuò)展運(yùn)算符(...)內(nèi)部使用 for...of循環(huán)，所以也可以用于Set結(jié)構(gòu)
let set = new Set(['red', 'green', 'blue']); let arr = [...set]; // ['red', 'green', 'blue']
擴(kuò)展運(yùn)算符和 Set 結(jié)構(gòu)相結(jié)合，就可以去除數(shù)組的重復(fù)成員。
let arr = [3, 5, 2, 2, 5, 5]; let unique = [...new Set(arr)]; // [3, 5, 2]

而且數(shù)組的map和filter 方法也可以用于Set了

let set = new Set([1, 2, 3]); set = new Set([...set].map(x => x * 2)); // 返回Set結(jié)構(gòu)：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]); set = new Set([...set].filter(x => (x % 2) == 0)); // 返回Set結(jié)構(gòu)：{2, 4}

綜上Set可以很容易地實現(xiàn)并集(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結(jié)構(gòu)，目前沒有直接的方法，但是有兩種變通方法。一種是利用原Set結(jié)構(gòu)映射出一個新的結(jié)構(gòu)，然后賦值給原來的Set結(jié)構(gòu)；另一種是利用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

2、WeakSet

2.1概念

WeakSet結(jié)構(gòu)與Set類似，也是不重復(fù)的值的集合，但是，它與Set有兩個區(qū)別。首先，WeakSet的成員只能是對象，而不能是其他類型的值，其次，WeakSet中的對象都是弱引用，即垃圾回收機(jī)制不考慮 WeakSet 對該對象的引用
垃圾回收機(jī)制依賴引用技術(shù)
WeakSet是一個構(gòu)造函數(shù)，可以使用new命令，創(chuàng)建WeakSet數(shù)據(jù)結(jié)構(gòu)，

const set = new WeakSet()

const a = [[1,2],[3,4]]
const ws = new WeakSet(a)\這是可行的

const b = [3, 4];
const ws = new WeakSet(b);\報錯

3.2

WeakSet 結(jié)構(gòu)有以下三個方法。

WeakSet.prototype.add(value)：向 WeakSet 實例添加一個新成員。

WeakSet.prototype.delete(value)：清除 WeakSet 實例的指定成員。

WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在

3.3

WeakSet 沒有size屬性，沒有辦法遍歷它的成員。因此forEach的方法也用不了。

WeakSet 的一個用處，是儲存 DOM 節(jié)點，而不用擔(dān)心這些節(jié)點從文檔移除時，會引發(fā)內(nèi)存泄漏。

WeakSet 例子:
const foos = new WeakSet()
class Foo{ constructor(){ foos.add(this) } method(){ if(!foos.has(this)){ throw new TypeError('Foo.prototype.method 只能在Foo的實例上調(diào)用')； } } }
上面代碼保證了Foo的實例方法，只能在Foo的實例上調(diào)用。這里使用WeakSet的好處是，foos對實例的引用，不會被記入內(nèi)存回收機(jī)制，所以刪除實例的時候，不用考慮foos，也不會出現(xiàn)內(nèi)存泄露。

3、Map

3.1概念

Object 結(jié)構(gòu)提供了“字符串—值”的對應(yīng)，Map結(jié)構(gòu)提供了“值—值”的對應(yīng)，是一種更完善的 Hash 結(jié)構(gòu)實現(xiàn)。如果你需要“鍵值對”的數(shù)據(jù)結(jié)構(gòu)，Map 比 Object 更合適。

3.2方法

map在增加成員的時候，用set 例如：
const m = new Map();
m.set(0,'content');
m.get(0);
m.delete(0)
m.has(0)

map同樣接受一個數(shù)組作為參數(shù),該數(shù)組的成員是一個個表示鍵值對的數(shù)組。

事實上，不僅僅是數(shù)組，任何具有Iterator接口的數(shù)據(jù)結(jié)構(gòu)都可以當(dāng)做Map構(gòu)造函數(shù)的參數(shù)，這就是說，Set和Map都可以用來生成新的Map。

const set = new Set([ ['foo', 1], ['bar', 2] ]); const m1 = new Map(set); m1.get('foo') // 1
上面代碼中，我們分別使用 Set 對象和 Map 對象，當(dāng)作Map構(gòu)造函數(shù)的參數(shù)，結(jié)果都生成了新的 Map 對象

3.3實例的屬性和操作方法

Map結(jié)構(gòu)的實例有一下屬性和操作方法

size
set(key,value)
get(key),
has(key)
delete(key)
clear()

3.4遍歷方法(Map的遍歷順序就是插入的順序)

Map結(jié)構(gòu)提供三個遍歷起生成函數(shù)和一個遍歷方法。

keys()：返回鍵名的遍歷器。

values()：返回鍵值的遍歷器。

entries()：返回所有成員的遍歷器。

forEach()：遍歷 Map 的所有成員。

for(let key of map.keys()){ console.log(key); }

for(let [key,value] of map){ console.log(key,value) }

for(let item of map.entries()){ console.log(item[0],item[1]); }

3.5、Map結(jié)構(gòu)轉(zhuǎn)為數(shù)組結(jié)構(gòu)，比較快速的方法是使用擴(kuò)展運(yùn)算符(...)

const map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]);

[...map.keys()]
[...map.values()]
[...map.entries()]
[...map]

結(jié)合數(shù)組的map方法、filter方法，可以實現(xiàn)Map的遍歷和過濾(Map本身沒有map和filter方法)
const map0 = new Map()
.set(1, 'a') .set(2, 'b') .set(3, 'c');

const map1 = new Map( [...map0].filter(([k, v]) => k < 3) );
// 產(chǎn)生 Map 結(jié)構(gòu) {1 => 'a', 2 => 'b'}

const map2 = new Map( [...map0].map(([k, v]) => [k * 2, '_' + v]) ); // 產(chǎn)生 Map 結(jié)構(gòu) {2 => '_a', 4 => '_b', 6 => '_c'}

3.6、與其他數(shù)據(jù)結(jié)構(gòu)的互相轉(zhuǎn)換
3.6.1 Map轉(zhuǎn)為數(shù)組
使用擴(kuò)展運(yùn)算符，|| Array.form
3.6.2 數(shù)組 轉(zhuǎn)為 Map
將數(shù)組傳入Map構(gòu)造函數(shù)，就可以轉(zhuǎn)為Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
3.6.3 Map轉(zhuǎn)為對象
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)

3.6.4 對象轉(zhuǎn)為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})
3.6.5 Map轉(zhuǎn)為JSON

Map 轉(zhuǎn)為 JSON 要區(qū)分兩種情況。一種情況是，Map 的鍵名都是字符串，這時可以選擇轉(zhuǎn)為對象 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 的鍵名有非字符串，這時可以選擇轉(zhuǎn)為數(shù)組 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"]]]'
3.6.5 JSON轉(zhuǎn)為Map

JSON 轉(zhuǎn)為 Map，正常情況下，所有鍵名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

但是，有一種特殊情況，整個 JSON 就是一個數(shù)組，且每個數(shù)組成員本身，又是一個有兩個成員的數(shù)組。這時，它可以一一對應(yīng)地轉(zhuǎn)為Map。這往往是數(shù)組轉(zhuǎn)為 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')

4 WeakMap

4.1概念

WeakMap結(jié)構(gòu)與Map結(jié)構(gòu)類似，也是用于生成鍵值對的。

4.2區(qū)別

首先，WeakMap只接受對象作為鍵名（null除外），不接受其他類型的值作為鍵名

其次，WeakMap的鍵名所指向的對象，不計入垃圾回收機(jī)制

4.3 WeakMap語法

WeakMap 與 Map 在 API 上的區(qū)別主要是兩個，一是沒有遍歷操作（即沒有key()、values()和entries()方法），也沒有size屬性。因為沒有辦法列出所有鍵名，這個鍵名是否存在完全不可預(yù)測，跟垃圾回收機(jī)制是否運(yùn)行相關(guān)。二是無法清空，即不支持clear方法。因此，WeakMap只有四個方法可用：get()、set()、has()、delete()。

以上所有的知識點和例子，均來自于阮一峰老師的書籍[ECMAScript 6 入門]

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容