你可能問，都2021年了蒙兰，咋還在討論Map基礎磷瘤？這不是Vue 3.0來了么，2021年就可以上生產了癞己，Vue 2.0可以遍歷Map膀斋，但是不支持響應式，現(xiàn)在3.0支持Map的響應式了痹雅，你說要不要開始學呢仰担？
廢話不說，跟Object做個對比绩社。
Map優(yōu)勢方面
| Map | Object | |
|---|---|---|
| key類型 | 任意類型 | String 或 Symbol |
| 長度 | .size直接得出 | 遍歷或Object.keys().length得出 |
| 頻繁增刪鍵值對 | 性能好 | 性能差 |
| 屬性純凈度 | 純凈 | 可能與原型鏈上的屬性沖突 |
| 支持forEach循環(huán)或for...of...循環(huán) | 支持 | 不支持 |
| 屬性排序 | 按插入順序 | 不確定的順序 |
Map劣勢方面
| Map | Object | |
|---|---|---|
| 可被JSON.stringify處理 | 不能 | 能 |
| 適用于前后端數據傳遞 | 由于不被JSON支持摔蓝，所以不適合 | 適合 |
Map無所謂優(yōu)劣方面
| Map | Object | |
|---|---|---|
| 直接量寫法 | 構造函數傳入二維數組 | 直接寫鍵值對 |
總結
當需要使用除 String 和 Symbol 以外的鍵名時，那么Map是最佳解決方案愉耙。
如果需要按插入順序遍歷鍵值對贮尉，用Map。
頻繁增刪改查朴沿，用Map猜谚。
想用更方便的原生方法操作，用Map赌渣。
用于設計模式魏铅。我們經常遇到N個if...else...，這時候就需要考慮設計模式坚芜，由于正則表達式可以作為Map的key览芳，所以可以準備一堆鍵值對，來判斷一個字符串是否符合正則表達式鸿竖，通常用于表單驗證沧竟，可以寫起來更優(yōu)雅。
關于Map用于前后端數據交互
Map由于不被JSON支持缚忧，所以不適合前后端數據交互悟泵，即便是前端加工后端數據，也不值得專門把對象轉為Map闪水，畢竟數據都非常簡單魁袜，只有在特定業(yè)務需要的前提下，才會有對象轉Map的必要敦第，因此峰弹，應當把Map用在前后端數據交互以外的其他某些場合。
Map的原生屬性
- size芜果，獲取長度
Map的操作方法
.set(key, value)：返回整個Map結構鞠呈。如果key已經有值，則鍵值會被更新右钾，否則就新生成該鍵蚁吝。由于返回整個Map，所以可以鏈式操作舀射。
.get(key)：獲取不到則返回undefined窘茁。
.has(key)：鍵是否在Map中，返回布爾值脆烟。
.delete(key)：刪除成功返回true山林，失敗返回false。
.clear()：Map會成為空Map邢羔，方法執(zhí)行返回undefined驼抹。
Map的遍歷方法
.keys()：返回鍵名的遍歷器（即MapIterator）。不支持
.forEach拜鹤，支持...框冀。.values()：返回鍵值的遍歷器（即MapIterator）。不支持
.forEach敏簿，支持...明也。.entries()：返回所有成員的遍歷器（即MapIterator）。通常沒用惯裕，遍歷Map本身可以使用
.forEach温数，遍歷它的遍歷器反而不能用.forEach，也就是說這個遍歷器更弱轻猖。.forEach()：遍歷 Map 的所有成員帆吻。跟數組完全一致的用法。
Map如何使用數組的原生方法咙边？
基本原則就是先利用解構得到二維數組猜煮。
Map、對象败许、數組最優(yōu)雅互轉
- Map轉對象
沒什么優(yōu)雅的方法王带，只能是遍歷Map，然后依次給對象附加屬性市殷。
const map = new Map();
map.set(1,"foo").set(2,"bar").set(3,"baz");
const mapToObj = (map) => {
let obj = {};
for(let [k,v] of map) {
obj[k] = v;
}
return obj;
}
console.log(mapToObj(map));
- Map轉數組
最優(yōu)雅辦法是解構愕撰，這種方法會得到二維數組，每個元素格式類似[1, 'foo']。如果只想得到鍵或者值組成的數組搞挣，需要改成...map.map(v=>v[0])或者...map.map(v=>v[1])带迟。
const map = new Map();
map.set(1,"foo").set(2,"bar").set(3,"baz");
const arr = [...map];
console.log(arr);
- 對象轉Map
優(yōu)雅辦法是使用Object.entries()將對象解構，得到的結果也是二維數組囱桨，跟...將可遍歷對象解構的結果是一樣的仓犬。恰好new Map()接受二維數組轉換為Map。
let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));
- 數組轉Map
上面已經說過舍肠，符合格式的二維數組可以直接轉換為Map搀继，如果是一維數組轉Map呢？首先這不一定有必要翠语，因為可能一維數組轉Set更好一些叽躯，如果一定要轉Map，可以這樣：
const arr = ["foo","bar","baz"];
const arrToMap = (arr) => new Map(arr.map( (value,key) => [key,value]));
console.log(arrToMap(arr));
