ES6新增Set、Map數據結構

Set數據類型

• 基本用法

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

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

const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

Array.from方法能夠將 Set 結構轉爲數組。

Array.from(items) //[1, 2, 3, 4, 5]

有沒有很開心？想一想以前數組去重要雙重循環、indexOf各類判斷！用這個進行數組去重是否是很爽？

可是要注意：

向 Set 加入值的時候，不會發生類型轉換，因此5和"5"是兩個不一樣的值。Set 內部判斷兩個值是否不一樣，使用的算法叫作「Same-value-zero equality」，它相似於精確相等運算符（===），主要的區別是向 Set 加入值時認爲NaN等於自身，而精確相等運算符認爲NaN不等於自身。

• 實例屬性和方法

Set自己是一個構造函數，用來生成 Set 數據結構。

實例屬性

Set.prototype.constructor：構造函數，默認就是Set函數。
Set.prototype.size：返回Set實例的成員總數。

實例方法

Set 實例的方法分爲兩大類：操做方法（用於操做數據）和遍歷方法（用於遍歷成員)

一、操做方法

Set.prototype.add(value)：添加某個值，返回 Set 結構自己。
Set.prototype.delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
Set.prototype.has(value)：返回一個布爾值，表示該值是否爲Set的成員。
Set.prototype.clear()：清除全部成員，沒有返回值。

二、遍歷方法

Set.prototype.keys()：返回鍵名的遍歷器
Set.prototype.values()：返回鍵值的遍歷器
Set.prototype.entries()：返回鍵值對的遍歷器
Set.prototype.forEach()：使用回調函數遍歷每一個成員，沒有返回值。

因爲 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），因此keys方法和values方法的行爲徹底一致。

WeakSet數據類型

WeakSet與Set數據結構相似，可是有2個不一樣點。

一、WeakSet 的成員只能是對象，而不能是其餘類型的值

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

因爲上面這個特色，WeakSet 的成員是不適合引用的，由於它會隨時消失。另外，因爲 WeakSet 內部有多少個成員，取決於垃圾回收機制有沒有運行，運行先後極可能成員個數是不同的，而垃圾回收機制什麼時候運行是不可預測的，所以 ES6 規定 WeakSet 不可遍歷。也就沒有size屬性。

• WeakSet 結構有三個方法。

WeakSet.prototype.add(value)：向 WeakSet 實例添加一個新成員。
WeakSet.prototype.delete(value)：清除 WeakSet 實例的指定成員。
WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在 WeakSet 實例之中。

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

上面代碼保證了Foo的實例方法，只能在Foo的實例上調用。這裏使用 WeakSet 的好處是，foos對實例的引用，不會被計入內存回收機制，因此刪除實例的時候，不用考慮foos，也不會出現內存泄漏。

Map數據類型

• 基本用法

因爲ES5的Object提供的hash（鍵值對）裏只能用字符串看成鍵，會有很大的限制。因此ES6提供了更接近hash結構Map。

//old
const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

//new
const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

任何具備 Iterator 接口、且每一個成員都是一個雙元素的數組的數據結構均可以看成Map構造函數的參數。這就是說，Set和Map均可以用來生成新的 Map。

//數組
const map = new Map([
  ['name', '張三'],
  ['title', 'Author']
]);

console.log(map.size) // 2
console.log(map.has('name')) // true
console.log(map.get('name')) // "張三"
console.log(map.has('title')) // true
console.log(map.get('title')) // "Author"

//Set

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1

//Map

const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

注意，

一、讀取一個未知的鍵，返回undefined。
二、只有對同一個對象的引用，Map 結構纔將其視爲同一個鍵。
三、Map 的鍵若是是一個簡單類型的值（數字、字符串、布爾值），則只要兩個值嚴格相等，Map 將其視爲一個鍵，好比0和-0就是一個鍵，布爾值true和字符串true則是兩個不一樣的鍵。另外，undefined和null也是兩個不一樣的鍵。雖然NaN不嚴格相等於自身，但 Map 將其視爲同一個鍵。

new Map().get('asfddfsasadf')
// undefined

const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined

• 實例的屬性和方法

實例屬性

size屬性返回 Map 結構的成員總數。

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

方法

一、操做方法

Map.prototype.set(key, value)；設置鍵名key對應的鍵值爲value；會覆蓋原值
Map.prototype.get(key)；讀取key對應的鍵值，找不到會返回undefined。
Map.prototype.has(key)；表示某個鍵是否在當前 Map 對象之中，has方法返回一個布爾值
Map.prototype.delete(key)；delete方法刪除某個鍵，返回true。若是刪除失敗，返回false。
Map.prototype.clear()；clear方法清除全部成員，沒有返回值。

二、遍歷方法

Map.prototype.keys()：返回鍵名的遍歷器。
Map.prototype.values()：返回鍵值的遍歷器。
Map.prototype.entries()：返回全部成員的遍歷器。
Map.prototype.forEach()：遍歷 Map 的全部成員。

Map 的遍歷順序就是插入順序

• 與其餘數據結構的互相轉換

（1）Map 轉爲數組

Map 轉爲數組最方便的方法，就是使用擴展運算符（...）。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

（2）數組 轉爲 Map

將數組傳入 Map 構造函數，就能夠轉爲 Map。

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }

（3）Map 轉爲對象

若是全部 Map 的鍵都是字符串，它能夠無損地轉爲對象。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

若是有非字符串的鍵名，那麼這個鍵名會被轉成字符串，再做爲對象的鍵名。

（4）對象轉爲 Map

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

（5）Map 轉爲 JSON

Map 轉爲 JSON 要區分兩種狀況。一種狀況是，Map 的鍵名都是字符串，這時能夠選擇轉爲對象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

另外一種狀況是，Map 的鍵名有非字符串，這時能夠選擇轉爲數組 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

（6）JSON 轉爲 Map

JSON 轉爲 Map，正常狀況下，全部鍵名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

可是，有一種特殊狀況，整個 JSON 就是一個數組，且每一個數組成員自己，又是一個有兩個成員的數組。這時，它能夠一一對應地轉爲 Map。這每每是 Map 轉爲數組 JSON 的逆操做。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

WeakMap數據結構

• 基本用法

WeakMap結構與Map結構相似，可是有兩點區別：

一、WeakMap只接受對象做爲鍵名（null除外），不接受其餘類型的值做爲鍵名。

二、WeakMap的鍵名所指向的對象，不計入垃圾回收機制。同WeakSet

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

因此WeakMap也不能遍歷，因此size、forEach、clear 方法都不存在；並且也不能清空，因此不支持clear方法；。所以，WeakMap只有四個方法可用：get()、set()、has()、delete()。

• WeakMap 的用途

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);

上面代碼中，myElement是一個 DOM 節點，每當發生click事件，就更新一下狀態。咱們將這個狀態做爲鍵值放在 WeakMap 裏，對應的鍵名就是myElement。一旦這個 DOM 節點刪除，該狀態就會自動消失，不存在內存泄漏風險。

WeakMap 的另外一個用處是部署私有屬性。

const _counter = new WeakMap();
const _action = new WeakMap();

class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  dec() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}

const c = new Countdown(2, () => console.log('DONE'));

c.dec()
c.dec()
// DONE

上面代碼中，Countdown類的兩個內部屬性_counter和_action，是實例的弱引用，因此若是刪除實例，它們也就隨之消失，不會形成內存泄漏。

參考文章