ES6语法中的Map和Set

es6语法的map和set

一：Set集合

类似于数组,但是成员的值都是唯一的, Set本身是一个构造函数用来生成Set数据结构

Set集合的常用方法:

• add()

  添加值,返回Set结构本身

  const set = new Set()
  set.add(1)
  set.add(1)
  set.add(2)
  set.add(2)
  console.log(set) //最终输出Set { 1, 2 }
  

• delete()

  删除值,返回布尔值表示是否删除成功

  let set = new Set()
  set.add(1)
  set.delete(1) //true
  console.log(set) //Set {}
  

• has()

  返回布尔值,判断Set对象中是否含有某值

  let set = new Set()
  set.add('hello')
  set.add('world')
  set.has('hello') //true
  set.has(1) //false
  

• clear()

  移除所有元素,没有返回值

• keys()

  返回一个Iterator对象,对象按照原Set对象元素的插入顺序返回其所有元素

  let set = new Set()
  set.add('1')
  set.add('2')
  
  const keys = set.keys()
  console.log(keys) //{ '1', '2' }
  console.log(keys.next().value) //1
  console.log(keys.next().value) //2
  

• values()

  与keys()用法一样,返回Iterator对象,返回值也与keys()一样

• entries()

  返回一个键值对形式的迭代器,类似[value, value]形式的数组
  value是集合中的每个元素

  let set = new Set()
  set.add('1')
  set.add('2')
  
  const entries = set.entries()
  console.log(entries.next().value) //[ '1', '1' ]
  console.log(entries.next().value) //[ '2', '2' ]
  

  二：Map集合

  ​ 类似于对象,是键值对的集合,数据可为任意类型,与Object的区别在于Object的键
  只能是字符串或者Symbols,但Map可以为任意类型,且Map中的键值是有序的
  Map结构的实例方法

• set(key, value)

  设置键值对,返回整个Map()结构,若对应键已有值则覆盖原有的值

  let map = new Map()
  map.set('name', '张三')
  console.log(map) //{ 'name' => '张三' }
  

• get(key)

  获取key对应的键值,若没有则返回undefined

  let map = new Map()
  map.set('name','张三')
  console.log(map.get('name')) //张三
  

• has(key)

  返回布尔值,查询key是否在当前对象中

  let map = new Map()
  map.set('name','张三')
  console.log(map.has('name')) //true
  console.log(map.has('age')) //false
  

• delete(key)

  删除key对应的键值对,删除成功返回true否则返回false

  let map = new Map()
  map.set('name','张三')
  console.log(map.delete('name')) //true
  console.log(map) //{}
  

• clear()

  清除所有键值对,没有返回值

• keys()

  返回新的Iterator对象,按顺序插入Map对象中所有key

  let map = new Map()
  map.set('name','张三')
  map.set('age','21')
  map.set('gender','男')
  
  console.log(map.keys()) //{ 'name', 'age', 'gender' }
  

• values()

  返回新的Iterator对象,按顺序插入Map对象中所有value

  let map = new Map()
  map.set('name','张三')
  map.set('age','21')
  map.set('gender','male')
  
  console.log(map.keys()) //{ '张三', '21', 'male' }
  

• entries()

  返回新的Iterator对象,按顺序插入Map对象中每个元素的[key,value]数组

  let map = new Map()
  map.set('name','张三')
  map.set('age','21')
  map.set('gender','male')
  
  console.log(map.entries())
  //{ [ 'name','张三' ],[ 'age','21' ],[ 'gender','male' ] }
  

• forEach(callback,thisArg)

  callback(key,value,Map)必选,对象中每个元素都要执行的回调函数

  key-当前元素的键
  value-当前元素的值
  Map-当前正在遍历的对象
  thisArg`可选,回调函数执行时的`this`的值 ,`forEach()`返回值为`undefined
  

  let map = new Map()
  map.set('name','张三')
  map.set('age','21')
  map.set('gender','male')
  
  map.forEach((value, key)=> {
      console.log(key+' = '+value)
  })
  //name = 张三
  //age = 21
  //gender = male
  

  三：工作中的实际解决的问题

  ​ 最近在写js代码的时候，遇到一个比较棘手的问题，js代码for循环如果次数过多，会导致内层的for的变量未定义不可以使用的情况，使用map集合来实现数据的存储。

  function getSearch(data){
      if(data.id==''){
          return false;
      }
      else{
          for(var i=0;i<Server.length;i++){
              if(data.id==Server[i].id){
                  data.ip=Server[i].ip;
                  data.port=Server[i].port;
                  data.type=Server[i].type;
                  data.id=Server[0].id;
                  data.deviceId = '0';
              }
          }
  		// 定义一个map
          var recMap = new Map();
          // 先将所有集合的情况放到map中存储起来
          for(var i = 0;i < Server.length;i++) {
              recMap.set(Server[i].id,i+1);
          }
          // 需要和map集合比对的数据
          var dat = data.id.split(";");
          var rlist = [];
          // 数据和map进行比对
          for(var k = 0 ; k < dat.length ; k++){
              // if条件筛选合适的
              if(recMap.get(dat[k])){
                  var temp = {};
                  var j = recMap.get(dat[k])-1;
                  temp.ip=Server[j].ip;
                  temp.port=Server[j].port;
                  temp.type=Server[j].type;
                  temp.id=Server[j].id;
                  rlist.push(temp);
              }
          }
          data.ListString = JSON.stringify(rlist);
      }
  
  }
  

参考链接:

https://segmentfault.com/a/1190000020091905
https://blog.csdn.net/weixin_41646716/article/details/91509295