Sets and Maps

??????我們知道ES6之前，array是唯一的集合類型，數(shù)組是數(shù)字索引（numeric index）的鍵值對(duì)組合，當(dāng)我們需要非數(shù)字索引的鍵值對(duì)時(shí)，必須使用非數(shù)組對(duì)象來模擬這種情況，ES6新添加了Sets和Maps這兩種集合類型。

??????Set是一系列值的集合，這些值不能重復(fù)，內(nèi)部使用 Object.is() 來判斷兩個(gè)值是否相同，一般我們不訪問set中的單個(gè)值，而是檢查是否存在某個(gè)值；Map是一系列鍵(keys)和相對(duì)應(yīng)值(values)的集合，多用于數(shù)據(jù)緩存，該數(shù)據(jù)稍后取回。下面從幾個(gè)方面來介紹這兩個(gè)新集合類型：

1. ES6之前實(shí)現(xiàn)sets和maps的workaround;
   
2. Set & WeakSet;
   
3. Map & WeakMap;

一.模擬Sets,Maps

1.模擬set 和 map

使用對(duì)象屬性來模擬set,然后判斷該屬性是否存在

var set = Object.create(null); // 使用null作為原型，確保沒有繼承的屬性
set.foo = true;

// 檢測(cè)存在性
if (set.foo) {
    // code to execute
}

一個(gè)對(duì)象用作set 還是 map 唯一的不同之處在于值得存儲(chǔ)方式不同，模擬map

var map = Object.create(null);
map.foo = "bar";

// 取回值
var value = map.foo;

console.log(value); // "bar"

2.模擬會(huì)出現(xiàn)的問題

??????我們知道對(duì)象只能使用字符串作為keys(ES6新添加symbols作為keys),所有的其他類型當(dāng)作keys,都會(huì)被轉(zhuǎn)換成字符串類型。

比如 5 轉(zhuǎn)換成 "5", 所有的對(duì)象類型 都轉(zhuǎn)換成 "[object Object]" (obj.toString()),這樣很難使用對(duì)象當(dāng)作keys

var map1 = Object.create(null);
map1[5] = "foo";

map1["5"]; // "foo" 數(shù)字鍵轉(zhuǎn)換成字符串
-----------------

var map2 = Object.create(null);
var key1 = {};
var key2 = {};
map2[key1] = "foo";

map2[key2]; // "foo" 對(duì)象類型都轉(zhuǎn)換成字符串"[object Object]"

set檢測(cè)：

var set = Object.create(null);
set.count = 1;
if (set.count) { //檢測(cè)count是否存在，還是 count===0 的情況，比較模糊
    // ...
}

二.Sets & WeakSets

集合中不存在重復(fù)的值(duplicate values),通過Object.is()判斷兩個(gè)值是否相同

1.Set方法屬性

1. add(value): 添加到set集合中
2. delete(value): 刪除value，刪除成功返回true,否則false
3. has(value): 判斷是否存在該value值，存在返回true，不存在則返回false
4. clear(): 清空set中所有值
5. size: set集合中的值個(gè)數(shù)

eg:

var mySet = new Set();
mySet.add(5);
mySet.add("5");
var key1 = {};
var key2 = {};

// 引用類型通過Object.is()判斷是否相同
mySet.size; // 4   Set {5, "5", Object {}, Object {}}
mySet.delete(5); // true
mySet.delete(10); // false
mySet.has("5"); // true
mySet.size; // 3   Set {"5", Object {}, Object {}}
mySet.clear(); // Set {}

2.創(chuàng)建set集合

Set構(gòu)造器中可以傳入一個(gè)可迭代對(duì)象作為參數(shù)（比如數(shù)組），重復(fù)的值將會(huì)被去除

var mySet = new Set([1, 2, 2, 4, 4, 5]);
mySet.size; // 4  Set {1, 2, 4, 5}

可以利用這一特性將數(shù)組中重復(fù)的值去除

var arr = [1, 2, 2, 4, 4, 5];
var set = new Set(arr); // Set {1, 2, 4, 5}
// 利用rest items將set集合轉(zhuǎn)變?yōu)樾聰?shù)組
var arr1 = [...set]; // arr1 [1, 2, 4, 5]

可以封裝這個(gè)方法

function eliminateDuplicates(arr) {
    return [...new Set(arr)];
}

3.forEach方法

forEach方法一般有3個(gè)參數(shù)

1. value
2. key(set中我們將鍵和值等同起來，即值同時(shí)也是鍵)
3. 集合自身set

set中沒有鍵，將鍵和值等同起來，是為了與其他使用forEach的集合保持一直,如array, maps

var set = new Set([1, 2]);
set.forEach(function(value, key, ownerSet)) {
    console.log(key + "：" + value);
    console.log(ownerSet === set);
}

// output:
1:1
true
2:2
true

forEach中還可以接入第2個(gè)參數(shù)this,用于指定上下文

