ES6: Map 物件，特性是有順序性
在這篇文章中，我深入探討了 ES6 的 Map 物件和它獨特的方法。我示範了如何使用 Map 來存儲鍵值對，並介紹了 Map 的多個操作，包括新增、取值、檢查、迭代和清空等。我還比較了 Map 與傳統 Object 的效能和特性，指出 Map 在處理大量動態鍵值對時的優勢。此外，Map 的順序性和對各種數據類型鍵的支援，使其成為一個非常靈活和強大的數據結構選項。
基本上 Object 的用法在 Map 都可以用，但是 Map 有一些自己專屬的 Method，而且在沒有大量建立鍵值對 (Key-Value Pair) 的情況下效能更佳。
※ 雖然 Map 可用 Object 的方法，但用了以後就會失去 Map 特性
1. Map 用法
let map = new Map()
// 1. 新增 key-value pairs (鍵值對)
map.set('tom', 28)
map.set('jay', 13).set('ban', 23).set('luna', 49)
// Map(4) {'tom' => 28, 'jay' => 13, 'ban' => 23, 'luna' => 49}
// 2. 用 key 來獲取 value
map.get('tom') //get 28
// 3. 獲取 Map 的長度
map.size // get 4
// 4. 檢查 Map 是否擁有該 key，會回傳 boolean 值
map.has('tom') // true
// 5. Map Iteration (迭代)
map.keys() // {'tom', 'jay', 'ban', 'luna'}
map.values() // {28, 13, 23, 49}
map.entries() // Map(4) {'tom' => 28, 'jay' => 13, 'ban' => 23, 'luna' => 49}
// 6. 刪除 Map 的某個 key，如果刪除成功會回傳 true，失敗則是 false
map.delete('tom') // true
// 7. 清除 Map 所有的鍵值對，不會回傳值
map.clear()
// 8. 宣告的時候就賦值，傳入 [key , value]
let map = new Map([["tom", 18],["jay", 13], ["ban", 23], ["luna", 49]])
// 9. 遍歷方法
for(let item of map){
console.log("Key:", item[0], "Value:", item[1])
}
/*
Key: tom Value: 18
Key: jay Value: 13
Key: ban Value: 23
Key: luna Value: 49
*/
map.forEach((value, key) => {
console.log('Key:', key, 'Value:', value)
})
/*
Key: tom Value: 18
Key: jay Value: 13
Key: ban Value: 23
Key: luna Value: 49
*/
2. Map 特性
- Map 的 key 是可以是原始型別、物件、函式
- Object 的 key 限定為 string、 symbol
- Map 可以使用 array 的方法，像是 forEach
- Map 中的 keys 有順序性
- 需要頻繁的新增刪除屬性或找東西時，Map 的效能會比 Object 更好
- Map 物件瀏覽器的支援度卻相當的好，只有 IE 不支援
參考資料
1. JavaScript Map 物件的二三事
2. Map vs. Object
3. [資料結構] — Map