Skip to content

Latest commit

 

History

History
93 lines (80 loc) · 1.92 KB

23.map.md

File metadata and controls

93 lines (80 loc) · 1.92 KB
Raw

Map

Map 是 ES6 中新增的第二种集合类型的数据，用来存储键值对。类似于对象，但是它的属性也可以是个对象

  • 通过 new 关键字来创建一个 Map
const people = new Map();
  • 通过 set 方法来添加元素
people.set('dp', 18);
people.set('tms', 17);
console.log(people); // Map(2) {"dp" => 18, "tms" => 17}
  • 通过 delete 方法删除一个元素
people.delete('dp'); // true
  • 通过 has 方法检验一个元素是否存在
people.has('dp'); //true
  • 可以通过 size 来获取长度
console.log(people.size); // 3
  • 可以通过 clear 方法来清空
people.clear();
  • Set 是可以遍历的 可以用 for of 遍历集合
for (let [key,value] of people){
	console.log(key.value);
}

也可以用 forEach 方法来遍历

people.forEach((item ,key ,map)=>{
	console.log(item ,key ,map);
})
  • 可以通过初始化创建 Set
const fruits = new Set(['apple', 6], ['banana', 5]);

Map 的应用，按钮点击计数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>Fire 🔥
        <span>0</span>
    </button>
    <button>Dancer 💃
        <span>0</span>
    </button>
    <button>Fish 🐟
        <span>0</span>
    </button>

    <script>
        const btnMap = new Map();
        const buttons = document.querySelectorAll('button');
        Array.from(buttons).map(btn => {
            btnMap.set(btn, 0);
            btn.addEventListener('click', function () {
                let val = btnMap.get(this);
                btnMap.set(this, val + 1);
                this.querySelector('span').innerHTML = val + 1;
            });
        });
    </script>
</body>

</html>