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() 方便