JS 中的 (Weak)Set 和 (Weak)Map

Set 和 Map 都是 ES6 新增數據結構。

Set

Set 是一個集合，它相似於數組，可是成員的值都是惟一的，沒有重複的值。它容許你存儲任何類型的惟一值，不管是原始值或者是對象引用。

Set 是一個構造函數，它有一個可選的參數一個可迭代對象。若是傳遞了這個參數它的全部元素將不重複地被添加到新的 Set中。若是不指定此參數或其值爲null，則新的Set爲空。它返回一個新的Set實例。

let s1 = new Set([NaN, undefined, null, +0, -0, Infinity, -Infinity, NaN, undefined, null])

console.log(s1)
/* Set(6) {NaN, undefined, null, 0, Infinity, …} size: 6 __proto__: Set [[Entries]]: Array(6) 0: NaN 1: undefined 2: null 3: 0 4: Infinity 5: -Infinity length: 6 */
// 能夠發如今 Set 中 NaN 之間被視爲相同的值
複製代碼

Set經常使用於去除重複元素。

// 去除數組的重複成員
[...new Set([1,2,3,1,2,3])]

// 去除重複字符
[...new Set('abcabc')].join('')
複製代碼

Set 原型屬性

除了constructor，Set.prototype上還有一個size屬性，它返回Set對象值的個數。

Set 原型方法

Set 一共有 9 個原型方法。

add(value)

用來向一個Set對象的末尾添加一個指定的值，它返回Set對象自己。

let s2 = new Set([1])
s2.add(2).add(3) // { 1, 2, 3 }
複製代碼

has(value)

返回一個布爾值來指示對應的值value是否存在Set對象中。

delete(value)

能夠從一個Set對象中刪除指定的元素，成功刪除返回 true，不然返回false。

clear()

用來清空一個Set對象中的全部元素，返回undefiend。

values()

返回一個Iterator對象，這個對象以插入Set 對象的順序包含了原Set對象裏的每一個元素。

let s3 = new Set([1,2,3])
console.log(s3.values())
// SetIterator {1, 2, 3}
複製代碼

keys()

values()的別名，功能和values()徹底相同。

entries()

返回一個新的迭代器對象 ，這個對象的元素是相似[value, value]形式的數組。

console.log(s3.entries()) // SetIterator {1, 2, 3}
for (let i of s3.entries()) {
    console.log(i)
}
/* [1, 1] [2, 2] [3, 3] */
複製代碼

forEach(callback[, thisArg])

根據集合中元素的順序，對每一個元素都執行提供的callback函數一次。它接受兩個參數第一個是回調函數，第二個是回調函數的this指向（可選）。

(new Set([5,2,false, [], {}])).forEach(function (value, index, obj) {
    console.log(value, index, obj)
    // value 元素
    // index 元素索引等於 value
    // obj set 對象
})
/* 5 5 Set(5) 2 2 Set(5) false false Set(5) [] [] Set(5) {} {} Set(5) */
複製代碼

[@@iterator]()

Set的迭代器函數，默認是values函數。

console.log(s3.[Symbol.iterator])
// ƒ values() { [native code] }
複製代碼

Set 靜態屬性

1. Set.length它值爲0
2. Set[Symbol.species]返回Set構造函數
3. Set.prototype 原型

WeakSet

WeakSet和Set相似，可是有兩點不一樣：

1. WeakSet對象中只能存放對象引用, 不能存放值, 而Set對象均可以.
2. WeakSet對象中存儲的對象值都是被弱引用的, 若是沒有其餘的變量或屬性引用這個對象值, 則這個對象值會被當成垃圾回收掉. 正由於這樣, WeakSet對象是沒法被枚舉的, 沒有辦法拿到它包含的全部元素.

const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set
複製代碼

WeakSet 原型屬性

WeakSet只有constructor屬性

WeakSet 原型方法

WeakSet 只有 3 個原型方法，add has delete。它沒有迭代相關的方法和clear方法。

WeakSet 靜態屬性

對比Set它少了Symbol.species屬性。

Map

Map對象保存鍵值對。任何值(對象或者原始值) 均可以做爲一個鍵或一個值。它和 JS 對象不一樣，JS 對象只能用字符串和Symbol做爲鍵，而Map能夠使用任何值。

除了鍵類型上的不一樣，它和Object還有如下不一樣：

1. Map中的鍵值是有序的，而添加到對象中的鍵則不是。
2. Map能夠經過size獲取鍵值對個數，而Object的鍵值對個數只能手動計算。
3. Map可直接進行迭代，而 Object 的迭代須要先獲取它的鍵數組，而後再進行迭代。
4. Object都有本身的原型，原型鏈上的鍵名有可能和你本身在對象上的設置的鍵名產生衝突。雖然ES5開始能夠用map = Object.create(null) 來建立一個沒有原型的對象，可是這種用法不太常見。
5. Map在涉及頻繁增刪鍵值對的場景下會有些性能優點。

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

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

