后盾人：JS第七章-（Map类型）

1.map类型特点

键名可以是任意类型

2.增删改查操作

map.set()　　//添加元素

map.get()　　//获取元素

map.delete()　　//删除某个元素

map.clear()　　//删除全部元素

map.has()　　//检测是否存在

3.遍历Map

Map.keys()　　//获取所有键

Map.values()　　//获取所有值

Map.entries()　　//获取所有键值对

遍历

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 是弱引用类型

后盾人：JS第七章-（Map类型）

相关推荐