new Map的使用

一、作用

Map在构造或者保存键值对的时候,任何值都可以(对象、数字、ture等...),所以使用Map构造的时候有一定随意性的

二、Map和Object的区别

1.Object的键只能是字符串或者Symbols组成,Map的键可以使用任意组成

2.Object的键是无序的,Map的键是有序的(FIFO 原则)

3.Object获取键值数量对需要手动获取,而Map的size就可以过去键值对的数量

三、Map对象的使用

1.Map的属性

  • set(key, val): 向Map中添加新元素
  • get(key): 通过键值查找特定的数值并返回
  • size返回Map对象中所包含的键值对个数
  • has(key): 判断Map对象中是否有Key所对应的值,有返回true,否则返回false
  • delete(key): 通过键值从Map中移除对应的数据
  • clear(): 将这个Map中的所有元素删除

2.set(key, val): 向Map中添加新元素

 代码:

  created() {
    //定义map的键值对以数组形式的多维数组
    let mapObj = new Map([
      [1, 2],
      [3, 4]
    ]);
    mapObj.set(true, 5);
    console.log('mapObj----', mapObj);
  },

 结果:

3.get(key): 通过键值查找特定的数值并返回

 代码:

  created() {
    //定义map的键值对以数组形式的多维数组
    let mapObj = new Map([
      [1, 2],
      [3, 4]
    ]);
    mapObj.set(true, 5);
    let getMap = mapObj.get(true);
    console.log('getMap----', getMap); //5
  },

 结果:

4.size返回Map对象中所包含的键值对个数

 代码:

  created() {
    //定义map的键值对以数组形式的多维数组
    let mapObj = new Map([
      [1, 2],
      [3, 4]
    ]);
    mapObj.set(true, 5);
    let sizeMap = mapObj.size;
    console.log('sizeMap----', sizeMap); //3
  },

 结果:

5.has(key): 判断Map对象中是否有Key所对应的值,有返回true,否则返回false

 代码:

  created() {
    //定义map的键值对以数组形式的多维数组
    let mapObj = new Map([
      [1, 2],
      [3, 4]
    ]);
    mapObj.set(true, 5);
    console.log('has----', mapObj.has(1)); //true
    console.log('has----', mapObj.has('w')); //fales
  },

 结果:

6.delete(key): 通过键值从Map中移除对应的数据

 代码:

  created() {
    //定义map的键值对以数组形式的多维数组
    let mapObj = new Map([
      [1, 2],
      [3, 4]
    ]);
    mapObj.set(true, 5);
    mapObj.delete(1);
    console.log('mapObj----', mapObj); 
  },

 结果:

7.clear(): 将这个Map中的所有元素删除

 代码:

  created() {
    //定义map的键值对以数组形式的多维数组
    let mapObj = new Map([
      [1, 2],
      [3, 4]
    ]);
    mapObj.set(true, 5);
    mapObj.clear();
    console.log('mapObj----', mapObj); 
  },

 结果:

四、遍历方法

  1. keys():返回键名的遍历器
  2. values():返回键值的遍历器
  3. entries():返回键值对的遍历器
  4. forEach():使用回调函数遍历每个成员

五、转换

1.转换对象

 代码:

  created() {
    //定义map的键值对以数组形式的多维数组
    let mapObj = new Map([
      [1, 2],
      [3, 4]
    ]);
    mapObj.set(true, 5);
    let obj = {};
    for (let [key, value] of mapObj) {
      obj[key] = value;
    }
    console.log('obj---', obj);//obj--- {1: 2, 3: 4, true: 5}
  },

 结果:

2.转换数组

 代码:

  created() {
    //定义map的键值对以数组形式的多维数组
    let mapObj = new Map([
      [1, 2],
      [3, 4]
    ]);
    mapObj.set(true, 5);
    let mapArr = Array.from(mapObj);
    console.log('mapArr---', mapArr); //mapArr--- [[1,2],[3,4],[true, 5]]
  },

 结果:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(function(a){a.N={VERSION:"4.1.0",ROOT_URL:a.L_ROOT_URL||function(){var a=document.getElementsByTagName("script"),b=/\/?newmap[\-\._]?([\w\-\._]*)\.js\??/,c,d,e,f;for(c=0,d=a.length;c<d;c++){e=a[c].src,f=e.match(b);if(f)return f[1]==="include"?"../../dist/":e.replace(b,"")+"/"}return""}(),noConflict:function(){return a.N=this._original,this},_original:a.N}})(this),NUtil={extend:function(a){var b=Array.prototype.slice.call(arguments,1);for(var c=0,d=b.length,e;c2?Array.prototype.slice.call(arguments,2):null;return function(){return a.apply(b,c||arguments)}},tryFuncs:function(){var a=null;for(var b=0,c=arguments.length;b<c;b++){var d=arguments[b];try{a=d();break}catch(e){}}return a},getParameterString:function(a){var b=[];for(var c in a){var d=a[c];if(d!=null&&typeof d!="function"){var e;if(typeof d=="object"&&d.constructor==Array){var f=[],g;for(var h=0,i=d.length;h<i;h++)g=d[h],f.push(encodeURIComponent(g===null||g===undefined?"":g));e=f.join(",")}else e=encodeURIComponent(d);b.push(encodeURIComponent(c)+"="+e)}}return b.join("&")},containsStr:function(a,b){return a.indexOf(b)!=-1},getParameters:function(a){a=a===null||a===undefined?window.location.href:a;var b="";if(NUtil.containsStr(a,"?")){var c=a.indexOf("?")+1,d=NUtil.containsStr(a,"#")?a.indexOf("#"):a.length;b=a.substring(c,d)}var e={},f=b.split(/[&;]/);for(var g=0,h=f.length;g<h;++g){var i=f[g].split("=");if(i[0]){var j=i[0];try{j=decodeURIComponent(j)}catch(k){j=unescape(j)}var l=(i[1]||"").replace(/\+/g," ");try{l=decodeURIComponent(l)}catch(k){l=unescape(l)}l=l.split(","),l.length==1&&(l=l[0]),e[j]=l}}return e},urlAppend:function(a,b){var c=a;if(b){var d=(a+" ").split(/[?&]/);c+=d.pop()===" "?b:d.length?"&"+b:"?"+b}return c},upperCaseObject:function(a){var b={};for(var c in a)b[c.toUpperCase()]=a[c];return b},createUrlObject:function(a,b){b=b||{};if(!/^\w+:\/\//.test(a)){var c=window.location,d=c.port?":"+c.port:"",e=c.protocol+"//"+c.host.split(":").shift()+d;if(a.indexOf("/")===0)a=e+a;else{var f=c.pathname.split("/");f.pop(),a=e+f.join("/")+"/"+a}}b.ignoreCase&&(a=a.toLowerCase());var g=document.createElement("a");g.href=a;var h={};h.host=g.host.split(":").shift(),h.protocol=g.protocol,b.ignorePort80?h.port=g.port=="80"||g.port=="0"?"":g.port:h.port=g.port==""||g.port=="0"?"80":g.port,h.hash=b.ignoreHash||g.hash==="#"?"":g.hash;var i=g.search;if(!i){var j=a.indexOf("?");i=j!=-1?a.substr(j):""}return h.args=NUtil.getParameters(i),h.pathname=g.pathname.charAt(0)=="/"?g.pathname:"/"+g.pathname,h},stamp:function(){var a=0,b="_newmap_id";return function(c){return c[b]=c[b]||"_newmap_id_"+ ++a,c[b]}}(),requestAnimFrame:function(){function a(a){window.setTimeout(a,1e3/60)}var b=window.requestAnimationFrame||
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值