第七章 Map与WeakMap类型在JavaScript中的使用

最新推荐文章于 2025-01-01 21:13:01 发布

耳鼻喉科魏主任

最新推荐文章于 2025-01-01 21:13:01 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript基础

本文链接：https://blog.youkuaiyun.com/weixiaowei_2016/article/details/105439872

JavaScript基础专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了Map和WeakMap的特性与应用，包括键值的灵活性、增删改查操作、遍历方法及DOM节点管理，展示了Map类型在表单控制中的运用，并对比了WeakMap的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Map类型特点与创建方法

对象当中的键只能是字符串，但是Map类型则不同，可以使用任何类型当作键名。

  let info = new Map()
  let obj = new Object()
  obj.name = "weizhuren"
  info.set(obj,"weizhuren")
  console.log(info)

// Map(1) {{…} => "weizhuren"}
// [[Entries]]
// 0: {Object => "weizhuren"}
// key: {name: "weizhuren"}
// value: "weizhuren"

2.Map类型的增删改查操作

set方法可以新增数据
delete方法可以删除以键名为标识删除属性，删除成功返回true，否则返回false
使用clear方法删除map内所有数据
has方法可以以键名为标识查询属性，成功返回true，否则返回false

  let obj = {
    name:"weizhudren"
  }
  let map = new Map()
  // 增加
  map.set(obj,"erbihouke")
  // 查询
  console.log(map.get(obj))// erbihouke
  // 删除
  // 如果删除成功返回true，失败返回false
  console.log(map.delete(obj))// true
  console.log(map)//Map(0) {}
  // 全部删除
  // clear方法没有返回值
  map.clear()
  // 检查元素是否存在
  // 存在返回true，不存在返回false
  console.log(map.has(obj))// false

3.遍历Map类型数据

使用keys方法可以返回所有的键
使用values方法可以返回所有的值
使用entries方法可以返回所有的键值对
使用for···of···可以遍历map
使用forEach也可以遍历map，值得顺序是value，key

  let info = new Map(
    [["weizhuren","魏主任"],["erbihouke","耳鼻喉科"]]
  )
  // 返回所有的键 
  console.log(info.keys())
  // 返回所有的值
  console.log(info.values())
  // 获取所有的键值对
  console.log(info.entries())
  // for···of···遍历map
  for (const [key,value] of info.entries()) {
    console.log(key,value)
  }
  // forEach遍历map,这里是value在前，key在后
  info.forEach( (value,key) => {
    console.log(value,key)
  })

4.Map类型转换操作

我们在开发过程中，可以将一种类型转化为另一种类型，使用其独有的方法，然后再转化回来，就可以了。这是一个非常中要得编程思想。

  let info = new Map(
    [["weizhuren","魏主任"],["erbihouke","耳鼻喉科"]]
  )
  // 使用展开语法让map转化为数组
  console.log([...info])
  // 单独转化键
  console.log([...info.keys()])
  // 单独转化值
  console.log([...info.values()])
  // 将集合中值为某一内容得信息拿出来
  let newArr = [...info].filter( item => {
    return item.includes("魏主任")
  })
  console.log(newArr)
  // 再将Arr转化为Map
  let newMap = new Map(newArr)
  console.log(newMap)

5.Map类型管理DOM节点

可以使用map元素保存DOM节点对象，保存内容可以是我们所有需要的信息，我们可以不向DOM对象中直接加入新的属性。

<html>
<body>
  <div name="魏主任">weizhuren.com</div>
  <div name="耳鼻喉科">erbihouke.com</div>
</body>
<script>
  let map = new Map()
  document.querySelectorAll('div').forEach( item => {
    map.set(item,{
      content:item.getAttribute("name")
    })
  })
  console.log(map)
  map.forEach((config,element) => {
    element.addEventListener("click",() => {
      alert(config.content)
    })
  })
</script>
</html>

6.使用Map类型控制网站表单提交

使用map控制属性，生成一个控制网站表单提交得方法。

<html>
<body>
  <form action="" onsubmit="return post()">
    接收协议：
    <div><input type="checkbox" name="agreement" error="请接受协议"></div>
    我是学生：
    <div><input type="checkbox" name="student" error="网站只对学生开放"></div>
    <div><input type="submit"></div>
  </form>
</body>
<script>
  function post(){
    let map = new Map()
    // 拿到所有带error属性的标签
    let inputs = document.querySelectorAll("[error]")
    // 将这些标签放到map中，以元素作为键，属性作为值
    inputs.forEach( item => {
      map.set(item,{
        error:item.getAttribute('error'),
        status:item.checked
      })
    });
    // console.log(map)
    // 如果status为真（选中状态）返回真
    // 如果为假弹框提示
    return [...map].every(([elem,config]) => {
      console.log(elem,config)
      config.status || alert(config.error)
      return config.status
    });
  }
</script>
</html>

7.WeakMap的语法使用

WeakMap和WeakSet相似，他们的键只能是对象。

WeakMap是弱引用类型，不能进行遍历操作，只能做增删改查得操作。

    let arr = []
    let map = new WeakMap()
    // 增加属性
    map.set(arr,'weizhuren.com')
    console.log(map)
    // 用key删除
    console.log(map.delete(arr))
    // 用key查找
    console.log(map.has(arr))
    console.log(map)