ECMA Script 6_惟一容器 Set_映射容器 Map

惟一容器 Set

ES6 提供了新的數據結構 Set

Set 結構沒有鍵名，只有鍵值（或者說 鍵名 和 鍵值 是同一個值）

它相似於數組，可是成員的值都是惟一的，沒有重複的值

Set 內部判斷兩個值是否不一樣，使用的算法叫作「Same-value-zero equality」， NaN 等於自身

它相似於精確相等運算符（===），而 精確相等運算符 認爲NaN不等於自身

Set 結構的實例默承認遍歷，它的默認遍歷器生成函數就是它的 values 方法

Set.prototype[Symbol.iterator] === Set.prototype.values    // true

// 意味着 :  能夠省略values方法，直接用for...of循環遍歷 Set

• 數組去重（面試題）

• let arr = [9, 3, 1, 5, 7]; let onlyOne = [...new Set(arr)];
  
  方法能夠將 Set 結構轉爲數組const oneArr = Array.from(new Set(arr));// Array.from

• Set.prototype.size        返回 Set 實例 的成員總數
• Set.prototype.操做方法

setObj.add()

添加某個值，返回 Set 結構自己

setObj.delete()

刪除某個值，返回一個布爾值，表示刪除是否成功

setObj.has()

返回一個布爾值，表示該值是否爲 Set 的成員

setObj.clear()

清除全部成員，沒有返回值

• // 對象的寫法
  const properties = {
      'width': 1,
      'height': 1
  };
  
  if (properties[someName]) {
      // do something
  }
  
  // Set的寫法
  const properties = new Set();
  
  properties.add('width');
  properties.add('height');
  
  if (properties.has(someName)) {
      // do something
  }

• Set.prototype.遍歷方法

setObj.keys()

返回鍵名的遍歷器

setObj.values()

返回鍵值的遍歷器

setObj.entries()

返回鍵值對的遍歷器

setObj.forEach()

使用回調函數遍歷每一個成員

還能夠有第二個參數，表示綁定處理函數內部的 this 對象

• 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"]

Set 能夠很容易地實現

並集（Union）

• const unionArr = [...new Set([...arrA, ...arrB])]; // 求倆數組 並集

交集（Intersect）

• const difArr = [...new Set(arrA.filter(each=>!setB.has(each)))]; // 求倆數組 差集

差集（Difference）

• const difArr = [...new Set(arrA.filter(each=>!setB.has(each)))]; // 求倆數組 差集

• let setA = new Set(arrA); // arrA 去重 let setB = new Set(arrB); // arrB 去重  const unionArr = [...new Set([...arrA, ...arrB])]; // 求倆數組 並集 const mixedArr = [...new Set(arrA.filter(each=>setB.has(each)))]; // 求倆數組 交集 const difArr = [...new Set(arrA.filter(each=>!setB.has(each)))]; // 求倆數組 差集  console.log("\n\narrA 去重 : "+[...setA]); console.log("arrB 去重 : "+[...setB]); console.log("------------------"); console.log("arrA 並集 arrB : "+unionArr); console.log("arrA 交集 arrB : "+mixedArr); console.log("arrA 差集 arrB : "+difArr);

var ws = mew WeakSet()

 

與 Set 相似，也是不重複的值的集合。可是，它與 Set 有兩個區別： 

• 首先，WeakSet 的成員只能是對象，而不能是其餘類型的值
• WeakSet 中的對象都是弱引用，即垃圾回收機制不考慮 WeakSet 對該對象的引用

也就是說，若是其餘對象都再也不引用該對象，那麼垃圾回收機制會自動回收該對象所佔用的內存，不考慮該對象還存在於 WeakSet 之中

WeakSet 不能遍歷，是由於成員都是弱引用，隨時可能消失，遍歷機制沒法保證成員的存在，極可能剛剛遍歷結束，成員就取不到了

• WeakSet.prototype.add(value)

向 WeakSet 實例添加一個新成員

• WeakSet.prototype.delete(value)

清除 WeakSet 實例的指定成員

• WeakSet.prototype.has(value)

返回一個布爾值，表示某個值是否在 WeakSet 實例之中

• const elements = new WeakSet();
  class Foo {
      constructor() {
          elements.add(this)
      }
      method () {
          if (!elements.has(this)) {
              throw new TypeError('Foo.prototype.method 只能在Foo的實例上調用！');
          }
      }
  }

