es6 -- set 資料結構
阿新 • • 發佈:2018-11-10
ES6 提供了新的資料結構 Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。
Set 本身是一個建構函式,用來生成 Set 資料結構。
const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4
上面程式碼通過add
方法向 Set 結構加入成員,結果表明 Set 結構不會新增重複的值。
Set 函式可以接受一個數組(或者具有 iterable 介面的其他資料結構)作為引數,用來初始化。
//例一 const set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] // 例二 const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 // 例三 const set = new Set(document.querySelectorAll('div')); set.size // 56 // 類似於 const set = new Set(); document .querySelectorAll('div') .forEach(div => set.add(div)); set.size// 56
上面程式碼中,例一和例二都是Set
函式接受陣列作為引數,例三是接受類似陣列的物件作為引數。
上面程式碼也展示了一種去除陣列重複成員的方法。
// 去除陣列的重複成員 [...new Set(array)]
向 Set 加入值的時候,不會發生型別轉換,所以5
和"5"
是兩個不同的值。Set 內部判斷兩個值是否不同,使用的演算法叫做“Same-value-zero equality”,它類似於精確相等運算子(===
),主要的區別是NaN
等於自身,而精確相等運算子認為NaN
不等於自身。
let set = new Set(); let a = NaN; let b = NaN; set.add(a); set.add(b); set// Set {NaN}
上面程式碼向 Set 例項添加了兩個NaN
,但是隻能加入一個。這表明,在 Set 內部,兩個NaN
是相等。
另外,兩個物件總是不相等的。
let set = new Set(); set.add({}); set.size // 1 set.add({}); set.size // 2
1.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
下面是一個對比,看看在判斷是否包括一個鍵上面,Object
結構和Set
結構的寫法不同。
// 物件的寫法 const properties = { 'width': 1, 'height': 1 }; if (properties[someName]) { // do something } // Set的寫法 const properties = new Set(); properties.add('width'); properties.add('height'); if (properties.has(someName)) { // do something }
Array.from
方法可以將 Set 結構轉為陣列。
const items = new Set([1, 2, 3, 4, 5]); const array = Array.from(items);
這就提供了去除陣列重複成員的另一種方法。
function dedupe(array) { return Array.from(new Set(array)); } dedupe([1, 1, 2, 3]) // [1, 2, 3]
2.遍歷操作
Set 結構的例項有四個遍歷方法,可以用於遍歷成員。
keys()
:返回鍵名的遍歷器values()
:返回鍵值的遍歷器entries()
:返回鍵值對的遍歷器forEach()
:使用回撥函式遍歷每個成員
需要特別指出的是,Set
的遍歷順序就是插入順序。這個特性有時非常有用,比如使用 Set 儲存一個回撥函式列表,呼叫時就能保證按照新增順序呼叫。