new Map() 讓鍵值對操作變的更簡潔

new Map()

介紹：

對象保存鍵值對，並記住鍵的原始插入順序。任何值（對象值和原始值）都可以用作鍵或值。

  // const map = new Map();
  const map = new Map([[1, 2], [{ a: 1 }, 2], ["1", 2]]);
  console.log(map) // Map(3) {1 => 2, {…} => 2, "1" => 2}

實例屬性和方法：

size 項數
set 添加一個新建元素到映射
clear　 從映射中移除所有元素
delete 從映射中移除指定的元素
has 如果映射包含指定元素，則返回 true
get 返回映射中的指定元素
toString 返回映射的字符串表達式
valueOf 返回指定對象的原始值

const myMap = new Map();

// 任何值（對象值和原始值）都可以用作鍵或值
const keyObj = {};
myMap.set(keyObj, 'value associated with keyObj');
console.log(myMap.get(keyObj)) // value associated with keyObj

// 添加 和 獲取 時所用的 key 指向不同地址，所以無法獲取
myMap.set({}, 'value associated with {}');
console.log(myMap.get({})); // undefined

// 雖然 NaN !== NaN，但在 new Map()中 NaN 被視為與 NaN 相同
myMap.set(NaN, 'value associated with NaN');
console.log(myMap.get(NaN)); // value associated with NaN
console.log(NaN === NaN); // false

遍歷方法：

forEach()
語法：Map.prototype.forEach(callbackFn, this)
每循環一項，執行一次回調 callbackFn，第二個參數改變回調函數的 this 指向，
注意：callbackFn 如果是箭頭函數，this 指向父級

const map = new Map([[1, 1], [{ a: 1 }, 2], ["1", 3]]);
const fn  = function(value, key, map) {
  console.log(`${value} = ${key}`, this)
}
map.forEach(fn, window);
// value = key Window
// 2 = 1 Window

keys()
values()
entries()
for..of

let myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

for (let [key, value] of myMap) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one

for (let key of myMap.keys()) {
  console.log(key)
}
// 0
// 1

for (let value of myMap.values()) {
  console.log(value)
}
// zero
// one

for (let [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one

new Map() 的好處

1. 簡化代碼
   比如有這樣的一個需要：后端返回 0 需要前端展示 "未上架"，1 代表 "已上架"，2 代表 "正在上架"。
   通常我們可以寫一段 switch ，更或者寫一堆 if else 。

let res = 2;
let resetValue = (res) => {
  switch (res) {
    case 0:
      return "未上架";
    case 1:
      return "已上架";
    case 2:
      return "正在上架";
    default:
      return "--";
  };
};
console.log(resetValue(res))

加下來對比使用 new Map() 的代碼量

let res = 2;
let resetValueMap = new Map([[0, "未上架"], [1, "已上架"], [2, "正在上架"]]);
console.log(resetValueMap.get(res) ? resetValueMap.get(res) : "--")

2. 方便追加判斷 匹配項
   如果有不確定個數的匹配項，或者 待匹配項 是不確定的，此時 switch 將不能再用，此時就可以可以 new Map() 的 set 方法。

let res = "qs";
let resetValueMap = new Map([[0, "未上架"], [1, "已上架"], [2, "正在上架"]]);
resetValueMap.set("qs", "缺貨"); // resetValueMap.set(key, value);
console.log(resetValueMap);
// 使用 resetValueMap
console.log(resetValueMap.get(res) ? resetValueMap.get(res) : "--");

當然，你可以可以使用數組包對象的方式

let res = "qs";
let resetValueAry = [{0: "未上架"}, {1: "已上架"}, {2: "正在上架"}];
resetValueAry.push({"qs": "缺貨"});
console.log(resetValueAry)
// 使用 resetValueAry
let value = "--"
resetValueAry.forEach((item) => {
  if (item[res]) {
    value = item[res];
  }
})
console.log(value)

明顯再使用的時候，沒有 new Map() 方便