Set 和 Map 資料結構
Set 和 Map 資料結構
基本用法
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)];
上面的方法也可以用於,去除字串裡面的重複字元。
[...new Set("ababbc")].join(""); // "abc"
向 Set 加入值的時候,不會發生型別轉換,所以5
和"5"
是兩個不同的值。Set 內部判斷兩個值是否不同,使用的演算法叫做“Same-value-zero equality”,它類似於精確相等運算子(===
),主要的區別是向 Set 加入值時認為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
上面程式碼表示,由於兩個空物件不相等,所以它們被視為兩個值。
#Set 例項的屬性和方法
Set 結構的例項有以下屬性。
Set.prototype.constructor
:建構函式,預設就是Set
函式。Set.prototype.size
:返回Set
例項的成員總數。
Set 例項的方法分為兩大類:操作方法(用於操作資料)和遍歷方法(用於遍歷成員)。下面先介紹四個操作方法。
Set.prototype.add(value)
:新增某個值,返回 Set 結構本身。Set.prototype.delete(value)
:刪除某個值,返回一個布林值,表示刪除是否成功。Set.prototype.has(value)
:返回一個布林值,表示該值是否為Set
的成員。Set.prototype.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]
遍歷操作
Set 結構的例項有四個遍歷方法,可以用於遍歷成員。
Set.prototype.keys()
:返回鍵名的遍歷器Set.prototype.values()
:返回鍵值的遍歷器Set.prototype.entries()
:返回鍵值對的遍歷器Set.prototype.forEach()
:使用回撥函式遍歷每個成員
需要特別指出的是,Set
的遍歷順序就是插入順序。這個特性有時非常有用,比如使用 Set 儲存一個回撥函式列表,呼叫時就能保證按照新增順序呼叫。
(1)keys()
,values()
,entries()
keys
方法、values
方法、entries
方法返回的都是遍歷器物件(詳見《Iterator 物件》一章)。由於 Set 結構沒有鍵名,只有鍵值(或者說鍵名和鍵值是同一個值),所以keys
方法和values
方法的行為完全一致。
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"]
上面程式碼中,entries
方法返回的遍歷器,同時包括鍵名和鍵值,所以每次輸出一個數組,它的兩個成員完全相等。
Set 結構的例項預設可遍歷,它的預設遍歷器生成函式就是它的values
方法。
Set.prototype[Symbol.iterator] === Set.prototype.values; // true
這意味著,可以省略values
方法,直接用for...of
迴圈遍歷 Set。
let set = new Set(["red", "green", "blue"]); for (let x of set) { console.log(x); } // red // green // blue
(2)forEach()
Set 結構的例項與陣列一樣,也擁有forEach
方法,用於對每個成員執行某種操作,沒有返回值。
let set = new Set([1, 4, 9]); set.forEach((value, key) => console.log(key + " : " + value)); // 1 : 1 // 4 : 4 // 9 : 9
上面程式碼說明,forEach
方法的引數就是一個處理函式。該函式的引數與陣列的forEach
一致,依次為鍵值、鍵名、集合本身(上例省略了該引數)。這裡需要注意,Set 結構的鍵名就是鍵值(兩者是同一個值),因此第一個引數與第二個引數的值永遠都是一樣的。
另外,forEach
方法還可以有第二個引數,表示繫結處理函式內部的this
物件。
(3)遍歷的應用
擴充套件運算子(...
)內部使用for...of
迴圈,所以也可以用於 Set 結構。
let set = new Set(["red", "green", "blue"]); let arr = [...set]; // ['red', 'green', 'blue']
擴充套件運算子和 Set 結構相結合,就可以去除陣列的重複成員。
let arr = [3, 5, 2, 2, 5, 5]; let unique = [...new Set(arr)]; // [3, 5, 2]
而且,陣列的map
和filter
方法也可以間接用於 Set 了。
let set = new Set([1, 2, 3]); set = new Set([...set].map((x) => x * 2)); // 返回Set結構:{2, 4, 6} let set = new Set([1, 2, 3, 4, 5]); set = new Set([...set].filter((x) => x % 2 == 0)); // 返回Set結構:{2, 4}
因此使用 Set 可以很容易地實現並集(Union)、交集(Intersect)和差集(Difference)。
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 並集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter((x) => b.has(x))); // set {2, 3} // (a 相對於 b 的)差集 let difference = new Set([...a].filter((x) => !b.has(x))); // Set {1}
如果想在遍歷操作中,同步改變原來的 Set 結構,目前沒有直接的方法,但有兩種變通方法。一種是利用原 Set 結構映射出一個新的結構,然後賦值給原來的 Set 結構;另一種是利用Array.from
方法。
// 方法一 let set = new Set([1, 2, 3]); set = new Set([...set].map((val) => val * 2)); // set的值是2, 4, 6 // 方法二 let set = new Set([1, 2, 3]); set = new Set(Array.from(set, (val) => val * 2)); // set的值是2, 4, 6
上面程式碼提供了兩種方法,直接在遍歷操作中改變原來的 Set 結構。