ECMAScript6中Set/WeakSet詳解
ES6里加入了一個新數(shù)據(jù)解構(gòu)Set，和Java的Set一樣，它里面不存放重復(fù)的元素。Set實現(xiàn)為一個類，使用時需要先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ù)添加的，不會存進(jìn)去。
Set構(gòu)造器還可以接受數(shù)組作為參數(shù)傳入
var s3 = new Set([1,2,3,1]) s3.size // 3
可以看到重復(fù)的數(shù)字1依然沒有放進(jìn)去，另外取Set的長度使用size，不是length。
需要注意的是對于{}或[]，它們是兩個同的對象
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一樣都不存儲重復(fù)的元素，但有一些不同點
1. 只存儲對象類型元素
ws = new WeakSet() ws.add(1)
FF下報錯如下
2. 只有add/delete/clear/has三個方法，不能遍歷，沒有size屬性等
ws = new WeakSet() ws.size // undefined ws.forEach // undefined
MDN的解釋
WeakSet 對象中存儲的對象值都是被弱引用的, 如果沒有其他的變量或?qū)傩砸眠@個對象值, 則這個對象值會被當(dāng)成垃圾回收掉. 正因為這樣, WeakSet 對象是無法被枚舉的, 沒有辦法拿到它包含的所有元素
WeakSet主要用來儲存DOM節(jié)點，當(dāng)這些節(jié)點從文檔移除時，不會引發(fā)內(nèi)存泄漏。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
前端JavaScript數(shù)組方法總結(jié)(非常詳細(xì)!)
這篇文章主要介紹了JavaScript中數(shù)組對象的常用方法,包括數(shù)組的基本操作、查找、過濾、排序、遍歷等方法,并提供了每個方法的語法和示例,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
工作需要寫的一個js拖拽組件，需要的朋友可以參考下代碼。2011-07-07
uniapp微信小程序獲取當(dāng)前定位城市信息的實例代碼
因為uniapp官網(wǎng)文檔的定位功能,只能提供經(jīng)緯度,如果要獲取當(dāng)前具體的位置信息,必須要調(diào)取官方的地圖方法,然后在地圖上選點,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前定位城市信息的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章介紹了JS檢測圖片大小的實例，有需要的朋友可以參考一下2013-08-08
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何訪問暫未存在的嵌套對象的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Javascript實現(xiàn)的StopWatch功能示例
這篇文章主要介紹了Javascript實現(xiàn)的StopWatch功能,結(jié)合具體實例形式分析了javascript自定義StopWatch實現(xiàn)測試運行時間功能的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了javascript中常用的字符串函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
JavaScript動態(tài)創(chuàng)建div等元素實例講解
這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建div等元素實例，2016-01-01
小程序：授權(quán)、登錄、session_key、unionId的詳解
這篇文章主要介紹了小程序：授權(quán)、登錄、session_key、unionId的詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript原生數(shù)組函數(shù)實例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實例匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10