JS - 7 - Map和WeakMap
程序员文章站
2022-05-20 14:57:20
...
上一篇：《JS - 6 - Set 和 WeakSet - 弱引用》
视频：https://www.bilibili.com/video/av75335792?p=1
和 set 基本一样
Map
# 需求？
对象的 键 只能是字符串。
因此，需要一个任意类型都能作为 key 的 数据结构 ⇒ map
# 增删改查
## set、get
## delete
删除成功 true
# 遍历
# 类型转换
WeakMap
# 键必须为对象/引用
# 弱引用
# 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
width: 300px;
}
ul li a {
background-color: green;
display: inline-block;
color: aliceblue;
}
div {
width: 600px;
}
#list span{
background-color: aqua;
}
</style>
</head>
<body>
<div>
<ul>
<li><span>php</span> <a href="javascript:;" >添加</a></li>
<li><span>js</span> <a href="javascript:;">添加</a></li>
<li><span>node.js</span> <a href="javascript:;">添加</a></li>
</ul>
</div>
<div>
<strong id='count'>共选择了0门课</strong>
<p id='list'></p>
</div>
<script>
class Lesson {
constructor() {
this.lis = document.querySelectorAll('ul>li') ;
this.contElem = document.getElementById('count') ;
this.listElem = document.getElementById('list') ;
this.map = new WeakMap() ;
}
run() {
this.lis.forEach(li => {
let a = li.querySelector('a');
a.addEventListener('click', (event) => {
const state = li.getAttribute('select') ;
if(state) {
li.removeAttribute('select') ;
this.map.delete(li) ;
a.innerHTML = '添加'
a.style.backgroundColor = 'green' ;
}else {
this.map.set(li) ;
li.setAttribute("select", true) ;
a.innerHTML = '减少' ;
a.style.backgroundColor = 'red' ;
}
this.render() ;
})
});
}
count() {
return [...this.lis].reduce((count, li) => {
return count += this.map.has(li)? 1 : 0 ;
}, 0)
}
lists() {
return [...this.lis].filter((li) => {
return this.map.has(li) ;
}).map( li => {
return `<span>${li.querySelector('span').innerHTML}</span>` ;
}).join(' ') ;
}
render() { // 渲染
this.contElem.innerHTML = `共选择了${this.count()}门课` ;
this.listElem.innerHTML = this.lists() ;
}
}
new Lesson().run() ;
</script>
</body>
</html>
推荐阅读
-
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
-
JS中parseInt()和map()用法分析
-
JS实现简单获取最近7天和最近3天日期的方法
-
JS forEach和map方法的用法与区别分析
-
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
-
JS中Map和ForEach的区别
-
js循环map 获取所有的key和value的实现代码(json)
-
【nodejs原理&源码赏析（7）】【译】Node.js中的事件循环，定时器和process.nextTick
-
js获取最近7天和最近3天日期
-
js数组中的find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()方法的详解和应用实例