new Map() 与 new Set()

new Map() 与 new Set() 使用方法与应用场景

一. new Map() 是什么？

new Map() 类似于 对象，属于键值对集合，但是此 键值 与 对象的键值 有所不同，此键值可以包含：
string / number / Object / Array 或 undefined 等等

name	Value
set()	设置属性, 为 map 添加数据，返回 map 集合
get () ()	获取对应的 key 值, 第一个括号为 key 值， 如果 value 为一个函数，**第二个括号为传参**数据 ，详见1.1 方法2
has ()	Boolean，存在：true, 不存在：false 判断 map 成员中是否存在这个值
size ()	Number ， 返回 map 成员的 length
delete()	Boolean，成功：true, 失败：false, 删除指定的 key 值
clear()	清空 map 中的数据
forEach()	遍历 map
keys()	遍历 map 中的 key
values()	遍历 map 中的 value

new Map() 使用方法

let map = new Map()
let map = new Map([ [key,value],[key,value] ])

1. set（key,value） 设置属性

// 基础写法：
let newMap = new Map()
newMap.set(1,'123') // { 1 => '123' }
newMap.set('99', { type: "小明" ) // { '99' => Object }

// 简写
let newMap = new Map([1,'123']) // 数值：{ 1 => '123' }

let newMap = new Map(['2',234]) // 字符串：{ '2' => 234 }

let newMap = new Map(['99', { type: "小明" }]) // 最实用，详见1.1 ---字符串：{ '99' => Object } 

const newMap = new Map([ [{ id: 1 }, "123"] ]);  // 对象：{ Object => '123' } => { key:{ id : 1 } , value : "123" }

const newMap = new Map([ [{ id: 1 }, { type: "小明" }] ]);  // 对象：Object => Object

const newMap = new Map([ [["小红"], "姓名"] ]);  // 数组：{ Array(1) => '姓名' } => { key : ['小红'], value : "姓名" }

const newMap = new Map([ [["小红"], "姓名"] ]);  // undefined：undefined => '未定义'

const newMap = new Map([ [false, "布尔值"] ]);  // 布尔值： false => '布尔值'

const newMap = new Map([ [null, "空"] ]);  // null： null=> '空'

const newMap = new Map([ [NaN, "空"] ]);  // NaN： NaN => '空'

const newMap = new Map([ [NaN, "空"] ]);  // NaN： NaN => '空'

1.1 简洁写法： new Map([‘99’, { type: “小明” }]) 详解

这种写法有很多好处，在书写层面，会使代码简洁明了，一眼就能知道是哪一个的数据，取值也很方便，不用一个个去 this… 值，也不用 const 去定义值，再取定义的值，在代码层面，灵活性高，复用行强，如下：

// 方法 1 : 获取对象
const obj = new Map([
      ["tab1", { name: "小红", age: "18", data: [], method: this.reloadPages }],
      ["tab2", { name: "小明", age: "20", data: [], method: this.reloadPages }],
      ["tab3", { name: "小刘", age: "22", data: [], method: this.reloadPages }]
    ]).get("tab1");
    
 console.log(obj); // {name: '小红', age: '18', data: Array(0), method: ƒ}
 



// 方法 2 : 获取方法并传值1   (使用简洁写法，必须保证数据结构一致，否则会报错，使用set随意)
// 场景：直接调用 key值 对应的方法，并传参，get第二个括号为传参
	new Map([
      ["reload", this.reloadPages],
      ["reset", this.resetFun],
      ["confirm", this.confirmOk]
    ]).get("reload")('123');

//输入结果： reloadPages(str)=>{ consloe.log(str) => '123' }





// 方法 3：获取方法与传值2   (使用简洁写法，必须保证数据结构一致，否则会报错，使用set随意)
// 场景：自定义调用方法/传参字段
const [methods, title] = new Map([
      ["reload", [this.reloadPages, "刷新"]],
      ["reset", [this.resetFun, "重置"]],
      ["confirm", [this.confirmOk, "确认"]]
    ]).get("reload");

console.log(methods,title); // reloadPages()=>{} , "刷新"




// 方法 4： 自定义接口与传参字段
 const [method, data] = new Map([
      ["bd", ["/baidu/list", this.data.pageData]],
      ["jd", ["/JD/list", {pagesize:1,pageindex:10}]],
      [("tm", ["/TM/list", "天猫接口"])]
    ]).get("bd");
    
   this.getGatherFun(method, data);
    
    //自定义方法
    getGatherFun(method, data) {
      request(method,{ ...data }).then(res => {
        if (res.result == 0) {}
      });
    }




// 错误方式，会直接报错

const [method, title] = new Map([
      ["reset", this.resetFun, "重置"]
    ]).get("reset");
    
    
const [method, title] = new Map([
      ["reload", [this.reloadPages, "刷新"]],
      ["reset", this.resetFun],
      ["confirm", this.confirmOk]
    ]).get("reset")('123');

一. new set() 是什么？

new set，一般都是用来数组去重

name	Value
add()	设置属性, 为 set 添加数据，返回 set 集合
has ()	Boolean，存在：true, 不存在：false 判断 set 成员中是否存在这个值
size ()	Number ， 返回 set 成员的 length
delete()	Boolean，成功：true, 失败：false, 删除指定的 key 值
clear()	清空 set 中的数据
forEach()	遍历 set
keys()	遍历 set 中的 key
values()	遍历 set 中的 value

new Set() 使用方法

 const set = new Set(["小明", "小红", "小刘", "小明"]);
 
 const newSet = new Set([
      ["age", { id: 1855 }],
      ["age", { id: 1833 }],
      ["time", { id: 1955 }],
    ]);
    console.log(set); // {'小明', '小红', '小刘'}
    console.log(newSet); 
    // Array(2) Array(2) Array(2) 
    //展开  value: (2) ['age', {…}] value: (2) ['age', {…}] value: (2)['time', {…}]