Sets and Maps
??????我們知道ES6之前，array是唯一的集合類型，數(shù)組是數(shù)字索引（numeric index）的鍵值對組合，當我們需要非數(shù)字索引的鍵值對時，必須使用非數(shù)組對象來模擬這種情況，ES6新添加了Sets和Maps這兩種集合類型。
??????Set是一系列值的集合，這些值不能重復，內部使用 Object.is() 來判斷兩個值是否相同，一般我們不訪問set中的單個值，而是檢查是否存在某個值；Map是一系列鍵(keys)和相對應值(values)的集合，多用于數(shù)據(jù)緩存，該數(shù)據(jù)稍后取回。下面從幾個方面來介紹這兩個新集合類型：
- ES6之前實現(xiàn)sets和maps的workaround;
- Set & WeakSet;
- Map & WeakMap;
一.模擬Sets,Maps
1.模擬set 和 map
使用對象屬性來模擬set,然后判斷該屬性是否存在
var set = Object.create(null); // 使用null作為原型，確保沒有繼承的屬性
set.foo = true;
// 檢測存在性
if (set.foo) {
// code to execute
}
一個對象用作set 還是 map 唯一的不同之處在于值得存儲方式不同，模擬map
var map = Object.create(null);
map.foo = "bar";
// 取回值
var value = map.foo;
console.log(value); // "bar"
2.模擬會出現(xiàn)的問題
??????我們知道對象只能使用字符串作為keys(ES6新添加symbols作為keys),所有的其他類型當作keys,都會被轉換成字符串類型。
比如 5 轉換成 "5", 所有的對象類型 都轉換成 "[object Object]" (obj.toString()),這樣很難使用對象當作keys
var map1 = Object.create(null);
map1[5] = "foo";
map1["5"]; // "foo" 數(shù)字鍵轉換成字符串
-----------------
var map2 = Object.create(null);
var key1 = {};
var key2 = {};
map2[key1] = "foo";
map2[key2]; // "foo" 對象類型都轉換成字符串"[object Object]"
set檢測：
var set = Object.create(null);
set.count = 1;
if (set.count) { //檢測count是否存在，還是 count===0 的情況，比較模糊
// ...
}
二.Sets & WeakSets
集合中不存在重復的值(duplicate values),通過Object.is()判斷兩個值是否相同
1.Set方法屬性
- add(value): 添加到set集合中
- delete(value): 刪除value，刪除成功返回true,否則false
- has(value): 判斷是否存在該value值，存在返回true，不存在則返回false
- clear(): 清空set中所有值
- size: set集合中的值個數(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構造器中可以傳入一個可迭代對象作為參數(shù)（比如數(shù)組），重復的值將會被去除
var mySet = new Set([1, 2, 2, 4, 4, 5]);
mySet.size; // 4 Set {1, 2, 4, 5}
可以利用這一特性將數(shù)組中重復的值去除
var arr = [1, 2, 2, 4, 4, 5];
var set = new Set(arr); // Set {1, 2, 4, 5}
// 利用rest items將set集合轉變?yōu)樾聰?shù)組
var arr1 = [...set]; // arr1 [1, 2, 4, 5]
可以封裝這個方法
function eliminateDuplicates(arr) {
return [...new Set(arr)];
}
3.forEach方法
forEach方法一般有3個參數(shù)
- value
- key(set中我們將鍵和值等同起來，即值同時也是鍵)
- 集合自身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個參數(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， 消除不再引用的對象，主要是性能方面的關系，和Set比較起來主要有以下幾個方面區(qū)別：
- WeakSet中只能存儲對象， 不能存儲primitive類型值；
- add(), delete(), has()參數(shù)中只能傳入引用類型參數(shù)，傳入原始類型會拋出異常；
- WeakSet沒有暴露任何迭代器，for...of..., keys(), values(), forEach(), clear()方法均不能使用；
- 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
// 移除對key1,key2的引用，同時也會從 weak set中移除
key1 = null;
key2 = null;
Maps & WeakMaps
maps通過鍵值對來存儲數(shù)據(jù)，鍵keys可以為任意類型
1.maps方法屬性
- set(key, value): 添加鍵值對;
- get(key): 獲取key對應的值, 若不存在返回undefined;
- delete(key): 刪除鍵值對;
- has(key): 判斷是否存在該鍵;
- clear(): 清空集合;
- size: 集合的長度
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構造函數(shù)可以添加一個可迭代的對象(比如數(shù)組)當作參數(shù)，快速創(chuàng)建集合
let map = new Map([["name", "james"], ["age", 27]]);
3.forEach方法
和Set中的forEach方法一樣能加入3個參數(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ū)別：
-
只能使用對象作為keys,使用其他類型會拋出錯誤;
- 不存在clear()方法，不具備可迭代的能力， forEach(), for...of...等不能使用；
- 不存在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
什么時候使用WeakMap呢？
- 只使用對象作為鍵時(only using object keys),WeakMap是最好的選擇;
- WeakMap能優(yōu)化內存使用，避免內存泄漏，但當要使用forEach(), clear(), size等屬性方法時，最后選擇使用Map;
- 當要使用非對象鍵(nonobject keys)， Map則是唯一的選擇
總結
??????通過這一章我們學習了ES6新添加的兩個集合類型，Set多用于判斷一個集合中是否存在某個值，而Map則多用于存儲鍵值對數(shù)據(jù)，然后取回數(shù)據(jù)進行使用；
??????同時介紹了WeakSet和WeakMap另外兩個集合，這兩個集合多用于優(yōu)化內存，避免內存泄漏等，這兩個集合相對于Set和Map，有些方法和屬性不存在，使用時應當注意。
