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