ECMAScript6中Set/WeakSet詳解

ECMAScript6中Set/WeakSet詳解

ES6里加入了一個新資料解構Set,和Java的Set一樣,它裡面不存放重複的元素。Set實現為一個類,使用時需要先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方法新增元素,重複新增的,不會存進去。

Set構造器還可以接受陣列作為引數傳入


var s3 = new Set([1,2,3,1])
s3.size // 3

可以看到重複的數字1依然沒有放進去,另外取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轉成陣列


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給陣列去重


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一樣都不儲存重複的元素,但有一些不同點

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 物件中儲存的物件值都是被弱引用的, 如果沒有其他的變數或屬性引用這個物件值, 則這個物件值會被當成垃圾回收掉. 正因為這樣, WeakSet 物件是無法被列舉的, 沒有辦法拿到它包含的所有元素

WeakSet主要用來儲存DOM節點,當這些節點從文件移除時,不會引發記憶體洩漏。

以上所述就是本文的全部內容了,希望大家能夠喜歡。

您可能感興趣的文章:

ECMAScript6 新特性範例大全ECMAScript6輪播圖實踐知識總結ECMAScript6快速入手攻略ECMAScript6中Map/WeakMap詳解ECMAScript6塊級作用域及新變數宣告(let)ECMAScript6新增值比較函式Object.isECMAScript6函式剩餘引數(Rest Parameters)ECMAScript6函式預設引數ECMAScript6的新特性箭頭函式(Arrow Function)詳細介紹ECMAScript6–解構