es6 Set和Map

概覽

類型	用途	屬性	方法	遍歷
Set	值不重複	size	add delete has clear	yes
WeakSet	值不重複,且爲對象,且垃圾回收不考慮此引用	no	add delete has	no
Map	鍵可以爲對象	size	[set get]delete has clear	yes
WeakMap	鍵爲對象,且垃圾回收不考慮此引用	no	[set get] delete has	no

weak 表示弱引用 垃圾回收不考慮此引用,不可遍歷,沒有大小(WeakMap)鍵或(WeakSet)值需要是對象

Set 不重複的值

• 成員不會有重複值

let p= new Set([1,1])//1

• Set函數可以接受一個數組（或者具有 iterable 接口的其他數據結構）作爲參數，用來初始化

const set = new Set([1, 2, 3, 4, 4]);
const set = new Set(document.querySelectorAll('div'));

• 在Set中兩個NaN是相等的,不同於其它,因此Set中NaN只能存在一個

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

NaN===NaN //false

• Set常常用來數組/字符串去重

[...new Set(array)]
[...new Set('ababbc')].join('')

• Set有實例屬性size,方法 add delete has clear

let s= new Set([1])
s.add(2)
s.size // 2
s.has(1) // true
s.delete(2);

• Set 轉換成數組 Array.from(aset)或 […aset];
• Set遍歷方法有 keys=values(因爲只有值沒有鍵) entries forEach,默認爲values(可以 for(lex x of aset){})

let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
  console.log(item);
}
// red green blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

WeakSet 不重複的值, 弱引用, 只能放置對象, 沒有size屬性,也沒辦法遍歷

• 只能放對象

const b = [3, 4];
const ws = new WeakSet(b);
// Uncaught TypeError: Invalid value used in weak set(…)

• 有三個實例方法 add delete has (比Set少了clear),沒有size屬性,也沒辦法遍歷
• WeakSet 的一個用處，是儲存 DOM 節點，而不用擔心這些節點從文檔移除時，會引發內存泄漏

Map 可以對象作爲鍵

• 創建一個Map實例

const map = new Map([
  ['name', 'a'],
  ['title', 'b']
]);

• 如果 Map 的鍵是一個簡單類型的值（數字、字符串、布爾值），則只要兩個值嚴格相等,布爾值true和字符串true則是兩個不同的鍵

{true:1,'true':2}//{'true':2}

let map = new Map();
map.set(true, 1);
map.set('true', 2);
map.get(true) // 1
map.get('true') // 2

• 實例屬性size,實例方法set get has delete clear

let map= new Map()
map.set(1,1);
map.get(1);//1
map.has(1);//true 是否有某個鍵
map.size//1
map.delete(1)//true 成功true 失敗false
map.clear()//除所有成員，沒有返回值

• 遍歷方法 keys values entries forEach (遍歷順序就是插入順序), 默認遍歷器接口entries(for (let [key, value] of map) {})

for (let key of map.keys()) {
  console.log(key);
}
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
或者解構賦值
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
或者默認遍歷器
for (let [key, value] of map) {
  console.log(key, value);
}

• Map轉爲數組 […amap]

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

WeakMap 只接受對象作爲鍵名（null除外）,鍵名弱引用, 不可遍歷, 沒有size屬性

• DOM 節點作爲鍵名

//一旦這個 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);

• 部署私有屬性

const _counter = new WeakMap();
class Countdown {
  constructor(counter, action) {
    //內部屬性_counter，是實例的弱引用，所以如果刪除實例，它們也就隨之消失，不會造成內存泄漏
    _counter.set(this, counter);
  }
  dec() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
  }
}