ES6的Set和Map 以及WeakSet和WeakMap

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 入門]

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容