Set 和 Map

Set

1：基本概念

• 類數組對象, 內部元素惟一

  let set = new Set([1, 2, 3, 2, 1]);
    console.log(set);
    // Set(3){ 1, 2, 3 } 
  
    [...set];
    // [1, 2, 3]

• 接收數組或迭代器對象

  let set = new Set(document.getElementsByName('div'));
    set.size;
    // 0 
    let set = new Set([1, 2, 3, 2, 1]);

• 不存在隱式轉換

  let set = new Set([5, '5']);
    set;
    // Set(2){ 5, '5' } 
  
    let set = new Set([NaN, NaN]);
    set;
    // Set(1){ NaN } 
  
    let set = new Set([{}, {}]);
    set;
    // Set(2){ {...}, {...} } 
  
    let set = new Set('abcdabcd');
    set;
    // Set(4){ 'a', 'b', 'c', 'd' }

2：屬性和方法

• size ， 返回當前Set元素總數

  let set = new Set([1, 2, 3, 4]);
    set.size;
    // 4

• add ， 添加元素 ， 返回新的Set

  let set = new Set([1, 2, 3, 4]);
    set.add(5);
    // Set(5){ 1, 2, 3， 4， 5 }

• delete ， 刪除元素 ， 返回成功與否

  let set = new Set([1, 2, 3, 4]);
    set.delete(4);
    // true

• has ， 是否包含某個元素

  let set = new Set([1, 2, 3, 4]);
    set.has(4);
    // true

• clear ， 清空Set

  let set = new Set([1, 2, 3, 4]);
    set.clear();
    set;
    // Set(0){ }

3：Set遍歷

• keys()

  let set = new Set(['Eric', 'Iven', 'David']);
    set.keys();
    // SetIterator {"Eric", "Iven", "David"}
  
    [...set.keys()];
    //(3) ["Eric","Iven","David"]

• values()

  let set = new Set(['Eric', 'Iven', 'David']);
    set.values();
    // SetIterator {"Eric", "Iven", "David"}

• entries()

  let set = new Set(['Eric', 'Iven', 'David']);
    set.entries();
    // SetIterator {"Eric" => "Eric", "Iven" => "Iven", "David" => "David"}

• forEach()

  let set = new Set(['Eric', 'Iven', 'David']);
    set.forEach(s => s);
    //
    Eric
    Iven
    David

4：WeakSet（弱應用）

• 只能放置對象的弱引用Se
• 其餘對象再也不引用該對象(DOM), 垃圾回收機制會自動回收該對象所佔用的內存
• 適合臨時存放一組對象
• 無size
• 不可遍歷
• add
• delete
• has

Map

1：基本概念

• 各類類型的值(包括對象)均可以看成鍵的鍵值對結構

  let map = new Map();
    let names = ['Eric', 'Iven'];
  
    map.set(names, 'Eric and Iven');
    map.get(names);
    // Eric and Iven

• 接收迭代器對象

  let map = new Map([
      ['name', 'Eric'],
      ['name', 'Iven']
    ]);
    map;
    // Map(1) {"name" => "Iven"}

• 特殊值處理

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

• 同一個鍵屢次賦值, 後面的值將覆蓋前面的值

2：屬性和方法

• size

• set(key,value)，返回新的Map

  let map = new Map();
    map.set(1,1).set(2,2);
    //Map(2) {1 => 1,2 => 2}

• get，不存在返回undefined

• has，返回是否包含鍵值

• delete，返回成功與否

• clear，清空

3：Map遍歷

• keys()

• values()

• entries()

• forEnch()，第二個參數綁定this

  let map = new Map([
      ['name', 'Eric'],
      ['name', 'Iven']
    ]);
  
    let customLog = {
      info: function(key, value) {
        console.log(value);
      }
    };
  
    map.forEach(function(value, key, map) {
      this.info(key, value);
    }, customLog);
    // Iven

4：WeakMap

• 只能放置對象的弱引用Map

• 其餘對象再也不引用該對象, 垃圾回收機制會自動回收該對象所佔用的內存

• 存放DOM

• 處理私有屬性

  const _totalCount = new WeakMap();
    class Cat {
      constructor(count) {
        _totalCount.set(this, count);
      }
      getCount() {
        let count = _totalCount.get(this);
        // ... 
        return count;
      }
    }
    const number = 123456;
    const cat = new Cat(number);

• 適合臨時存放一組對象

• 無size

• 不可遍歷

• get()

• set()

• delete

• has