zoukankan      html  css  js  c++  java
  • ES6对map解析

    Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。       

     

    1.map基本使用

    map语法 new Map([iterable]);

         let map=new Map();
            map.set('name','张三');
            map.set('age',11);
            map.set('已婚',false);
            console.log(map.get('name'));    

    通过set方法添加新的元素。

    get获取元素的值。

     
     let map1=new Map([[1,'卡'],[true,'bug'],[o,{name:"林夕梦"}],[arr,[1,2]]])
            console.log(map1);
            //size:键值对的个数
            //get set has delete clear
            //forEach keys values entries
            //get(key) 获取value 
            console.log(map1.get(1));
            console.log(map1.get(true));
            //set (key,value) 设置  如果之前有过key值就修改,没有就增加 返回新的map实例
            console.log(map1.set(1,2));
            console.log(map1.set(false,2));
            //has 判断key有没有对应的value值 有true,没有false
            console.log(map1.has(1));
            //delete 删除属性key 返回值true/false
            console.log(map1.delete(1));
            console.log(map1);
            //clear 清空 没返回值
            console.log(map1.clear());

    代码练习

    html代码
        <button>one</button>
        <button>two</button>
        <button>three</button>
        <button>four</button>
        <button>five</button>
    js代码
         const clickCounts = new Map();
            //使用map对象
            const btn = document.querySelectorAll('button');
            //获取button标签
            btn.forEach(btn => {
            //遍历每个button标签
                clickCounts.set(btn, 0);
                //为每个button设置一个0的值
                btn.addEventListener('click', function () {
                    //为button按钮绑定单击事件
                    const val = clickCounts.get(this);
                    //获取当前单击按钮的值给val
                    clickCounts.set(this, val + 1);
                    //clickCounts对象中当前button按钮的值加1
                    console.log(clickCounts);
                    //输出clickCounts对象 
                })
            })

     

  • 相关阅读:
    Java的内存区域划分
    Java中的浮点型进行四则运算精度丢失的问题
    单例模式的几种写法
    如何掌握一门工具及对工具的认识
    记一个命运多舛的项目总结
    几个超级好用但很少有人知道的 webstorm技巧
    如何自定义中间件,实现业务代码无侵入监控及拦截
    如何减少和处理死锁
    快照读与加锁读
    谈谈Java常用类库中的设计模式
  • 原文地址:https://www.cnblogs.com/linxim/p/11768423.html
Copyright © 2011-2022 走看看