let set = new Set([1, 2]);

let processor = {
    output(value) {
        console.log(value);
    },
    process(dataSet) {
        dataSet.forEach(function(value) {
            this.output(value);
        }, this)
    }
};

processor.process(set); // 1, 2

// 可以使用箭頭函數(shù)
let processor = {
    output(value) {
        console.log(value);
    },
    process(dataSet) {
        dataSet.forEach(value => this.output(value));
    }
};

4.WeakSet

WeakSet是用于系統(tǒng)GC， 消除不再引用的對(duì)象，主要是性能方面的關(guān)系，和Set比較起來主要有以下幾個(gè)方面區(qū)別：

1. WeakSet中只能存儲(chǔ)對(duì)象， 不能存儲(chǔ)primitive類型值；
   
2. add(), delete(), has()參數(shù)中只能傳入引用類型參數(shù)，傳入原始類型會(huì)拋出異常；
   
3. WeakSet沒有暴露任何迭代器，for...of..., keys(), values(), forEach(), clear()方法均不能使用；
   
4. WeakSet中不存在size屬性，因此不能通過weakSet.size來判斷weakSet中是否存在值

原始Set集合：

let set = new Set(),
    key = {};

set.add(key);
console.log(set.has(key)); // true

// 消除原始引用
key = null;

console.log(set.size); // 1 表明并沒有GC set中的值

// 取回原始引用
key = [...set][0]; // {}

WeakSet集合:

let key1 = {},
    key2 = {},
    weakSet = new WeakSet([key1, key2]);
weakSet.has(key1); // true
weakSet.has(key2); // true

// 移除對(duì)key1,key2的引用，同時(shí)也會(huì)從 weak set中移除
key1 = null;
key2 = null;

Maps & WeakMaps

maps通過鍵值對(duì)來存儲(chǔ)數(shù)據(jù)，鍵keys可以為任意類型

1.maps方法屬性

1. set(key, value): 添加鍵值對(duì);
   
2. get(key): 獲取key對(duì)應(yīng)的值, 若不存在返回undefined;
   
3. delete(key): 刪除鍵值對(duì);
   
4. has(key): 判斷是否存在該鍵;
   
5. clear(): 清空集合;
   
6. size: 集合的長(zhǎng)度

eg

let map = new Map();
map.set("name", "Nicholas");
map.set("age", 29);

map.size; // 2  Map {"name" => "Nicholas", "age" => 29}
map.get("name"); // "Nicholas"
map.has("age"); // true

map.delete("name"); // true
map.clear();
map.size; // 0

2.創(chuàng)建Map集合

和Set集合一樣，Map構(gòu)造函數(shù)可以添加一個(gè)可迭代的對(duì)象(比如數(shù)組)當(dāng)作參數(shù)，快速創(chuàng)建集合

let map = new Map([["name", "james"], ["age", 27]]);

3.forEach方法

和Set中的forEach方法一樣能加入3個(gè)參數(shù)（value, key, ownerMap）

let map = new Map([["name", "kobe"], ["age", 37]]);
map.forEach((v, k, m) => console.log(k + ":" + "v"));

// output
name:kobe
age:37

4.WeakMap

和Map的區(qū)別：

1. 只能使用對(duì)象作為keys,使用其他類型會(huì)拋出錯(cuò)誤;
   
2. 不存在clear()方法，不具備可迭代的能力， forEach(), for...of...等不能使用；
   
3. 不存在size屬性，因此無法判斷WeakMap是否為空

let key1 = {},
    key2 = {};
let weakMap = new WeakMap([[key1, "hello"], [key2, 42]]);
weakMap.has(key1); // true
weakMap.get(key1); // "hello"

weakMap.delete(key2); // true

什么時(shí)候使用WeakMap呢？

1. 只使用對(duì)象作為鍵時(shí)(only using object keys),WeakMap是最好的選擇;
   
2. WeakMap能優(yōu)化內(nèi)存使用，避免內(nèi)存泄漏，但當(dāng)要使用forEach(), clear(), size等屬性方法時(shí)，最后選擇使用Map;
   
3. 當(dāng)要使用非對(duì)象鍵(nonobject keys)， Map則是唯一的選擇

總結(jié)

??????通過這一章我們學(xué)習(xí)了ES6新添加的兩個(gè)集合類型，Set多用于判斷一個(gè)集合中是否存在某個(gè)值，而Map則多用于存儲(chǔ)鍵值對(duì)數(shù)據(jù)，然后取回?cái)?shù)據(jù)進(jìn)行使用；
??????同時(shí)介紹了WeakSet和WeakMap另外兩個(gè)集合，這兩個(gè)集合多用于優(yōu)化內(nèi)存，避免內(nèi)存泄漏等，這兩個(gè)集合相對(duì)于Set和Map，有些方法和屬性不存在，使用時(shí)應(yīng)當(dāng)注意。