美文网首页
es6新增数据结构map的用法

es6新增数据结构map的用法

作者: 郝艳峰Vip | 来源:发表于2019-12-26 11:23 被阅读0次

前沿

搞开发就要不断的学习,不仅要不断学习,还要习惯做笔记,这样就会对一个知识点理解的更透彻,不过要是能够在项目中多多运用,那就理解的更透彻了。今天就来总结下es6新增的map的用法


step 一, map的特性

  • 1,键值对可以是对象 key:value
    let testMap = new Map();
        let abjkey = {
            keys:"123"
        };
        testMap.set(abjkey,'hello,map');
        console.log(testMap);
       console.log(testMap.get(abjkey));   //hello,map
  • 2,map 可以接受数组作为参数,数组成员还是一个数组,其中有俩元素,一个表示key一个表示value
     const testMap2 = new Map([
            ['testName', 'jack'],
            ['testAge', 13]
        ])
        console.log(testMap2.get('testName'))    //jack
        console.log(testMap2.get('age'))      //13
  • 3,map 可以接受对象作为参数不过value需要自己设定
   const testMap2 = new Map();
        let testSet = {
            name: 'lasan',
            age: '21112'
        }
        testMap2.set(testSet,123456);
        console.log(testMap2.get(testSet));   //123456

step 二, 如何操作map,也就是map有那些方法

  • 1, size 获取map的大小 也就是length
    const testMap3 = new Map();
        testMap3.set('test1', 1);
        testMap3.set('test12', 2);
        testMap3.set('test13', 3);
        console.log(testMap3.size)   //3
  • 2, set 前边一直在写set,也就是设置键值对,包括undefined,function
  const testMap3 = new Map();
        testMap3.set('test1', 1);    //键是字符串
        testMap3.set(22222, 66666);   //键是数值
        testMap3.set(undefined, 3333);   //键是 undefined
        const fun = function() { console.log('hello'); }
        testMap3.set(fun, 'fun') // 键是 function
        console.log(testMap3.get(undefined))    //66666
        console.log(testMap3.get(fun))      //3333

set还可以进行链式调用

testMap3.set().set().set()
  • 3, 上边所说是设置map,现在来说一下获取map的值 ----- get
  const testMap3 = new Map();
        testMap3.set('test1', 1);  
        console.log(testMap3.get(test1))      //1
  • 4, 判断map内指定的键是否存在------ has 是通过boolean判断的,存在就是true反之
  const testMap3 = new Map();
        testMap3.set('test1', 1);  
        console.log(testMap3.has(test1))      //true
  • 5,删除键值对 ----- delete
  const testMap3 = new Map();
        testMap3.set('test1', 1);  
       testMap3.delete('test1');  
        console.log(testMap3.has(test1))      //false
  • 6, 删除所有键值对 ----- clear
testMap3.clear();
  • 7,遍历 keys() ,遍历所有的键
  const testMap3 = new Map();
        testMap3.set('test1', 1);    //键是字符串
        testMap3.set(22222, 66666);   //键是数值
        testMap3.set(undefined, 3333);   //键是 undefined
        const fun = function() { console.log('hello'); }
        testMap3.set(fun, 'fun') // 键是 function
      for (let item of testMap3.keys()) {
          console.log(item);    //test1,22222,undefined,fun
   }
  • 8 ,遍历 values() ,遍历所有的值
   for (let item of testMap3.values()) {
          console.log(item);    //1,66666
}  
  • 9 ,遍历 entries() ,遍历所有的键值对
   for (let item of testMap3.entries()) {
          console.log(item);     //得到所有键值对 
      结果
                ["test1", 1]
                [22222, 66666]
                [undefined, 3333]
                [ƒ, "fun"]
}  
       for (let [key, value] of testMap3.entries()) {
            console.log(key, value);
        }
   //前边是key后边是value
           test1 1
       22222 66666
       undefined 3333
        ƒ fun() {
            console.log('hello');
        } "fun"

总结

目前小编了解的这么多,还是需要多多学习啊

相关文章

  • 帮大家理解ES6中的Map

    帮大家了解ES6中的map:Map 是 ES6 中新增的数据结构,Map 类似于对象,但普通对象的 key 必须是...

  • Set 和 Map 数据结构

    Set WeakSet Map WeakMap Set § ⇧ 基本用法 § ⇧ ES6 提供了新的数据结构 Se...

  • ES6中的Set和Map

    ES6中新增了Set、WeakSet、Map、WeakMap数据结构 一、Set Set是类似数组的数据结构,和数...

  • es6新增数据结构map的用法

    前沿 搞开发就要不断的学习,不仅要不断学习,还要习惯做笔记,这样就会对一个知识点理解的更透彻,不过要是能够在项目中...

  • ES6系列之Set和Map

    今天,我们来学习一下ES6中新增的两个数据结构:Set和Map。 Set ES6 提供了新的数据结构 Set。它类...

  • ES6学习笔记——Set 和 Map 数据结构

    在 ES6 中新增了两种数据结构,它们分别是 Set 和 Map,我们可以分别将它们和 Array、Object ...

  • js中的set和map类型

    Set与map Es6中新增加了两个数据类型set和map类型,下面就看下这两个类型的特性和用法。 一、 Set ...

  • ES6新增Map和Set数据类型

    Map和Set Map 和 Set 是 ES6 标准新增的数据类型 Map JavaScript的对象(Objec...

  • 还在用indexOf?这有更好的替代品

    最近在刷LeetCode的过程中,越来越发现ES6新增的Set/Map数据结构非常方便。于是乎,想起来平常使用in...

  • ES6新增数据结构Map

    含义和基本用法 JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只...

网友评论

      本文标题:es6新增数据结构map的用法

      本文链接:https://www.haomeiwen.com/subject/wnykoctx.html