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对象 
                })
            })

     

  • 相关阅读:
    win7,win8,win8.1修复IE浏览器的建议
    推荐给.net程序员的学习网站
    OLTP与OLAP
    profiler列名的具体意义
    sp_reset_connection
    IDENTITY
    【读书笔记】Android Handler和Looper流程
    Android视频/音频缓存框架AndroidVideoCache
    Android KeyStore格式转换工具
    使用Android Studio开发NDK
  • 原文地址:https://www.cnblogs.com/linxim/p/11768423.html
Copyright © 2011-2022 走看看