上一篇：《JS - 6 - Set 和 WeakSet - 弱引用》

视频：https://www.bilibili.com/video/av75335792?p=1

和 set 基本一样

文章目录

Map

# 需求？

对象的 键 只能是字符串。
因此，需要一个任意类型都能作为 key 的 数据结构 ⇒ map

# 增删改查

## set、get

## delete

删除成功 true

# 遍历

# 类型转换

文章目录

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>
  <style> ul li { width: 300px; } ul li a { background-color: green; display: inline-block; color: aliceblue; } div { width: 600px; } #list span{ background-color: aqua; } </style>
</head>
<body>
  <div>
    <ul>
      <li><span>php</span> <a href="javascript:;" >添加</a></li>
      <li><span>js</span> <a href="javascript:;">添加</a></li>
      <li><span>node.js</span> <a href="javascript:;">添加</a></li>
    </ul>
  </div>
  <div>
    <strong id='count'>共选择了0门课</strong>
    <p id='list'></p>
  </div>
<script> class Lesson { constructor() { this.lis = document.querySelectorAll('ul>li') ; this.contElem = document.getElementById('count') ; this.listElem = document.getElementById('list') ; this.map = new WeakMap() ; } run() { this.lis.forEach(li => { let a = li.querySelector('a'); a.addEventListener('click', (event) => { const 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' ; } 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>` ; }).join(' ') ; } render() { // 渲染 this.contElem.innerHTML = `共选择了${this.count()}门课` ; this.listElem.innerHTML = this.lists() ; } } new Lesson().run() ; </script>
</body>
</html>