JavaScript Map 物件的二三事

在程式開發的過程中，透過建立特殊的資料結構以讓我們能使用 Key 直接對應到 Value 的資料，是非常常見的動作。

JavaScript 的開發者長久以來，使用原始的物件 (Plain Object) 來滿足這方面的需求。但，畢竟物件設計的初衷，不是專門用來滿足鍵值對應 (Key-Value Pair) 的運算情境。因此，總有那麼些缺憾。

近年，我們終於擁有了一個特製的 Map 物件，提供最佳化過的 Key 和 Value 對應的資料結構。以下就來介紹這個 JavaScript ES6 中最新的 Map 物件，給大家認識認識嘍。

Photo by Sandy Millar on Unsplash

一、基本使用方法：

在 JavaScript 中使用 Map 物件主要有以下三個步驟：

1. 建立 Map 物件：

let map=new Map();

2. 將鍵值對 (Key-Value Pair) 放進 Map 物件中：

map.set("apple", "蘋果"); // map.set(鍵,值);
map.set("dog", "狗狗");

3. 根據 Key 取得 Value 的資料：

let data;
data=map.get("apple"); // 取得 "蘋果"
data=map.get("elephant"); // 沒有對應的 Key，取得 undefined

二、進階使用方法：

Map 物件支援以下進階的使用方式：

1. 支援 size 屬性：

// 延續上方例子中建立的 map 物件
console.log(map.size); // 取得鍵值對的數量

2. 支援 for … of 迴圈：

// 延續上方例子中建立的 map 物件
for(let entry of map){ // 逐一取得 map 物件的鍵值對，放入 entry 中
    console.log("Key:", entry[0], "Value:", entry[1]);
}
// 以上印出
// Key: apple Value: 蘋果
// Key: dog Value: 狗狗

3. 支援 forEach 方法：

// 延續上方例子中建立的 map 物件
map.forEach((value, key)=>{
    console.log("Key:", key, "Value:", value);
});
// 以上印出
// Key: apple Value: 蘋果
// Key: dog Value: 狗狗

三、是否該使用 Map 物件？

相對於使用原始的物件 (Plain Object) 來處理 Key 和 Value 對應的需求，使用 Map 物件有以下優點：

1. Map 物件的 Key 可以是字串或「任何物件」。
2. 相對於原始的物件，沒有排序概念；Map 物件中的鍵值對 (Key-Value Pair) 是按照加入的順序排列的。
3. 如上範例，可以輕易地用 size 屬性追蹤鍵值對的數量。
4. 如上範例，支援許多好用的逐一取值法 (Iterable)，且速度更快。

然而，使用 Map 物件也有以下缺點：

1. 大量建立鍵值對資料時，比原始物件來得慢。
2. 程式碼看起來比較冗長。

四、小小結語

Map 物件在 JavaScript 中雖然是相當新穎的語法，但瀏覽器的支援度卻相當的好 (只有 IE 不支援)。在以年輕族群為目標客戶的團隊或公司中，都可以放心地使用。

JavaScript 由於持續的受到開發者社群的歡迎，至今依然擁有充足的創新能量，不斷的改善執行引擎的效能、提供更方便的語法工具給大家。身為一個忠實老粉絲，彭彭感到前途一片光明 :)