es6 Set和map數據結構

set

• set構造函數創造相似數組的數據，set數據結構的數據沒有重複的值

let ary = [1,2,3,4,4,4,4];
let setData = new Set();
ary.forEach((p) => {
setData.add(p)
})
console.log(setData) // [1,2,3,4]

• set函數接受一個數組（或者是具備iterable接口的數據類型）做爲參數，用來初始化

let setData = new Set([1,2,3,4,4,4,4]);  //  [1,2,3,4]
let setDiv = new Set(document.getElementsByTagName('div'))

• Set 加入值的時候，不會發生類型轉換,例如5和‘5’是不一樣的值，NaN和NaN相等的，見代碼

let ary = [NaN,NaN,NaN,5,'5',{},{}]
let setData = new Set(ary);// [NaN,5,'5',{},{}]

set實例的屬性和方法

• 屬性
  • Set.prototype.constructor：構造函數，默認就是Set函數。
  • Set.prototype.size：返回Set實例的成員總數。
• 方法
  • add(),向該set數據中加目標值，返回該set
  • has(),判斷該set是否包含目標值，返回布爾值，表示是否包含
  • delete(),刪除該set的目標值，返回boolean值，表示是否刪除成功
  • clear(),清除該set的全部的項，沒有返回值
  • Array.from方法能夠將set數據轉化成數組

// 數組去重
let ary = [1,2,3,3,3,3];
let setData = new Set(ary);
ary =Array.from(setData);

// 結合擴展運算符
let arr = [1,2,3,3,3,3];
let unique = [...new Set(arr)];

• 遍歷操做
  • keys()：返回鍵名的遍歷器
  • values()：返回鍵值的遍歷器
  • entries()：返回鍵值對的遍歷器
  • forEach()：使用回調函數遍歷每一個成員
  • Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），因此keys方法和values方法的行爲徹底一致
• 擴展運算符（...）內部使用for...of循環，因此set數據也可使用擴展運算符

  • 數組的map和filter也能夠間接用於set數據，先將set數據轉化成數組，在使用map等數組方法

  • 因此set很容易實現交併差集

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}

---

weakSet數據結構

• 特性
  • weakSet數據和set數據相似，可是weakSet的成員只能是對象
  • weakSet的成員對象是弱引用，即垃圾回收機制不考慮 WeakSet 對該對象的引用，也就是說，若是其餘對象都再也不引用該對象， 那麼垃圾回收機制會自動回收該對象所佔用的內存，不考慮該對象還存在於 WeakSet 之中
  • 不可遍歷，forEach，size都沒有
• 方法
  • WeakSet.prototype.add(value)：向 WeakSet 實例添加一個新成員。
  • WeakSet.prototype.delete(value)：清除 WeakSet 實例的指定成員。
  • WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在

---

map數據類型

• 特性：
  • Object對象的數據結構是鍵值對的形式，鍵是字符串，而map結構的數據能夠是‘值-值’的形式，對象也能夠作鍵
  • 參數：
    • 任何具備 Iterator 接口、且每一個成員都是一個雙元素的數組的數據結構均可以看成Map構造函數的參數，見例子：

    let mapData = new Map([
    ['name','zhan']  //雙元素
    ]);
    mapData.get('name') // 'zhan'

  • 針對同一個鍵進行賦值，後面的賦值操做會覆蓋前面的值

  let mapData = new Map();
   mapData.set('name', 'zhan').set('name', 'hui');
   mapData.get('name'); //'hui'

  • 獲取沒有設置的鍵值，返回undefined

  let mapData = new Map().get('name'); // undefined

  • 注意
    • 只用引用類型的數據做爲鍵時，由於不一樣的對象對應的內存地址不同， 因此對應的值也就不一樣，其實Map數據的鍵是和內存地址作綁定的，這一點須要格外注意

    //下面兩個對象對應的內存地址不一樣，
    let mapData = new Map();
    mapData.set({},'zhan');
    mapData.get({}); //undefined

    • Map 的鍵是一個簡單類型的值（數字、字符串、布爾值），則只要兩個值嚴格相等，Map 將其視爲一個鍵，好比0和-0就是一個鍵， 布爾值true和字符串true則是兩個不一樣的鍵。另外，undefined和null也是兩個不一樣的鍵。雖然NaN不嚴格相等於自身，但 Map 將其視爲同一個鍵。

    let map = new Map();
    
    map.set(-0, 123);
    map.get(+0) // 123
    
    map.set(true, 1);
    map.set('true', 2);
    map.get(true) // 1
    
    map.set(undefined, 3);
    map.set(null, 4);
    map.get(undefined) // 3
    
    map.set(NaN, 123);
    map.get(NaN) // 123

• Map實例的屬性和操做方法
  • size，返回map數據的成員個數
  • set()
  • get()
  • has()，has方法返回一個布爾值，表示某個鍵是否在當前 Map 對象之中
  • delete(),delete方法刪除某個鍵，返回true。若是刪除失敗，返回false
  • clear(),clear方法清除全部成員，沒有返回值
• 遍歷方法（遍歷順序是插入順序誰先插入誰先遍歷到）
  • keys()：返回鍵名的遍歷器。
  • values()：返回鍵值的遍歷器。
  • entries()：返回全部成員的遍歷器。
  • forEach()：遍歷 Map 的全部成員
  • 將map數據轉換成數組，最快的就是擴展運算符

  let mapData = new Map([
   ['name', 'zhan'],
   ['age', 25],
   ['sex', 'boy']
   ]);
   let ary = [...mapData.keys()]; // ['name','age','sex'];
   let ary_ =[...mapData.entries()]; // [['name', 'zhan'],['age', 25],['sex', 'boy']]
   let ary__ =[...mapData]; // [['name', 'zhan'],['age', 25],['sex', 'boy']]

  • Map數據沒有map和filter方法，不過藉助數組，能夠間接實現

  const map0 = new Map()
    .set(1, 'a')
    .set(2, 'b')
    .set(3, 'c');
  
  const map1 = new Map(
    [...map0].filter(([k, v]) => k < 3)
  );

weakMap

• 特性
  • 相似於Map結構，不一樣的有如下幾點
    • 只用對象做爲鍵
    • WeakMap的鍵名所指向的對象，不計入垃圾回收機制
    • 沒有遍歷操做
• 方法和屬性
  • get()
  • set()
  • has()
  • delete()
  • 沒有size屬性，由於沒有辦法列出全部鍵名，某個鍵名是否存在徹底不可預測，跟垃圾回收機制是否運行相關， 爲了防止出現不肯定性，就統一規定不能取到鍵名。二是沒法清空，即不支持clear方法
• 應用
  • WeakMap 應用的典型場合就是 DOM 節點做爲鍵名，將dom做爲鍵
  • 因爲WeakMap的鍵名所指向的對象，不計入垃圾回收機制，一旦這個 DOM 節點刪除，該狀態就會自動消失，不存在內存泄漏風險。

  let myElement = document.getElementById('logo');
  let myWeakmap = new WeakMap();
  
  myWeakmap.set(myElement, {timesClicked: 0});
  
  myElement.addEventListener('click', function() {
    let logoData = myWeakmap.get(myElement);
    logoData.timesClicked++;
  }, false);