ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法分析
本文實(shí)例講述了ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法。分享給大家供大家參考,具體如下:
新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet
1. Set
Set類似于數(shù)據(jù),但是成員值都是唯一的。生成Set的方式如下。
var s = new Set(); [1,1,3,3,5,5].map( x => s.add(x) ); console.log(s); //Set {1, 3, 5}
沒(méi)有重復(fù)值喲,如果面試官再讓你編寫數(shù)組去重的函數(shù)是不是簡(jiǎn)單多了?;蛘吣憧梢赃@樣寫。
var set = new Set( [2,2,4,4,6,6] ); //Set {2, 4, 6} console.log(set);
其實(shí),Set作為構(gòu)造函數(shù)使用時(shí),接受的參數(shù)不僅可以是數(shù)組,任何類數(shù)組的對(duì)象也可以。Set的成員可以是對(duì)象,只是每個(gè)對(duì)象唯一。
那么,我們?nèi)绾尾倏vSet呢。
s.add(val); //為s添加val,返回s s.delete(val); //刪除val,返回表示成功與否的布爾值 s.has(val); //返回表示s是否擁有成員val的布爾值 s.clear(); //清除所有成員
map與filter方法可以作用于數(shù)組,也可以用于Set(見第一個(gè)代碼塊)。
那么,我們?nèi)绾伪闅vSet呢。
依然是 keys() , values() , entries() , forEach() . 舉例如下(默認(rèn)情況下Set的鍵與值相同):
var s = new Set(); var ul = document.getElementsByTagName('ul'); [1,1,3,3,5,5].map( x => s.add(x) ); for ( let key of s.keys() ){ console.log(key); //1 , 3, 5 } for ( let val of s.values() ){ console.log(val); //1, 3,5 } for ( let item of s.entries() ){ console.log(item[0],item[1]); // 1 1 , 3 3, 5 5 } for ( let [key,val] of s.entries() ){ console.log(key,val); // 1 1 , 3 3, 5 5 } s.forEach( function( val , key , ul ){ console.log( this ); //ul console.log( val , key); } , ul );
可以使用...擴(kuò)展操作符把Set轉(zhuǎn)換成數(shù)組。
2.WeakSet
WeakSet與Set類似,也是不重復(fù)的集合。區(qū)別在于:WeakSet的成員只能是對(duì)象;WeakSet中的對(duì)象是弱引用,即垃圾回收機(jī)制不考慮WeakSet對(duì)該對(duì)象的引用。當(dāng)其他變量不再引用某對(duì)象,其將被垃圾回收機(jī)制回收,哪怕這個(gè)對(duì)象被WeakSet引用。這意味著,WeakSet的成員是無(wú)法被引用的,無(wú)法遍歷WeakSet。WeakSet只有add、delete和has三個(gè)方法。注意:WeakSet沒(méi)有size屬性,也沒(méi)有forEach方法。
對(duì)于WeakSet不能被遍歷,可以這樣解釋。因?yàn)槠涑蓡T都是弱引用,隨時(shí)可能消失,遍歷機(jī)制無(wú)法保證其成員一直存在。
那你可能問(wèn),WeakSet用來(lái)做什么,答,儲(chǔ)存DOM節(jié)點(diǎn),這樣移除DOM時(shí)就可以不用擔(dān)心內(nèi)存泄漏了。
希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Javascript es7中比較實(shí)用的兩個(gè)方法示例
這篇文章主要給大家分享了關(guān)于Javascript es7中比較實(shí)用的兩個(gè)方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-07-07JS實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能案例分析【親測(cè)有效】
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能,對(duì)比分析了同源與不同源兩種解決方案,并以實(shí)際案例形式分析了不同源情況下針對(duì)文件點(diǎn)擊下載的具體實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-04-04獲取div編輯框,textarea,input text的光標(biāo)位置 兼容IE,F(xiàn)F和Chrome的方法介紹
獲取div編輯框,textarea,input text的光標(biāo)位置 兼容IE,F(xiàn)F和Chrome的方法介紹,有需求的朋友可以參考2012-11-11JavaScript中boolean類型之三種情景實(shí)例代碼
下面小編就為大家?guī)?lái)一篇JavaScript中boolean類型之三種情景實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11JavaScript數(shù)值數(shù)組排序示例分享
在Javascript中我們已知有兩個(gè)可以直接用來(lái)進(jìn)行數(shù)組排序的方法reverse()和sort()。其中reverse()是按照反向?qū)τ跀?shù)組進(jìn)行排序的,而sort()是按照正向進(jìn)行排序的。2014-05-05BootStrap中的模態(tài)框(modal,彈出層)功能示例代碼
bootstrap中的模態(tài)框(modal),不同于Tooltips,模態(tài)框以彈出對(duì)話框的形式出現(xiàn),具有最小和最實(shí)用的功能集。這篇文章主要介紹了BootStrap中的模態(tài)框(modal,彈出層),需要的朋友可以參考下2018-11-11