Map类型特点与创建方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let map = new Map()map.set("name","后盾人")map.set(function(){},"hdcms")map.set(1,"sina.com.cn")//这些类型都可以作为键console.log(map)let map2 = new Map(["hdcms","开源系统"],["houdunren"],"在线教程") //也支持链式操作map.set("name","sina").set("site","向军")</script>
</body>
</html>Map类型增删改查操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let obj = {name:"后盾人"}let map = new Map()map.set(obj,"houdunren")console.log(map.get(obj))console.log(map.has(obj))map.clear() //全部删除console.log(map.delete(obj))console.log(map)</script>
</body>
</html>遍历Map类型数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = new Map(["后盾人","houdunren"],["hdcms","开源系统"])console.log(hd.keys())console.log(hd.values())console.log(hd.entries())for(const key of hd.keys()){console.log(key)}for(const [key,value] of hd.entries()){console.log(key,value)}hd.forEach((value,key)=>{console.log(value,key)})</script>
</body>
</html>Map类型转换操作
在使用for of的时候默认就是使用可迭代对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = new Map([["houdunren","后盾人"],["hdcms","开源系统"]])console.log(...hd)let newArr = [...hd].filter(item=>{return item[1].includes("后盾人")})console.log(newArr)</script>
</body>
</html>Map类型管理DOM节点
使用map管理DOM节点就不怕覆盖了
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div name="后盾人">houdunren.com</div><div name="开源内容管理系统">hdcms.com</div><script>let map = new Map()document.querySelectorAll('div').forEach(item=>{map.set(item,{content:item.getAttribute("name")})})map.forEach((config,elem)=>{elem.addEventListener("click",()=>{alert(config.content)})})</script>
</body>
</html>使用Map类型控制网站表单提交
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="" onsubmit="return post()">接收协议：<input type="checkbox" name="agreement" error="请接受协议">我是学生：<input type="checkbox" name="student" error="网站只对学生开放"><input type="submit"></form><script>function post() {let map = new Map();let inputs = document.querySelectorAll("[error]");// 收集所有有 error 属性的输入框和对应的错误信息inputs.forEach(item => {map.set(item, {error: item.getAttribute("error"),status: item.checked});});// 检查每个输入框是否选中，如果没有选中就弹出错误提示let isValid = [...map].every(([elem, config]) => {if (!config.status) {alert(config.error); // 如果没有选中，弹出错误提示}return config.status; // 只有当状态为 true 时才继续表单提交});console.log(map); // 输出所有输入框的状态和错误信息return isValid; // 如果所有条件都满足，才允许提交表单}</script>
</body>
</html>
WeakMap的语法使用
Weakmap和Weakset有点相似，里面只能有对象
value和keys都用不了（因为是弱引用类型），但是有很多也可以用：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>hdcms</div><div>houdunren</div><script>let map = new WeakMap()map.set([],"houdunren.com")let divs = document.querySelectorAll("div")divs.forEach(item=>map.set(item,item.innerHTML))console.log(map)let arr = []map.set(arr,"hdcms.com")console.log(map.has(arr))console.log(map)</script>
</body>
</html>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>
</head>
<body><script>let hd = {name:'后盾人'}cms = hd let map = new WeakMap()map.set(hd,"houdunren.com")hd = nullcms = null console.log(map)//成为垃圾被删除</script>
</body>
</html>
所以没有keys和values这样的方法
使用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>
</head>
<body><ul><li><span></span>php<a href="javascript:;"> +</a></li><li><span></span>js <a href="javascript:;"> +</a></li><li><span></span>向军<a href="javascript:;">+</a></li></ul><div><strong id="count">共选两门课</strong><p id="lists"></p></div><script>class Lesson{constructor(){this.lis = document.querySelectorAll("ul>li")this.countElem = document.getElementById("count")this.listElem = document.getElementById("list")this.map = new WeakMap()}run(){this.lis.forEach(li=>{li.querySelector("a").addEventListener('click',(event)=>{const a = event.targetconst 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'}console.log(this.map)})})}}new Lesson().run()</script>
</body>
</html>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>
</head>
<body><ul><li><span></span>php<a href="javascript:;"> +</a></li><li><span></span>js <a href="javascript:;"> +</a></li><li><span></span>向军<a href="javascript:;">+</a></li></ul><div><strong id="count">共选两门课</strong><p id="lists"></p></div><script>class Lesson{constructor(){this.lis = document.querySelectorAll("ul>li")this.countElem = document.getElementById("count")this.listElem = document.getElementById("lists")this.map = new WeakMap()}run(){this.lis.forEach(li=>{li.querySelector("a").addEventListener('click',(event)=>{const a = event.targetconst state = li.getAttribute("select")if(state){li.removeAttribute("select")this.map.delete(li)a.innerHTML = "+"a.style.backgroundColor = 'green'}else{this.map.set(li,true)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>`const text = li.textContent.replace(li.querySelector('a').textContent, '').trim()return `<span>${text}</span>`}).join("")}render(){this.countElem.innerHTML = `共选了${this.count()}门课`this.listElem.innerHTML = this.lists()}}new Lesson().run()</script>
</body>
</html>
![[STM32 - 野火] - - - 固件库学习笔记 - - -十一.电源管理系统](https://i-blog.csdnimg.cn/direct/920ea49502a9400d82306aacdcf86b04.png#pic_center)