Map 對象，屬性 key 能夠是任意類型

屬性 key  也是惟一的，前面的屬性 會被 後面的屬性 覆蓋

背景：

傳統上對象只能用字符串看成鍵

ES6 提供了 Map 數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，

各類類型的值（包括對象）均可以看成鍵。

也就是說，Object 結構提供了「字符串—值」的對應，Map 結構提供了「值—值」的對應，是一種更完善的 Hash 結構實現。

若是你須要 「鍵值對」 的數據結構，Map 比 Object 更合適。

var newMap = new Map();

不單單是數組，任何具備 Iterator 接口、且每一個成員都是 一個雙元素的數組的數據結構 均可以看成Map構造函數的參數

Set 和 Map 均可以用來生成新的 Map

只有對同一個對象的引用，Map 結構纔將其視爲同一個鍵。這一點要很是當心

• const map = new Map();
  
  const k1 = ['a'];
  const k2 = ['a'];
  
  map
      .set(k1, 111)
      .set(k2, 222);
  
  map.get(k1);    // 111
  map.get(k2);    // 222

newMap.size 屬性

返回 Map 結構的成員總數

• const map = new Map();
  map.set('foo', true);
  map.set('bar', false);
  
  map.size    // 2

newMap.set(key, value)    添加 鍵值對

設置鍵名 key 對應的鍵值爲 value，而後返回整個 Map 結構，意味着能夠鏈式調用

若是 key 已經有值，則鍵值會被更新，不然就新生成該鍵

• const m = new Map();
  
  m.set('edition', 6)        // 鍵是字符串
  m.set(262, 'standard')     // 鍵是數值
  m.set(undefined, 'nah')    // 鍵是 undefined
  
  
  let map = new Map()
                                .set(1, 'a')
                                .set(2, 'b')
                                .set(3, 'c');

newMap.get(key)    獲取 鍵 對應的 值

讀取 key 對應的鍵值

若是找不到 key，返回 undefined

• const m = new Map();
  
  const hello = function() {console.log('hello');};
  m.set(hello, 'Hello ES6!');    // 鍵是函數
  
  m.get(hello);    // Hello ES6!

newMap.has(key)    查詢 Map 實例 是否包含 鍵

返回一個布爾值，表示某個鍵是否在當前 Map 對象之中

• const m = new Map();
  
  m.set('edition', 6);
  m.set(262, 'standard');
  m.set(undefined, 'nah');
  
  m.has('edition');     // true
  m.has('years');       // false
  m.has(262);           // true
  m.has(undefined);     // true

newMap.delete(key)

刪除 Map 實例的 某個鍵，返回 true。

若是刪除失敗，返回 false

newMap.clear()

清除全部成員，沒有返回值

四種 遍歷方法

• keys()        返回鍵名的遍歷器

• values()        返回鍵值的遍歷器

• entries()        返回全部成員的遍歷器

• forEach()        遍歷 Map 的全部成員

forEach方法還能夠接受第二個參數，用來綁定this

• const map = new Map([
      ['F', 'no'],
      ['T',  'yes'],
  ]);
  
  for (let key of map.keys()) {
      console.log(key);
  };
  // "F"
  // "T"
  
  for (let value of map.values()) {
      console.log(value);
  };
  // "no"
  // "yes"
  
  for (let item of map.entries()) {
      console.log(item[0], item[1]);
  };
  // "F" "no"
  // "T" "yes"
  
  // 或者
  for (let [key, value] of map.entries()) {
     ; console.log(key, value);
  }
  // "F" "no"
  // "T" "yes"
  
  // 等同於使用map.entries()for (let [key, value] of map) { console.log(key, value); }; // "F" "no" // "T" "yes"
  // 表示 Map 結構的默認遍歷器接口（Symbol.iterator 屬性），就是 entries 方法
  map[Symbol.iterator] === map.entries // true

• Map 結構轉爲數組結構，比較快速的方法是使用擴展運算符（...）

• const map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
  ]);
  
  [...map.keys()]    // [1, 2, 3]
  
  [...map.values()]    // ['one', 'two', 'three']
  
  [...map.entries()]    // [[1,'one'], [2, 'two'], [3, 'three']]
  
  [...map]    // [[1,'one'], [2, 'two'], [3, 'three']]

 

返回鍵名的遍歷器