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>