// -----------------------

var myMap = new Map();
myMap.set(NaN, "not a number");

myMap.get(NaN); // "not a number"

var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"
// NaN 做爲 Map 的鍵來講是沒有區別的
複製代碼

Map是一個構造函數，它接受一個可選的參數，能夠是一個數組或者其餘iterable 對象，其元素或爲鍵值對，或爲兩個元素的數組。 每一個鍵值對都會添加到新的Map。

let m1 = new Map([[1,2], ['key', 'value'], [false, undefined], [null, null], [undefined, 1], [undefined, undefined]])
console.log(m1)
// Map(5) {1 => 2, "key" => "value", false => undefined, null => null, undefined => undefined}
複製代碼

Map是能夠直接被迭代的，一個Map對象在迭代時會根據對象中元素的插入順序來進行 — 一個for...of循環在每次迭代後會返回一個形式爲[key，value]的數組。

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
// 將會顯示兩個log。一個是"0 = zero"另外一個是"1 = one"

// 合併兩個 Map
var first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

var second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);

// 合併兩個Map對象時，若是有重複的鍵值，則後面的會覆蓋前面的。
// 展開運算符本質上是將Map對象轉換成數組。
var merged = new Map([...first, ...second]);
複製代碼

Map 的原型屬性

除了constructor，Map原型上還有一個size屬性，它返回Map對象鍵值對的數量。

Map 的原型方法

Map一共有 10 個原型方法。

set(key, value)

爲Map對象添加或更新一個指定了鍵（key）和值（value）的（新）鍵值對。它返回Map對象。

let m2 = new Map()
m2.set(1,2).set(2,3).set(2,100)
console.log(m2)
// Map(2) {1 => 2, 2 => 100}
複製代碼

get(key)

返回鍵對應的值，若是不存在，則返回undefined。

has(key)

若是指定元素存在於Map中，則返回true。不然返回false。

delete(key)

移除Map對象中指定的元素，若是Map對象中存在該元素，則移除它並返回 true；不然若是該元素不存在則返回false。

clear()

移除Map對象中的全部元素。返回undefined。

keys()

返回一個新的Iterator對象。它包含按照順序插入Map對象中每一個元素的key值。

var myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

var mapIter = myMap.keys();

console.log(mapIter.next().value); // "0"
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // Object
複製代碼

values()

返回一個新的Iterator對象。它包含按順序插入Map對象中每一個元素的value值。

entries()

返回一個新的包含[key, value]對的Iterator對象，返回的迭代器的迭代順序與Map 對象的插入順序相同。它就像直接迭代Map對象同樣。

forEach(callback[, thisArg])

將會以插入順序對Map對象中的每個鍵值對執行一次參數中提供的回調函數。第二參數是回調函數的this指向，返回undefined。

第一個參數回掉函數的參數爲：

1. value 元素的值
2. key 元素的鍵
3. Map 當前正在被遍歷的對象

function logMapElements(value, key, map) {
    console.log("m[" + key + "] = " + value);
}
Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements);
// logs:
// "m[foo] = 3"
// "m[bar] = [object Object]"
// "m[baz] = undefined"
複製代碼

[@@iterator]()

@@iterator屬性的初始值與entries屬性的初始值是同一個函數對象。

var myMap = new Map();
myMap.set('0', 'foo');
myMap.set(1, 'bar');
myMap.set({}, 'baz');

var mapIter = myMap[Symbol.iterator]();
//返回的實際上是個generator
console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]
複製代碼

Map 和 JSON

Map不能使用JSON.stringify轉換爲json，若是是字符串鍵的話，能夠先將它轉化爲object，再轉化爲json，或者直接轉化爲數組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"]]]'
複製代碼

Map 靜態屬性

1. Map.length 值爲0。
2. Map[Symbol.species] 返回一個Map構造函數，通常用於建立派生對象。
3. Map.prototype 原型

WeakMap

WeakSet對象容許你將弱保持對象存儲在一個集合中。

它和Map相似，但有兩點不一樣：

1. WeakSet對象中只能存放對象引用, 不能存放值, 而Set對象均可以。
2. WeakSet對象中存儲的對象值都是被弱引用的, 若是沒有其餘的變量或屬性引用這個對象值, 則這個對象值會被當成垃圾回收掉. 正由於這樣, WeakSet對象是沒法被枚舉的, 沒有辦法拿到它包含的全部元素.

WeakMap 原型屬性

它只有一個constructor屬性。

WeakMap 原型方法

WeakMap有 5 個原型方法（set get has delete clear），相比Map它少了迭代類型的方法和clear方法。

WeakMap 靜態方法

對比Map，它少了Symbol.species屬性。

WeakMap 的用途

WeakMap通常將DOM節點做爲鍵，這樣DOM節點被刪除了，WeakMap中也會消失，這樣久不存在內存泄漏。

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);
複製代碼