Map 它是什麼?
以往前端在處理資料時，常常用 Object 型的結構，例如 json 就是很常見的；而 Map 是 ES6 新加入的資料型結構，你可以把它想成是跟 Object 很相似的兄弟，因為它們都擁有 Key / Value，但 Map 又多了以下幾項的優勢:
1.Size (大小)
Map 具有 size 屬性，而 Object 沒有內置的 method 來取得它的大小，詳細其他的 method 後面說寫法時會提到。
2.Iteration (迭代)
Map 可以直接使用 forEach、for-of 等等…迴圈方式直接去取值，如同 Array 那樣，詳細的後面說寫法時會有範例，而 Object 眾所周知要多寫一點 code 才能取得，雖然 ES2017 (ES8) 有新增了 Object.values() 和 Object.entries() 可以拿到了，但我們這篇主角是 Map，這兩個方法就不提了。
3.Flexibility (靈活性)
Map 的 key 值可以是任何的數據類型，甚至是 Object or Function 當 key 都可以，而 Object 只能是 String or Symbols 類型。
4.Ordered (有順序性)
Map 的 key 值會根據被添加資料的時間去排好順序，Object 不會。
就前面提到的優勢來看，當你遇到的是一個很大型的資料結構處置時，你就可以考慮採用 map，尤其是當 API respond 非常大個 json，前端接到後轉為 map 其具有的 Iteration、Ordered 兩大特性會很有幫助。
Map 的寫法
說完了特性，接著我們來看一下怎麼寫它，直接上 Code 吧!
1.Initial
直接 new 出來即可，可以看到它長得有點類似 Object 的結構。
2. Add Values To Map
幫 Map 添加 value 可以使用 set()，第一個參數是 key 第二個參數是 value，可以看到 log 出來的結果，是個類似 Object + Array 的東西，有 Object 的 Key / Value 又有 Array Index 的概念，如下:
這也是前面提到的 Map 可以用 Size 屬性的原因，我們可以把它想成是類 Array.length 的感覺，那既然它類 Object + Array 怎麼直接 init 時就賦值，我們來看一下:
我們使用的是一個大個 Array，裡面再用小的 Array 去包覆每個 Key / Value，那也許你心中有個疑問，怎麼把一般的 Object 結構跟 Map 之間作轉換呢，如下:
這裡使用 Object.entries() & Object.fromEntries() 就可以輕鬆的互相轉換，至於對它們好奇的小夥伴在自行參考 [Entries] & [FromEntries] 囉。
3. Map Operation
添加完 value 後，我們來說 Map 的 7 個常用操作屬性:
- keys: 類似於 Object 的 constructor 會 return MapIterator 屬性，它帶有 Map 當前全部的 key
- values: 類似於 Object 的 constructor 會 return MapIterator 屬性，它帶有 Map 當前全部的 value
- has: 用來檢查是否有個 key 存在
- get: 通過 key 取得 item value
- size: 取得當下存在 Map 中有多少 item
- delete: 通過 key 刪除某個 item
- clear: 清空整個 Map
直接上 7 個操作的 Code 來看看
至於其他更詳細的屬性可以參考 [這裡]。
4. Map Iteration
接著來看前面提到的 Map 可以像 Array 那樣作迭代，可以使用 forEach 之類的 method，但有一個特別點必須說一下
在 Map 使用迴圈是歷遍 value/ key，不像 Array 是歷遍 item / index
但這也顯示出了 Map 在這方面比 Object 的優點，因為 Object 要達到這種效果需要再轉換，例如使用我們熟悉的 keys()、values()、entries() 之類的 method，那接著就直上 Code 來看看吧!
使用 Map 時需要注意的點
經過前面的介紹 Map 雖然好用，但它也有一些小陷阱畢竟是新的東西，我們來看看哪幾個該注意的地方
1.任何的 type 都可以當成 key，且不允許重複的 key
上面例子中把 “1”、1、true 設成了 key，且當 “1”key 被重複設定後，對應的 value 就被覆蓋了。
2.使用相同的 Object 當 key，Map 中只會有一個 item
我們都知道 JS 在處理 Object 時，都是以記憶體中的位址去取得 target，例如像是比較 {} === {} return false，原因就在兩者雖然都是空 Object，但存放在不同記憶體中，那如果使用同個記憶體位址的 Object 相比就會得到 true，這也衍生出以下的地雷，請看 Code
可以看見當使用 set 塞入兩個空 Object，因為兩個放在不同記憶體中，所以沒問題，但是當同個位址指向的 Object 被 set 後，就產生重複 key 導致 value 有後蓋前的問題了。
總結起來，Map 與 Object 類似，因為它們都有 Key / Value，但 Map 使用上比 Object 更方便的就是自帶 size、forEach 等屬性，而且 key 還可以設成任意 type 真的是挺好用的，建議可以嘗試使用看看囉。
