首页 > Web开发 > 详细

后盾人:JS第七章-(Map类型)

时间:2021-08-16 14:51:41      阅读:24      评论:0      收藏:0      [点我收藏+]

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

 

后盾人:JS第七章-(Map类型)

原文:https://www.cnblogs.com/jidanbufan/p/15146422.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!