詳解ES6中的set
阿新 • • 發佈:2019-02-05
基本語法
ES6 提供了新的資料結構 Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值(對於基本型別來說)。Set 本身是一個建構函式,用來生成 Set 資料結構。
const set = new Set();
[2, 3, 3, 3].forEach(x => set.add(x));
for(let i of set){
console.log(i); // [2, 3]
}
上面程式碼通過add
方法向 Set 結構加入成員,結果表明 Set 結構不會新增重複的值。可以在建構函式中直接傳入陣列初始化(注意:只能傳陣列,不然會報錯),和上面方法效果相同
var set = new Set([2, 3, 3, 3]);
[...set] // [2, 3]
set.size // 2
所以上面發現了一種去除陣列去重的方法
var arr = [2, 3, 3, 3];
var new_arr = [...new Set(arr)]; // [2, 3]
再談去重
向Set加入值的時候,不會發生型別轉換,所以5和”5”是兩個不同的值。Set內部判斷兩個值是否不同,使用的演算法叫做“Same-value equality”,它類似於精確相等運算子(===),我們知道在js中判斷物件相等,不能通過==
和===
{x:2, y:2} == {x:2, y:2} // false
{x:2, y:2} === {x:2, y:2} // false
物件通過指標指向的記憶體中的地址來做比較,所以要判斷物件是否相等,只能通過遍歷去判斷,這其中包含了很多邊際情況。所以set沒有去判斷這些,只要往裡面扔一個物件,那麼就是一個新的元素
var set = new Set();
var obj1 = {};
var obj2 = {};
set.add(obj1);
for(let i of set){
console.log(i); // Object {}
}
set.add(obj2);
for(let i of set){
console.log(i); // Object {} Object {}
}
而js中比較出名的,和任何值都不相等的NaN(not a number)
NaN == NaN // false
NaN === NaN // false
Set中加入了對NaN的判斷
var set = new Set();
set.add(NaN);
set.size // 1
set.add(NaN);
set.size // 1
說明NaN在set的判斷中是相等的,所以set支援了所有基本型別
Set的基本操作
- add(value) :新增某個值,返回Set結構本身
- delete(value) : 刪除某個值,返回一個布林值,表示刪除是否成功
- has(value):返回一個布林值,表示該值是否是Set的成員
- clear() :清除所有成員,沒有返回值
下面是一個對比,看看在判斷是否包括一個鍵上面,Object結構和Set結構的寫法不同。
var prop = {
name: 'sysuzhyupeng',
age: 24
}
//注意要加引號
if('name' in prop){
}
//Set的寫法
var prop = new Set();
prop.add('name');
prop.add('age');
if(prop.has('name')) ...
Array.from方法可以將Set結構轉為陣列。
var set = new Set([1, 2, 3, 4, 5]);
var arr = Array.from(set);
所以,由於set轉化成陣列有上述這兩種方式,所以陣列去重都可以用這兩個方法。