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