【JavaScript 變數】變數類型介紹：Map

Photo by Mohammad Rahmani on Unsplash

Map 資料是 key / value 方式紀錄

object 的 key 只能是 字串 (string)，Map 的 key 則可以是 任何 的資料型態
Map 中的資料是有序的，當你遍歷一個 Map 資料結構時，會依照 key-value pairs 先前寫入的順序 (insertion order)。

函式資料

變數	說明
Map.size	元素數量
Map.has()	是否有此鍵值資料
Map.get()	取得鍵值資料
Map.set()	設定鍵值資料
Map.delete()	刪除鍵值資料
Map.clear()	刪除全部資料
Map.keys()	取得全部鍵值資料
Map.values()	取得全部數值資料
Map.forEach()	遍歷 Map 資料
Map.entries()	取得 [key, value] 資料

Map 允許使用函數、物件、其他類型作為 key 值

set(key, value)

const func = () => null;
const object = {};
const array = [];
const bool = false;
const map = new Map();

map.set(func, 'value1');
map.set(object, 'value2');
map.set(array, 'value3');
map.set(bool, 'value4');
map.set(NaN, 'value5');

// Map(5) {
//     [Function: func] => 'value1',
//         {} => 'value2',
//         [] => 'value3',
//         false => 'value4',
//         NaN => 'value5'
// }
console.log(map);

遍歷元素

物件需要透過 Object.keys or Object.values or Object.entries，或者 for..in 去做循環遍歷元素

Map 可以直接遍歷，使用 for..of or forEach

for(let [key, value] of map){
    console.log(key)
    console.log(value)
}

map.forEach((key,value)=>{
    console.log(key)
    console.log(value)
})

Map 與 Object 效率比較

查詢鍵值效率

let obj = {}, map = new Map(), n = 1000000
for(let i = 0 ; i < n ; i++){
    obj[i] = i
    map.set(i, i)
}

let result;
console.time('Object');
result = obj.hasOwnProperty('999999');
console.timeEnd('Object');
// Object: 0.250ms

console.time('Map');
result = map.has(999999);
console.timeEnd('Map');
// Map: 0.095ms (2.6 times faster)

新增效率

console.time('Object');
obj[n] = n;
console.timeEnd('Object');
// Object: 0.229ms

console.time('Map');
map.set(n, n);
console.timeEnd('Map');
// Map: 0.005ms (45.8 times faster!)

刪除效率

console.time('Object');
delete obj[n];
console.timeEnd('Object');
// Object: 0.376ms

console.time('Map');
map.delete(n);
console.timeEnd('Map');
// Map: 0.012ms (31 times faster!)

for loop 效率

Map在 for loop 下較慢

console.time('Object');
for (let i = 0; i < n; i++) {
  obj[i] = i;
}
console.timeEnd('Object');
// Object: 32.143ms

let obj = {}, map = new Map(), n = 1000000;
console.time('Map');
for (let i = 0; i < n; i++) {
  map.set(i, i);
}
console.timeEnd('Map');
// Map: 163.828ms (5 times slower)

Map 缺點

賦值和搜索操作都是 O(n) 的時間複雜度（n 是鍵值對的個數）
- 因為這兩個操作都需要遍歷全部整個陣列來進行匹配
可能會導致 內存洩漏(Memory Leak)，因為陣列會一直引用著每個鍵和值。這種引用使得垃圾回收算法不能回收處理他們，即使沒有其他任何引用存在了。

WeakMap

WeakMap 特性

只接受 object 當作鍵值（key），null 也不能當鍵值
基本資料型態 (primitive data types) 都不能被當作是 key
WeakMap 中的 key 所指向的 object 不會被垃圾回收機制 (garbage collection) 計入參考
- weak: 弱引用 (weakly reference)
WeakMap 中的 object 可能隨時會被自動回收 (garbage collected)，而當 object 被回收後，其所對應的 key-value pair 也會自動被刪除。
value 可以是任何型態，包含像 object 或 function
key 和 value 可以是任何物件，甚至是個 WeakMaps

var wm = new WeakMap();

// 錯誤
// TypeError: Invalid value used as weak map key
wm.set('a', 1);

// 錯誤
// TypeError: Invalid value used as weak map key
wm.set(101, 2);

const wm1 = new WeakMap(),
   wm2 = new WeakMap()
const o1 = {},
   o2 = function() {};

wm1.set(o1, 123);
wm1.set(o2, 'abc');
// value 可以是任何型態，包含像 object 或 function
wm2.set(o1, o2);
// key 和 value 可以是任何物件，甚至是個 WeakMaps
wm2.set(wm1, wm2);

WeakMap 使用情境

WeakMap 的典型運用之一是引用 DOM 元素物件，當 DOM 元素被移除後，對應的 WeakMap 紀錄也會自動被移除，所以說用 WeakMap 可以方便地避免內存泄露 (memory leak) 的問題。

使用 DOM 當作 WeakMap 的 key

let myBtn = document.getElementById('btn');

let wm = new WeakMap();
wm.set(myBtn, {clickCnt: 0});

myBtn.addEventListener('click', function() {

  let btnData = wm.get(myBtn);
  btnData.clickCnt++;

}, false);

Reference

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話，可以透過下面支付方式贊助作者喝咖啡，如果有什麼建議或想說的話可以贊助並留言給我

If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!

方式 Method	贊助 Donate
PayPal	https://paypal.me/kejyun
綠界 ECPay	https://p.ecpay.com.tw/AC218F1
歐付寶 OPay	https://payment.opay.tw/Broadcaster/Donate/BD2BD896029F2155041C8C8FAED3A6F8