[資料結構] — Map

發表於 更新於 分類於
Map是JavaScript ES6中新增的資料結構 ，類似於object ，不過Map還是跟object有著以下的差異:

Map 是 JavaScript ES6 中新增的資料結構 ，類似於 object ，不過 Map 還是跟 object 有著以下的差異:

  1. Map 的 key 是可以是原始型別、物件、函式，而 object 的 key 限定為 string、 symbol

  2. Map 為 array-like (類陣列)所以可以使用 array 的方法，像是 forEach 等等

  3. Map 中的 keys 會根據被添加的時間而有順序性，而 Object 則沒有順序性

  4. 假如需要頻繁的新增刪除屬性時，Map 的效能會比 Object 更好

如何宣告一個新的 Map

1
2
3
4
5
6
let map = new Map();
//也可以在宣告的時候就賦值，傳入[key , value]
let map = new Map([
  ["amber", 18],
  ["shane", 33],
]);

Map.set(key, value)

新增 key-value pairs(鍵值對)，如果 key 已經存在，舊的值會被新的值覆蓋

1
2
3
//第一個值傳入 key 第二個值傳入 value
map.set("tom", 28);
map.set("jason", 27);

因為 set 會回傳 map 的本身，所以可以使用 chaining(鏈)的寫法

1
let map = new Map().set("jay", 13).set("ban", 23).set("luna", 49);

Map.get(key)

用 key 來獲取 value，如果沒有這個 key 會回傳 undefined

1
map.get("tom"); //get 28

Map.size()

獲取 Map 的長度

1
map.size; // get 2

Map.has(key)

檢查 Map 是否擁有該 key，會回傳 boolean 值

1
map.has("tom"); // true or false

Map.delete(key)

刪除 Map 的某個 key，如果刪除成功會回傳 true，失敗則是 false

1
map.delete("tom"); // true or false

Map.clear()

清除 Map 所有的鍵值對，不會回傳值

1
map.clear("tom");

Map Iteration (迭代)

  • **Map.keys() :**回傳 map 所有的 key
  • **Map.values():**回傳 map 所有的 value
  • **Map.entires():**回傳 map 每個元素的[key, value]的鍵值對
1
2
3
4
5
6
7
let map = new Map([
  ["amber", 18],
  ["shane", 33],
]);
map.keys(); // {'amber', 'shane'}
map.values(); // {18, 33}
map.entires(); // {"amber" => 18, "shane" => 33}

可以搭配 for of 或 forEach 來遍歷 map

1
2
3
4
5
6
7
8
//for of
for (let [key, value] of map) {
  console.log("key", key, "value", value);
}
//forEach
map.forEach((value, key) => {
  console.log("key", key, "value", value);
});

將 map 轉成陣列

1
2
//....擴展運算子
[...map.keys()]; // ["amber", "shane"]

WeakMap

WeakeMap 結構類似於 Map，只接受 object 作為 key ，不接受其它類型的值，不支援迭代的方法 ex. keys()、values()、entries()等等，WeakMap 的 key 為弱引用，當作為 key 的 object 在其它地方沒有被引用的時候，就會被 js 垃圾回收機制自動回收，整個鍵值對都會消失。

1
2
3
4
5
6
let weakMap = new WeakMap();
weakMap.set("mark", 19);
//Invalid value used as weak map key

let obj = { name: "mark" };
weakMap.set(obj, 5);

參考資料:MDN