文科少女學程式

map這個陣列的操作方式，只要從超級新手升級到初階新手，基本上都知道。但是說到Map這個東東，可能就有些人本來沒看過了。沒錯！！就是我！！！這邊說的就是我！！！！學藝不精的我本來沒看QQ
不過本來沒看過沒關係，現在看過了，那就花點時間把他是什麼給搞懂吧！

Map是什麼？

從MDN的說明內容可以理解到Ｍap是一個object，以key-value組成，並且會記住keys原始的插入順序。而且任何值都可以當作Key或value使用(包含物件或是或原始型別)。

Map相關的使用

建立
想要建立一個Map可以用以下這個方式。
可以直接用new Map()建立一個空的Map，也可以用陣列把key和value放入，建立一個有屬性的Map。

添加屬性
可以透過set()，來添加屬性。
用set()放入要加入之屬性的key和value。

取得屬性
想要取得特定屬性，可以用get()，帶入想要取得之屬性的key名稱就可以取得要的屬性。'

刪除屬性
想要刪除單獨的特定屬性時，可以使用delete()，使用方式跟get一樣是放入要刪除的屬性Key。

清空Map
使用clear()可以清空整個map，下面範例使用clear()後，myMap就變成沒有屬性了。

取得屬性數量
想要取得Map這個物件的屬性數量要使用size

判斷是否有某個特定屬性
Map這個物件的操作，還可以透過has()確認有沒有特定Key的屬性。

迭代
Map這個物件還可以做迭代的操作，主要有以下兩種方式可以進行：
1. for ... of ...

2. forEach

複製
複製的動作可以把一個Map放到new Map裡建立。

合併
合併則可以用解構的方式把Map用...解開再放入new Map裡面。

想要取得所有key、value或所有內容還有以下這幾種方式：
以下的這些方式都會回傳一個iterator object。

keys() - 列舉所有Key


values() - 列所有value


entries() - 列舉所有key和value

Map和object的差異
接下來看一下Map一樣是object，那和一般的objec又有什麼差異呢？
1. object沒有順序，Map有順序
這點可以看看以下這個案例，更能感受出差異點
在以下這個物件中，視覺上看起來跑迴圈的順序應該會字串a到數字2，但是事實上真的是這樣嗎？

來看看實際上跑出來的結果！！
卻是顛倒過來的，因為object並沒有排序。

 

但如果是Map的話，結果就會有不同了。

如果是Map，印出來就會和我們一開始設定的排序一樣。

2. object的key一定要是字串或symbols，Map的key可以是任何值(包含function、數字等)
3. 想取得Map的長度可以用size()，但是想取得object的長度要用Object.keys(obj).length的方式做計算。

Map和map的差異
再來看一下Map和map這兩個一樣是「map」的東西有什麼差異呢？
其實雖然它們名字一樣，但是以類型來看其實就很明顯知道它們兩個是不一樣的東西，怎麼說呢？因為「Ｍap是一個物件」，「map則是一個依照邏輯回傳一個新陣列的方法」。

實務案例
最後來分享一下最近看到前輩實作的實務案例，這個實務案例是為了防止在第二次打開使用v-if的查看顯示大圖的彈窗後，又再打一次api request的狀況。
解決方案：用Map儲存打過一次api的照片src和轉成base64的結果，因為不需要考慮畫面重整後，一樣還是需要重打一次api的狀況，所以不把相關資訊存在localStorage。
簡單來看一下相關的程式碼：

這邊的動作主要是做set和get的動作。
在這個案例中，用object也是OK的，不過因為在這個案例中需要用的動作是新增和取得，所以用Map看起來反而程式碼更簡潔，而且Map新增元素的速度也比較快。

以上就是這次的Map學習筆記！
好啦！打完收工！