ES6中Set與WeakSet集合的深入講解

更新時間：2021年07月05日 12:15:04 作者：梁同學de自言自語

這篇文章主要給大家介紹了關于ES6中Set與WeakSet集合的相關資料,Set是ES6給開發(fā)者帶來的一種新的數(shù)據(jù)結構,你可以理解為值的集合,WeakSet結構同樣不會存儲重復的值,但它的成員必須是對象類型的值,需要的朋友可以參考下

Set是值永不重復的特殊集合

每天都用數(shù)組，有沒有過一個Moment，擔心插入了重復的值？使用Set集合吧！Set擁有特殊的數(shù)據(jù)結構，保證插入的值永遠不會重復。

Set集合基礎API

通過Set.prototype.constructor 構造函數(shù)創(chuàng)建Set實例

/*
 * 僅實例化：調用構造函數(shù)，不傳參數(shù)
 */ 
let empty_set = new Set()    


/*
 * 實例化同時初始化：傳入任意iterate對象，將其轉換成Set集合
 */ 
let transfer_set4arr = new Set([1, 2, 3])
// 返回Set(3) {1, 2, 3}

let transfer_set4string = new Set("huilin")
// 返回Set(5) {"h", "u", "i", "l", "n"}

let transfer_set4set = new Set(new Set([5, 6]))
// 返回Set(2) { 5, 6 }

訪問 Set.prototype.size屬性，返回集合中元素的個數(shù)

console.log(empty_set.size) // 0
console.log(transfer_set4arr.size)  // 3

調用 Set.prototype.has(value) 方法，判斷元素是否存在

// 相比起Array.includes()，Set.has()性能更高，因為專門對成員測試進行了優(yōu)化
console.log(empty_set.has(1))   // false
console.log(transfer_set4arr.has('h')) // true

關于唯一值的判斷

Set集合為確保值的唯一性，使用Object.is(value1,value2)進行判斷，而不是通過===(恒等符號)符號來判斷的，因為恒等判斷會將兩邊的變量進行強制類型轉換。
比如，兩個變量的值均為NaN，或者0和-0，用JS判斷是不相等的，但Object.is()認為是同一個只，因此不能存入Set集合中。

想了解更多關于Object.is()，請?zhí)D查看：developer.mozilla.org/zh-CN/docs/…

let n1 = NaN
let n2 = NaN

console.log(n1 === n2)  
// 恒等符號判斷兩者不一致，輸出false

console.log(Object.is(n1,n2)) 
// 但Object.is()判斷兩者是相同的，輸出false

// Set集合不允許將兩個NaN放入集合
let set = new Set()
set.add(n1).add(n2)
console.log(set.size)   
// size: 1

而面對復雜數(shù)據(jù)類型時，主要通過對象的引用進行判斷。引用不一致，即便數(shù)據(jù)結構一致，也認為只不相同，因此能存入Set集合。

let same_value_set = new Set();
// 先存入一個對象
same_value_set.add({num: 0});
// 再存入一個結構一致的新對象
let obj = {num: 0};
same_value_set.add(obj);
// 都能存入成功
console.log(same_value_set.size); // 2

調用Set.prototype.add(value) 方法，向集合追加數(shù)據(jù)

// add()方法可以追加任意類型的數(shù)據(jù)，不論是原始值或者是對象引用

let set1 = new Set()
// 由于add()方法始終返回當前實例的引用，所以進行鏈式調用
set1.add(1).add(2).add(3)
console.log(set1) // Set(3) {1, 2, 3}

// 注意：當add()傳入數(shù)組時，Set會將數(shù)組實例插入集合，而不是數(shù)組內的元素
set1.add([4, 5])
console.log(set1) // Set(4) {1, 2, 3, [4, 5]}

調用Set.prototype.delete(value) 方法，移除集合中的元素

// delete()方法返回移除操作是否成功，與.has()方法一樣
let success = set1.delete(1)
console.log(success)
// true

調用Set.prototype.clear() 方法，清空集合

