初探 JavaScript 的 Map 物件

前言

  在 ES6 新增了 Map 物件，它和 Object 有什麼不一樣呢?在此把學習的過程做個紀錄。

內容

  ES6 提供了 Map 物件，在以前這樣的功能直接用 Object 就可以做出類似的的效果，但有個功能就不容易實現，就是 key 的型態不被侷限在 string ，可以用 number 作為 key ，接著看範例

let myObj = {
  'a' : 'This is a',
  'b' : 1234,
};
console.log(myObj.a );//This is a
console.log(myObj.b );//1234
//
let myMap = new Map();
myMap.set('a','This is a');
myMap.set('b',1234);
myMap.set(9999,'This is 9999');
console.log(myMap.get('a') );//This is a
console.log(myMap.get('b') );//1234
console.log(myMap.get(9999) );//This is 9999
//
let initMap = new Map([
  [ 'a' ,  1234],
  [ 'b' ,  5678],
  [ 'c' ,  9988],
] );
//
initMap.delete('c');
//Print map's content
initMap.forEach( function(value,key,map){
  console.log(` ${key} : ${value}`);
} );

//
console.log( initMap.size );//2
for( let key of initMap.keys() ){
  console.log( `initMap key:${key}` );
}
console.log( initMap.has('a') );//true
console.log( initMap.has('c') );//false

範例在開頭先用 Object 的方式來實現，接著看到 Map 的應用，透過 set() 來新增內容，再透過 get() 來取得對應的數值，注意這個 Map 同時包含了 string 與 number 的 key，這是舊的 Object 難以實現的。如果每次新增都要用 set() 來加會有些不方便，可以像 Object 一樣用 JSON 給嗎?答案是肯定的，範例用 initMap 來示範如何直接初始化 Map ，用起來很像但格式要注意，接著透過 delete() 來刪除內容，透過 foreach() 來列應內容，要注意 foreach() 的參數 function 的 參數排列順序是 value , key , map 。如果要取得有多少個內容的話可以透過 size ，但要注意它是個 property 而非 function。要作瀏覽 Map 時，可以透過 keys() 搭配 for ... of  來完成，最後還有常見的功能 has() ，用來確認 Map 是否有 key 。

  Map 的用法和常見的 dictionary 類似，但它的 key 型態不再侷限在 string 或 number 這樣的單一型態，算是一個滿特別的設計，可以解決以前要 number 當 key 時總是要作轉型的動作，加上又可以像 Object 一樣初始化，總體來說算是個好用的新功能。

 

參考資料

[ developer.mozilla.org ] Map