ES6 中Set數據結構

ES6 提供了新的數據結構 Set。它類似於數組，但是成員的值都是唯一的，沒有重複的值。

一.Set數據結構

1.基本定義

• ①Set本身是一個構造函數，用來生成 Set 數據結構，存儲不重複的值。Set的定義如下
• ②因爲set實現了Iterator（遍歷器）所以可以使用（…）的拓展運算符來處理集合中的數據

  //例一 創建一個空集合，使用add方法添加數據
  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
  
  //例二 使用數組初始化set對象
  const set = new Set([1, 2, 3, 4, 4]);
  [...set]
  // [1, 2, 3, 4]
  
  // 例三 使用實現了 iterable 接口的其他數據結構，初始化set對象
  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
  

2.Set結構的常規方法

1. Set
   Set.prototype.constructor：構造函數，默認就是Set函數。
   Set.prototype.size：返回Set實例的成員總數。
   Set.prototype.add(value)：添加某個值，返回 Set 結構本身。
   Set.prototype.delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
   Set.prototype.has(value)：返回一個布爾值，表示該值是否爲Set的成員。
   Set.prototype.clear()：清除所有成員，沒有返回值。

2. 範例

   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
   

3.Set結構的遍歷

1. Set 結構的實例有四個遍歷方法
   Set.prototype.keys()：返回鍵名的遍歷器
   Set.prototype.values()：返回鍵值的遍歷器
   Set.prototype.entries()：返回鍵值對的遍歷器
   Set.prototype.forEach()：使用回調函數遍歷每個成員

2. keys()，values()，entries()範例如下，其中 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"]
   

3. set的默認遍歷器是values方法，所以可以直接用for…of循環遍歷 Set。

   Set.prototype[Symbol.iterator] === Set.prototype.values
   // true
   
   let set = new Set(['red', 'green', 'blue']);
   
   for (let x of set) {
     console.log(x);
   }
   // red
   // green
   // blue
   

4. forEach()遍歷，箭頭函數包含鍵值、鍵名、集合本身（下例省略了該參數）

   let set = new Set([1, 4, 9]);
   set.forEach((value, key) => console.log(key + ' : ' + value))
   // 1 : 1
   // 4 : 4
   // 9 : 9
   

4.Set結構的應用

1. 去除重複成員的方法

   // 去除數組的重複成員
   [...new Set(array)]
   

2. 去除字符串中重複字符

   [...new Set('ababbc')].join('')
   // "abc"
   

3. 2個對象總是不相等的

   let set = new Set();
   
   set.add({});
   set.size // 1
   
   set.add({});
   set.size // 2
   

4. Array.from方法可以將 Set 結構轉爲數組。

   const items = new Set([1, 2, 3, 4, 5]);
   const array = Array.from(items);
   

5. 使用Array.from進行數組去重

   function dedupe(array) {
     return Array.from(new Set(array));
   }
   dedupe([1, 1, 2, 3]) // [1, 2, 3]
   

6. 利用數組的map和filter方法，在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}
   
   // 差集
   let difference = new Set([...a].filter(x => !b.has(x)));
   // Set {1}
   

7. 在遍歷操作中修改原集合數據，使用重新賦值的方式

   // 方法一
   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