let num_set = new Set([1, 6, 3])
console.log(num_set)
// Set(3) { 1, 6, 3 }

set1.clear()
console.log(num_set)
// Set(0) {}

Set集合遍歷的3種方式

由于集合沒有下標/索引，通常被認為是“無序集合”。但JavaScript會記住元素插入的順序，所以遍歷的時候也按順序對元素進行迭代。

直接遍歷Set集合

let set = new Set([1, 2, 3, 4, 5])
for(let item of set){
    console.log(item)
}
// 依次輸出：1 2 3 4 5

創(chuàng)建迭代器進行遍歷

/*
 * 創(chuàng)建迭代器的有三種方式
 * Set.prototype.entries()
 * Set.prototype.keys()
 * Set.prototype.values()
 */ 

// Set集合只有value而沒有key，但為了使得和遍歷Map對象相似，Set.entries()創(chuàng)建新的Iterator對象時，每一項的鍵和值都相等，即[value,value]
for(let [key,value] of set.entries()){
    console.log(value)
}
// 依次輸出：1 2 3 4 5

// Set.keys()創(chuàng)建新的Iterator對象，返回每一項值
for(let key of set.keys()){
    console.log(key)
}
// 依次輸出：1 2 3 4 5

// Set.values()和Set.keys()一致，返回每一項的值
for(let value of set.values()){
    console.log(value)
}
// 依次輸出：1 2 3 4 5

調用Set.prototype.forEach(callbackFn)方法遍歷

// forEach(callbackFn) 按照插入順序調用callbackFn，取出每項值
set.forEach(item => {
    console.log(item)
})
// 依次輸出：1 2 3 4 5

Set集合案例實踐

Set集合與Array數(shù)組之間的轉換

/*
 * Set轉Array
 */
let set1 = new Set([1, 2, 3])
// Array.from()方法
let arr1 = Array.from(set1)  
// 擴展運算符
let arr2 = [...set1]  

/*
 * Array轉Set
 */
 // 利用Set構造函數(shù)
let set = new Set(array)

單個數(shù)組去重

let set = new Set([1, 2, 4, 4, 2, 5])
console.log(set)
// Set(4) { 1, 2, 4, 5 }

多個數(shù)組合并去重

let arr1 = [1, 2, 4]
let arr2 = [1, 5, 6]

// 利用Set集合的特性，集合內的元素都是唯一的
let result = new Set([...set1, ...set2]) 
console.log(result)
// Set(5) { 1, 2, 4, 5, 6 }

獲取交集(重復的元素)

let set1 = new Set([1, 2, 4])
let set2 = new Set([1, 5, 6])

// 返回set1和set2都存在的元素
let result = new Set([...set1].filter(x => set2.has(x))) 
console.log(result)
// Set(1) { 1 }

判斷是否有交集(重復的元素)

let set1 = new Set([1, 2, 4])
let set2 = new Set([1, 5, 6])

function isMixed(set, subset) {
    for (let elem of subset) {
        if (set.has(elem)) {
            return true;
        }
    }
    return false;
}

console.log(isMixed(set1, set2))
// true

獲取差集：只返回重復

let set1 = new Set([1, 2, 4])
let set2 = new Set([1, 5, 6])

function difference(setA, setB) {
    let result = new Set()
    for (let elem of setB) {
        if(setA.has(elem)){
            result.add(elem)
        }
    }
    return result;
}

console.log(difference(set1, set2))

WeakSet“弱”在哪里？

除了Set集合外，ES6還提供了WeakSet和WeakMap。既然集合的名字都叫“Weak(弱)的集合”了，究竟它“弱”在哪里呢？

弱功能

WeakSet不允許插入原始值，僅支持對象的引用；

let val1 = {id: 1},
    val2 = {id: 2}

let ws = new WeakSet()

// 和Set集合一樣，WeakSet的值也不重復，同時add()也返回集合實例，所以可以鏈式操作
ws.add(val1).add(val1).add(val2)

