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 返回指定对象的原始值

 

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

 

简化代码
比如有这样的一个需要：后端返回 0 需要前端展示 "未上架"，1 代表 "已上架"，2 代表 "正在上架"。
通常我们可以写一段 switch ，更或者写一堆 if else 。

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

 

加下来对比使用 new Map() 的代码量

 var res = 2;
        var resetValue=new Map([
            [1,'未上架'],
            [2,'已上架'],

        ])
        function switchFn(res){
            return resetValue.has(res)?resetValue.get(res):'---'
        }
        console.log("resetValue", switchFn(res));

方便追加判断 匹配项
如果有不确定个数的匹配项，或者 待匹配项 是不确定的，此时 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) : "--");