Set
基本用法
ES6提供了新的數據結構Set。它類似於數組,但是成員的值都是唯一的,沒有重復的值。
Set本身是一個構造函數,用來生成Set數據結構。
var s = new Set();
[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
上面代碼通過add
方法向Set結構加入成員,結果表明Set結構不會添加重復的值。
Set函數可以接受一個數組(或類似數組的對象)作為參數,用來初始化。
// 例一
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
// 例二
var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
// 例三
function divs () {
return [...document.querySelectorAll('div')];
}
var set = new Set(divs());
set.size // 56
// 類似於
divs().forEach(div => set.add(div));
set.size // 56
上面代碼中,例一和例二都是Set
函數接受數組作為參數,例三是接受類似數組的對象作為參數。
上面代碼中,也展示了一種去除數組重復成員的方法。
// 去除數組的重復成員
[...new Set(array)]
向Set加入值的時候,不會發生類型轉換,所以5
和"5"
是兩個不同的值。Set內部判斷兩個值是否不同,使用的算法叫做“Same-value equality”,它類似於精確相等運算符(===
),主要的區別是NaN
等於自身,而精確相等運算符認為NaN
不等於自身。在Set內部,兩個NaN
是相等。
Set實例的屬性和方法
Set結構的實例有以下屬性。
Set.prototype.constructor
:構造函數,默認就是Set
函數。Set.prototype.size
:返回Set
實例的成員總數。
Set實例的方法分為兩大類:操作方法(用於操作數據)和遍歷方法(用於遍歷成員)。下面先介紹四個操作方法。
add(value)
:添加某個值,返回Set結構本身。delete(value)
:刪除某個值,返回一個布爾值,表示刪除是否成功。has(value)
:返回一個布爾值,表示該值是否為Set
的成員。clear()
:清除所有成員,沒有返回值。
上面這些屬性和方法的實例如下。
s.add(1).add(2).add(2);
// 注意2被加入了兩次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false
Array.from
方法可以將Set結構轉為數組。
var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);
這就提供了去除數組重復成員的另一種方法。
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
遍歷操作
Set結構的實例有四個遍歷方法,可以用於遍歷成員。
keys()
:返回一個鍵名的遍歷器values()
:返回一個鍵值的遍歷器entries()
:返回一個鍵值對的遍歷器forEach()
:使用回調函數遍歷每個成員
key
方法、value
方法、entries
方法返回的都是遍歷器對象。由於Set結構沒有鍵名,只有鍵值(或者說鍵名和鍵值是同一個值),所以key
方法和value
方法的行為完全一致。
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
Set結構的實例默認可遍歷,它的默認遍歷器生成函數就是它的values
方法。
Set.prototype[Symbol.iterator] === Set.prototype.values
// true
這意味着,可以省略values
方法,直接用for...of
循環遍歷Set。
WeakSet
WeakSet結構與Set類似,也是不重復的值的集合。但是,它與Set有兩個區別。
首先,WeakSet的成員只能是對象,而不能是其他類型的值。
其次,WeakSet中的對象都是弱引用,即垃圾回收機制不考慮WeakSet對該對象的引用,也就是說,如果其他對象都不再引用該對象,那么垃圾回收機制會自動回收該對象所占用的內存,不考慮該對象還存在於WeakSet之中。這個特點意味着,無法引用WeakSet的成員,因此WeakSet是不可遍歷的。
var ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set
上面代碼試圖向WeakSet添加一個數值和Symbol
值,結果報錯,因為WeakSet只能放置對象。
WeakSet是一個構造函數,可以使用new
命令,創建WeakSet數據結構。
var ws = new WeakSet();
作為構造函數,WeakSet可以接受一個數組或類似數組的對象作為參數。(實際上,任何具有iterable接口的對象,都可以作為WeakSet的參數。)該數組的所有成員,都會自動成為WeakSet實例對象的成員。
WeakSet結構有以下三個方法。
- WeakSet.prototype.add(value):向WeakSet實例添加一個新成員。
- WeakSet.prototype.delete(value):清除WeakSet實例的指定成員。
- WeakSet.prototype.has(value):返回一個布爾值,表示某個值是否在WeakSet實例之中。
下面是一個例子。
var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window); // true
ws.has(foo); // false
ws.delete(window);
ws.has(window); // false
WeakSet沒有size
屬性,沒有辦法遍歷它的成員。
WeakSet不能遍歷,是因為成員都是弱引用,隨時可能消失,遍歷機制無法保證成員的存在,很可能剛剛遍歷結束,成員就取不到了。WeakSet的一個用處,是儲存DOM節點,而不用擔心這些節點從文檔移除時,會引發內存泄漏。