// 不允許插入基礎數(shù)據(jù)類型
ws.add(3)
// 報錯：TypeError：Invalid value used in WeakSet

// 但可以先包裝成對象后再插入
let val3 = new Number(3)
ws.add(val3)
console.log(ws.has(val3))
// 輸出：true

WeakSet僅實現(xiàn)了add()、has()、delete()三個操作方法；
WeakSet不允許遍歷，也沒有size或者length屬性；

弱引用

要說弱引用，先看看什么是強引用：

// 聲明一個對象
let handsome = {
    name: 'huilin',
    age: 30
}

// 放入數(shù)組
let arr = [1, handsome, 2]
console.log('release before arr length', arr.length) // 3

// 放入Map
let user = {
    oid: 10001,
    classify: 'Chinese',
    staffReference: handsome
}
console.log('release before map length', Object.keys(user).length) // 3

console.log('----')

// 突然把對象置為null
handsome = null
// 強引用的容器中，對象仍然存在沒有被回收
console.log('release after arr length', arr.length) // 3
console.log(arr[1]) // { name: 'huilin', age: 30 }
console.log('release after map length', Object.keys(user).length) // 3
console.log(user.staffReference) // { name: 'huilin', age: 30 }

從測試代碼看出，除非容器銷毀，否則引用的對象一直沒有被回收。而所謂弱引用，就是希望容器是根據(jù)元素自動伸縮的，一旦對象為null，容器中的引用也跟著回收。

let obj1 = {
    name: 'huilin',
    age: 30
}

let obj2 = {
    name: 'cc',
    age: 29
}

let ws1 = new WeakSet()
ws1.add(obj1).add(obj2)
console.log(ws1.has(obj1))  // true

// 不管是從容器操作元素
ws1.delete(obj1)
console.log(ws1.has(obj1))  // false

// 或者是對象自己置為null，都會自動回收
obj2 = null
console.log(ws1.has(obj2))  // false

Reference

zh.javascript.info/map-set
es6.ruanyifeng.com/#docs/set-m…

總結

到此這篇關于ES6中Set與WeakSet集合的文章就介紹到這了,更多相關ES6 Set與WeakSet集合內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Javascript實現(xiàn)鼠標點擊冒泡特效
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)鼠標點擊冒泡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
js模擬畫筆效果
非常不錯的效果，模板畫筆，代碼相對較少
2008-10-10
淺談JavaScript中面向對象的的深拷貝和淺拷貝
下面小編就為大家?guī)硪黄獪\談JavaScript中面向對象的的深拷貝和淺拷貝。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
詳解JavaScript數(shù)組的操作大全
這篇文章主要給大家介紹js數(shù)組的操作，數(shù)組的創(chuàng)建，數(shù)組元素的發(fā)那個吻，數(shù)組元素的添加，數(shù)組元素的刪除，數(shù)組的截取和合并，數(shù)組的拷貝，數(shù)組元素的排序，數(shù)組元素的字符串化等知識，對js數(shù)組的操作感興趣的朋友可以參考下本篇文章
2015-10-10
很棒的一組js圖片輪播特效
這篇文章主要為大家分享了一款很棒的js組輪播特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
微信小程序自定義導航欄
這篇文章主要為大家詳細介紹了微信小程序自定義導航欄，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
詳解小程序毫秒級倒計時（適用于拼團秒殺功能）
這篇文章主要介紹了小程序毫秒級倒計時，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
js下獲取div中的數(shù)據(jù)的原理分析
最近用js寫了一個計算器的頁面?；旧鲜褂玫搅?，ul li的幾點用法。用來布局，并且創(chuàng)造出了很不錯的鼠標懸停效果。
2010-04-04
js逆向解密之網(wǎng)絡爬蟲
在本篇內容里小編給大家整理的是關于js逆向解密之網(wǎng)絡爬蟲的相關知識點內容，需要的朋友們參考下。
2019-05-05
JS request函數(shù) 用來獲取url參數(shù)
項目中經(jīng)常會遇到這種問題下面代碼解決問題！
2010-05-05