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>
