1、Set
1.1概念:ES6提供了新的數(shù)據(jù)結構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結構假如成員,輸出為: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ù)組重復成員的方法
// 去除數(shù)組的重復成員 [...new Set(array)]
向set里加入值的時候,不會發(fā)生類型轉化,所以5和“5”是兩個不同的值,Set內部判斷兩個值是否不同,使用的算法叫做“Same-value equality” 類似于精確相等運算符(===),而區(qū)別是,NaN等于自身,而精確相等運算符認為NaN不等于自身。此外兩個對象總是不相等。
1.2Set實例的屬性和方法
Set 結構的實例有以下屬性。
Set.prototype.constructor:構造函數(shù),默認就是Set函數(shù)。
Set.prototype.size:返回Set實例的成員總數(shù)。
Set 實例的方法分為兩大類:操作方法(用于操作數(shù)據(jù))和遍歷方法(用于遍歷成員)。下面先介紹四個操作方法。
add(value):添加某個值,返回Set結構本身。
delete(value):刪除某個值,返回一個布爾值,表示刪除是否成功。
has(value):返回一個布爾值,表示該值是否為Set的成員。
clear():清除所有成員,沒有返回值。
下面是一個對比,判斷是否包括在一個鍵上面,Object結構和Set結構的寫法不同。
對象的寫法
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結構轉為數(shù)組
const items = new Set([1,2,3,4,5]);
const array = Array.from(items);
這也就提供了去除數(shù)組重復成員的另一種方法。
function dedupe(array){ return Array.from(new Set(array)); } dedupe([1,1,2,3]) //[1,2,3]
1.3遍歷操作
Set結構的實例有死歌遍歷方法,可以用于遍歷成員。
Set的遍歷順序就是插入順序
.keys():返回鍵名的遍歷器
.values():返回鍵值的遍歷器
.entries():返回鍵值對的遍歷器
.forEach():使用回調函數(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
遍歷的應用
擴展運算符(...)內部使用 for...of循環(huán),所以也可以用于Set結構
let set = new Set(['red', 'green', 'blue']); let arr = [...set]; // ['red', 'green', 'blue']
擴展運算符和 Set 結構相結合,就可以去除數(shù)組的重復成員。
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結構:{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可以很容易地實現(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結構,目前沒有直接的方法,但是有兩種變通方法。一種是利用原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
2、WeakSet
2.1概念
WeakSet結構與Set類似,也是不重復的值的集合,但是,它與Set有兩個區(qū)別。首先,WeakSet的成員只能是對象,而不能是其他類型的值,其次,WeakSet中的對象都是弱引用,即垃圾回收機制不考慮 WeakSet 對該對象的引用
垃圾回收機制依賴引用技術
WeakSet是一個構造函數(shù),可以使用new命令,創(chuàng)建WeakSet數(shù)據(jù)結構,
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 結構有以下三個方法。
WeakSet.prototype.add(value):向 WeakSet 實例添加一個新成員。
WeakSet.prototype.delete(value):清除 WeakSet 實例的指定成員。
WeakSet.prototype.has(value):返回一個布爾值,表示某個值是否在
3.3
WeakSet 沒有size屬性,沒有辦法遍歷它的成員。因此forEach的方法也用不了。
WeakSet 的一個用處,是儲存 DOM 節(jié)點,而不用擔心這些節(jié)點從文檔移除時,會引發(fā)內存泄漏。
WeakSet 例子:
const foos = new WeakSet()
class Foo{ constructor(){ foos.add(this) } method(){ if(!foos.has(this)){ throw new TypeError('Foo.prototype.method 只能在Foo的實例上調用'); } } }
上面代碼保證了Foo的實例方法,只能在Foo的實例上調用。這里使用WeakSet的好處是,foos對實例的引用,不會被記入內存回收機制,所以刪除實例的時候,不用考慮foos,也不會出現(xiàn)內存泄露。
3、Map
3.1概念
Object 結構提供了“字符串—值”的對應,Map結構提供了“值—值”的對應,是一種更完善的 Hash 結構實現(xiàn)。如果你需要“鍵值對”的數(shù)據(jù)結構,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ù)結構都可以當做Map構造函數(shù)的參數(shù),這就是說,Set和Map都可以用來生成新的Map。
const set = new Set([ ['foo', 1], ['bar', 2] ]); const m1 = new Map(set); m1.get('foo') // 1
上面代碼中,我們分別使用 Set 對象和 Map 對象,當作Map構造函數(shù)的參數(shù),結果都生成了新的 Map 對象
3.3實例的屬性和操作方法
Map結構的實例有一下屬性和操作方法
size
set(key,value)
get(key),
has(key)
delete(key)
clear()
3.4遍歷方法(Map的遍歷順序就是插入的順序)
Map結構提供三個遍歷起生成函數(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結構轉為數(shù)組結構,比較快速的方法是使用擴展運算符(...)
const map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]);
[...map.keys()]
[...map.values()]
[...map.entries()]
[...map]
結合數(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 結構 {1 => 'a', 2 => 'b'}
const map2 = new Map( [...map0].map(([k, v]) => [k * 2, '_' + v]) ); // 產(chǎn)生 Map 結構 {2 => '_a', 4 => '_b', 6 => '_c'}
3.6、與其他數(shù)據(jù)結構的互相轉換
3.6.1 Map轉為數(shù)組
使用擴展運算符,|| Array.form
3.6.2 數(shù)組 轉為 Map
將數(shù)組傳入Map構造函數(shù),就可以轉為Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
3.6.3 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)
3.6.4 對象轉為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轉為JSON
Map 轉為 JSON 要區(qū)分兩種情況。一種情況是,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 的鍵名有非字符串,這時可以選擇轉為數(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轉為Map
JSON 轉為 Map,正常情況下,所有鍵名都是字符串。
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
但是,有一種特殊情況,整個 JSON 就是一個數(shù)組,且每個數(shù)組成員本身,又是一個有兩個成員的數(shù)組。這時,它可以一一對應地轉為Map。這往往是數(shù)組轉為 JSON 的逆操作。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
4 WeakMap
4.1概念
WeakMap結構與Map結構類似,也是用于生成鍵值對的。
4.2區(qū)別
首先,WeakMap只接受對象作為鍵名(null除外),不接受其他類型的值作為鍵名
其次,WeakMap的鍵名所指向的對象,不計入垃圾回收機制
4.3 WeakMap語法
WeakMap 與 Map 在 API 上的區(qū)別主要是兩個,一是沒有遍歷操作(即沒有key()、values()和entries()方法),也沒有size屬性。因為沒有辦法列出所有鍵名,這個鍵名是否存在完全不可預測,跟垃圾回收機制是否運行相關。二是無法清空,即不支持clear方法。因此,WeakMap只有四個方法可用:get()、set()、has()、delete()。
以上所有的知識點和例子,均來自于阮一峰老師的書籍[ECMAScript 6 入門]