1.map类型特点
键名可以是任意类型
2.增删改查操作
map.set() //添加元素
map.get() //获取元素
map.delete() //删除某个元素
map.clear() //删除全部元素
map.has() //检测是否存在
3.遍历Map
Map.keys() //获取所有键
Map.values() //获取所有值
Map.entries() //获取所有键值对
for of 方法 遍历
foreach 方法 遍历
4.类型转换
使用展开语法转换为数组 [...map]
5.Map管理DOM节点
<body> <div name="后盾人">houdunren.com</div> <div name="开源内容">hdcms.com</div> </body> <script> let map = new Map() document.querySelectorAll("div").forEach(item => { map.set(item, { content: item.getAttribute('name') }) }) map.forEach((config, element) => { element.addEventListener("click", () => { alert(config.content) }) }) </script>
6.使用Map类型控制表单提交
<body> <form action="" onsubmit="return post()"> 接受协议： <input type="checkbox" name="agreement" error="请接受协议"> 我是学生： <input type="checkbox" name="student" error="只对学生开放"> <input type="submit" /> </form> </body> <script> function post() { let map = new Map() let inputs = document.querySelectorAll("[error]") inputs.forEach(item => { map.set(item, { error: item.getAttribute("error"), status: item.checked }) }); return [...map].every(([elem, config]) => { config.status || alert(config.error) return config.status }) }
7.WeakMap 语法
let map = new Weakmap()
Weakmap 是弱引用类型