1. 程式人生 > >詳解ES6中的set

詳解ES6中的set

基本語法

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轉化成陣列有上述這兩種方式,所以陣列去重都可以用這兩個方法。