ECMAScript6中Set/WeakSet詳解
ES6里加入了一個(gè)新數(shù)據(jù)解構(gòu)Set，和Java的Set一樣，它里面不存放重復(fù)的元素。Set實(shí)現(xiàn)為一個(gè)類，使用時(shí)需要先new。
var s1 = new Set()
s1.add(1)
s1.add(2)
s1.add(3)
s1.add(1)
var s2 = new Set()
s2.add('a')
s2.add('a')
// 輸出1，2, 3
for (var i of s1 ) {
console.log(i)
}
// 輸出a
for (var i of s2 ) {
console.log(i)
}
上面用Set的add方法添加元素，重復(fù)添加的，不會(huì)存進(jìn)去。
Set構(gòu)造器還可以接受數(shù)組作為參數(shù)傳入
var s3 = new Set([1,2,3,1]) s3.size // 3
可以看到重復(fù)的數(shù)字1依然沒(méi)有放進(jìn)去，另外取Set的長(zhǎng)度使用size，不是length。
需要注意的是對(duì)于{}或[]，它們是兩個(gè)同的對(duì)象
var s4 = new Set()
s4.add({})
s4.add({})
s4.size // 2
一、遍歷Set （for of）
var s1 = new Set()
s1.add(1)
s1.add(2)
s1.add(3)
// 輸出1，2, 3
for (var i of s1) {
console.log(i)
}
二、把Set轉(zhuǎn)成數(shù)組
var s1 = new Set() s1.add(1) s1.add(2) // toArray var a1 = Array.from(s1) Array.isArray(a1) // true // or var a1 = [...new Set(s1)]
三、利用Set給數(shù)組去重
function distinct(arr) {
return Array.from(new Set(arr))
// return [...new Set(arr)]
}
如
Set的屬性
constructor
size
Set的方法
has(val) 判斷是否存在該元素
add(val) 添加元素
delete(val) 刪除元素
clear 刪除所有元素
keys
values
entries
forEach 遍歷元素
map
filter
四、WeakSet
WeakSet和Set一樣都不存儲(chǔ)重復(fù)的元素，但有一些不同點(diǎn)
1. 只存儲(chǔ)對(duì)象類型元素
ws = new WeakSet() ws.add(1)
FF下報(bào)錯(cuò)如下
2. 只有add/delete/clear/has三個(gè)方法，不能遍歷，沒(méi)有size屬性等
ws = new WeakSet() ws.size // undefined ws.forEach // undefined
MDN的解釋
WeakSet 對(duì)象中存儲(chǔ)的對(duì)象值都是被弱引用的, 如果沒(méi)有其他的變量或?qū)傩砸眠@個(gè)對(duì)象值, 則這個(gè)對(duì)象值會(huì)被當(dāng)成垃圾回收掉. 正因?yàn)檫@樣, WeakSet 對(duì)象是無(wú)法被枚舉的, 沒(méi)有辦法拿到它包含的所有元素
WeakSet主要用來(lái)儲(chǔ)存DOM節(jié)點(diǎn)，當(dāng)這些節(jié)點(diǎn)從文檔移除時(shí)，不會(huì)引發(fā)內(nèi)存泄漏。
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
- ECMAScript6 新特性范例大全
- ECMAScript6輪播圖實(shí)踐知識(shí)總結(jié)
- ECMAScript6快速入手攻略
- ECMAScript6中Map/WeakMap詳解
- ECMAScript6塊級(jí)作用域及新變量聲明（let）
- ECMAScript6新增值比較函數(shù)Object.is
- ECMAScript6函數(shù)剩余參數(shù)（Rest Parameters）
- ECMAScript6函數(shù)默認(rèn)參數(shù)
- ECMAScript6的新特性箭頭函數(shù)（Arrow Function）詳細(xì)介紹
- ECMAScript6--解構(gòu)
相關(guān)文章
前端JavaScript數(shù)組方法總結(jié)(非常詳細(xì)!)
這篇文章主要介紹了JavaScript中數(shù)組對(duì)象的常用方法,包括數(shù)組的基本操作、查找、過(guò)濾、排序、遍歷等方法,并提供了每個(gè)方法的語(yǔ)法和示例,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
工作需要寫的一個(gè)js拖拽組件，需要的朋友可以參考下代碼。2011-07-07
uniapp微信小程序獲取當(dāng)前定位城市信息的實(shí)例代碼
因?yàn)閡niapp官網(wǎng)文檔的定位功能,只能提供經(jīng)緯度,如果要獲取當(dāng)前具體的位置信息,必須要調(diào)取官方的地圖方法,然后在地圖上選點(diǎn),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前定位城市信息的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章介紹了JS檢測(cè)圖片大小的實(shí)例，有需要的朋友可以參考一下2013-08-08
在JavaScript中如何訪問(wèn)暫未存在的嵌套對(duì)象
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何訪問(wèn)暫未存在的嵌套對(duì)象的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Javascript實(shí)現(xiàn)的StopWatch功能示例
這篇文章主要介紹了Javascript實(shí)現(xiàn)的StopWatch功能,結(jié)合具體實(shí)例形式分析了javascript自定義StopWatch實(shí)現(xiàn)測(cè)試運(yùn)行時(shí)間功能的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了javascript中常用的字符串函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
JavaScript動(dòng)態(tài)創(chuàng)建div等元素實(shí)例講解
這篇文章主要介紹了JavaScript動(dòng)態(tài)創(chuàng)建div等元素實(shí)例，2016-01-01
小程序：授權(quán)、登錄、session_key、unionId的詳解
這篇文章主要介紹了小程序：授權(quán)、登錄、session_key、unionId的詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript原生數(shù)組函數(shù)實(shí)例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實(shí)例匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10