JS基础 Map是一组键值对的结构

快来打我* 2023-10-06 21:39 11阅读 0赞

#### 阅读目录 ####

*  Map是一组键值对的结构，用于解决以往不能用对象做为键的问题
 *   *  声明定义
     *  获取数据数量
     *  检测元素是否存在
     *  读取元素
     *  删除元素
     *  遍历数据
     *  数组转换
     *  节点集合
     *  checkbox 实例操作
 *  WeakMap 对象是一组键 / 值对的集
 *   *  声明定义
     *  基本操作
     *  垃圾回收
     *  选课案例

## Map是一组键值对的结构，用于解决以往不能用对象做为键的问题 ##

具有极快的查找速度  
函数、对象、基本类型都可以作为键或值

### 声明定义 ###

可以接受一个数组作为参数，该数组的成员是一个表示键值对的数组。

let m = new Map([
        ['wgchen', '开心悄悄乐'],
        ['willem', '打豆豆']
      ]);
    
      console.log(m.get('wgchen')); // 开心悄悄乐

使用 set 方法添加元素，支持链式操作

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]  
使用构造函数 `new Map` 创建的原理如下

const hd = new Map();
    const arr = [["wgchen", "开心悄悄乐"], ["willem", "blog"]];
    
    arr.forEach(([key, value]) => {
        
      hd.set(key, value);
    });
    console.log(hd);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]  
对于键是对象的Map， 键保存的是内存地址，值相同但内存地址不同的视为两个键。

let arr = ["开心悄悄乐"];
    const hd = new Map();
    hd.set(arr, "blog");
    
    console.log(hd.get(arr)); // blog
    console.log(hd.get(["豆豆"])); // undefined

### 获取数据数量 ###

console.log(map.size);

let m = new Map([
       ['wgchen', '开心悄悄乐'],
       ['willem', '打豆豆']
    ]);
    
    
    console.log(m.size);  // 2

### 检测元素是否存在 ###

console.log(map.has(obj1));

let m = new Map([
      ['wgchen', '开心悄悄乐'],
      ['willem', '打豆豆']
    ]);
    
    let hd = new Set();
    hd.add('wgchen');
    
    console.log(m.has('wgchen')); // true
    console.log(hd.has('wgchen')); // true

### 读取元素 ###

let map = new Map();
    
    let obj = {
        
    	name: 'wgchen'
    }
    
    map.set(obj, 'blog');
    
    console.log(map.get(obj)); // blog
    console.log(obj); // {name: 'wgchen'}
    console.log(map.get());  // undefined

### 删除元素 ###

使用 delete() 方法删除单个元素

let map = new Map();
    let obj = {
        
    	name: 'wgchen'
    }
    
    map.set(obj, 'blog');
    console.log(map.get(obj)); // blog
    
    map.delete(obj);
    console.log(map.get(obj)); // undefined

使用 clear 方法清除 Map 所有元素

### 遍历数据 ###

使用 `keys() / values() / entries()` 都可以返回可遍历的迭代对象。

let hd = new Map([["wgchen", "笔记本"], ["willem", "电脑"]]);
    
    console.log(hd.keys()); 
    console.log(hd.values());
    console.log(hd.entries());

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]

可以使用 `keys/values` 函数遍历键与值

let hd = new Map([["wgchen", "笔记本"], ["willem", "电脑"]]);
    
    for (const key of hd.keys()) {
        
      console.log(key);
    }
    for (const value of hd.values()) {
        
      console.log(value);
    }

![在这里插入图片描述][c589466126494cadac16f6dc9c0aa9a8.png]  
使用 `for/of` 遍历操作，直接遍历 Map 等同于使用 entries() 函数

let hd = new Map([["wgchen", "笔记本"], ["willem", "电脑"]]);
    
    for (const [key, value] of hd) {
        
      console.log(`${
          key}=>${
          value}`);
    }

![在这里插入图片描述][14af2b4a9bc74dbea11c06e499e6538b.png]  
使用 forEach 遍历操作

let hd = new Map([["wgchen", "笔记本"], ["willem", "电脑"]]);
    
    hd.forEach((value, key) => {
        
      console.log(`${
          key}=>${
          value}`);
    });

![在这里插入图片描述][9d91023f2bb644e582b8839a8d69f1e8.png]

### 数组转换 ###

可以使用展开语法 或 `Array.form` 静态方法将 Set 类型转为数组，这样就可以使用数组处理函数了。

let hd = new Map([["wgchen", "笔记本"], ["willem", "电脑"]]);
    
    console.log(...hd);
    console.log(...hd.entries()); 
    console.log(...hd.values()); 
    console.log(...hd.keys());

![在这里插入图片描述][ded66f69133249ccbb73a1a4cad7a92e.png]  
检索包含 笔记本 的值组成新 Map

let hd = new Map([["wgchen", "笔记本"], ["willem", "电脑"]]);
    
    let newArr = [...hd].filter(function(item) {
        
      return item[1].includes("笔记本");
    });
    
    hd = new Map(newArr);
    console.log(...hd.keys()); // wgchen

### 节点集合 ###

map的key可以为任意类型，下面使用DOM节点做为键来记录数据。

<body>
      <div desc="wgchen">blog</div>
      <div desc="ycc">cms</div>
    </body>
    
    <script>
      const divMap = new Map();
      const divs = document.querySelectorAll("div");
    
      divs.forEach(div => {
        
        divMap.set(div, {
        
          content: div.getAttribute("desc")
        });
      });
    
      divMap.forEach((config, elem) => {
        
        elem.addEventListener("click", function() {
        
          alert(divMap.get(this).content);
        });
      });
      
    </script>

![在这里插入图片描述][6ede2ca7e9ba4e00896906ae5a9ac35c.gif_pic_center]

### checkbox 实例操作 ###

![在这里插入图片描述][deb833fa45a6468dbcf4e4efc4b629f8.gif_pic_center]

当不接受协议时无法提交表单，并根据自定义信息提示用户。

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
    </head>
    
    <body>
      <form action="" onsubmit="return post()">
        接受协议:
        <input type="checkbox" name="agreement" message="请接受接受协议" />
        我是学生:
        <input type="checkbox" name="student" message="网站只对学生开放" />
        <input type="submit" />
      </form>
    </body>
    
    <script>
      function post() {
        
        let map = new Map();
    
        let inputs = document.querySelectorAll("[message]");
    
        //使用set设置数据
        inputs.forEach(item =>
          map.set(item, {
        
            message: item.getAttribute("message"),
            status: item.checked
          })
        );
    
        //遍历Map数据
        return [...map].every(([item, config]) => {
        
          config.status || alert(config.message);
          return config.status;
        });
        
      }
    </script>
    
    </html>

## WeakMap 对象是一组键 / 值对的集 ##

键名必须是对象  
WeaMap对键名是弱引用的，键值是正常引用

垃圾回收不考虑WeaMap的键名，不会改变引用计数器，键在其他地方不被引用时即删除

因为WeakMap 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行 `forEach( )`遍历等操作

也是因为弱引用，WeaMap 结构没有 `keys( )，values( )，entries( )` 等方法和 size 属性

当键的外部引用删除时，希望自动删除数据时使用 WeakMap

### 声明定义 ###

以下操作由于键不是对象类型将产生错误

new WeakSet("wgchen"); //TypeError: Invalid value used in weak set

将DOM节点保存到 WeakSet

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
    </head>
    
    <body>
      <div>willem</div>
      <div>wgchen</div>
    </body>
    <script>
      const hd = new WeakMap();
      document
        .querySelectorAll("div")
        .forEach(item => hd.set(item, item.innerHTML));
      console.log(hd);
    </script>
    
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

### 基本操作 ###

下面是WeakSet的常用指令

const hd = new WeakMap();
    const arr = ["wgchen"];
    
    //添加操作
    hd.set(arr, "willem");
    console.log(hd.has(arr)); //true
    
    //删除操作
    hd.delete(arr);
    
    //检索判断
    console.log(hd.has(arr)); //false

### 垃圾回收 ###

WakeMap的键名对象不会增加引用计数器，如果一个对象不被引用了会自动删除。

*  下例当hd删除时内存即清除，因为WeakMap是弱引用不会产生引用计数
 *  当垃圾回收时因为对象被删除，这时WakeMap也就没有记录了

### 选课案例 ###

![在这里插入图片描述][ec947674e8034edd88b93a1b140e2b6d.gif_pic_center]

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
    </head>
    
    <style>
      * {
        
        padding: 0;
        margin: 0;
      }
    
      body {
        
        padding: 20px;
        width: 100vw;
        display: flex;
        box-sizing: border-box;
      }
    
      div {
        
        border: solid 2px #ddd;
        padding: 10px;
        flex: 1;
      }
    
      div:last-of-type {
        
        margin-left: -2px;
      }
    
      ul {
        
        list-style: none;
        display: flex;
        width: 200px;
        flex-direction: column;
      }
    
      li {
        
        height: 30px;
        border: solid 2px #e67e22;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;
        color: #333;
        transition: 1s;
      }
    
      a {
        
        border-radius: 3px;
        width: 20px;
        height: 20px;
        text-decoration: none;
        text-align: center;
        background: #16a085;
        color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
      }
    
      .remove {
        
        border: solid 2px #eee;
        opacity: 0.8;
        color: #eee;
      }
    
      .remove a {
        
        background: #eee;
      }
    
      p {
        
        margin-top: 20px;
      }
    
      p span {
        
        display: inline-block;
        background: #16a085;
        padding: 5px;
        color: white;
        margin-right: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
      }
    </style>
    
    <body>
    
      <div>
        <ul>
          <li><span>php</span> <a href="javascript:;">+</a></li>
          <li><span>js</span> <a href="javascript:;">+</a></li>
          <li><span>python</span><a href="javascript:;">+</a></li>
        </ul>
      </div>
    
      <div>
        <strong id="count">共选了2门课</strong>
        <p id="lists"></p>
      </div>
    
    </body>
    
    <script>
      class Lesson {
        
    
        // 初始化值
        constructor() {
        
          this.lis = document.querySelectorAll("ul>li");
          this.countELem = document.getElementById("count");
          this.listElem = document.getElementById("lists");
          this.map = new WeakMap();
        }
    
        // 操作DOM
        run() {
        
          this.lis.forEach(item => {
        
            item.querySelector("a").addEventListener("click", event => {
        
    
              const elem = event.target; // target 事件属性返回触发事件的元素。
              const state = elem.getAttribute("select");
    
              if (state) {
        
                elem.removeAttribute("select");
                this.map.delete(elem.parentElement);
                elem.innerHTML = "+";
                elem.style.backgroundColor = "green";
              } else {
        
                elem.setAttribute("select", true);
    
                // parentElement只读属性返回指定元素的父元素。
                this.map.set(elem.parentElement, true);
    
                elem.innerHTML = "-";
                elem.style.backgroundColor = "red";
              }
    
              this.render();
            });
          });
        }
    
        // 计数器
        count() {
        
          return [...this.lis].reduce((count, item) => {
        
            return (count += this.map.has(item) ? 1 : 0);
          }, 0);
        }
    
        // 展示列表
        lists() {
        
          return [...this.lis]
            .filter(item => {
        
              return this.map.has(item);
            })
            .map(item => {
        
              return `<span>${
          item.querySelector("span").innerHTML}</span>`;
            });
        }
    
        // 渲染
        render() {
        
          this.countELem.innerHTML = `共选了${
          this.count()}课`;
          this.listElem.innerHTML = this.lists().join("");
        }
    
      }
    
      new Lesson().run();
    </script>
    
    </html>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2e282254525d459e96789c38772c6504.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/32a15063316e4966bfba3e6422cc8d4a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/fcd277e2c3ca4454ad849fc6fdead228.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[c589466126494cadac16f6dc9c0aa9a8.png]: https://img-blog.csdnimg.cn/c589466126494cadac16f6dc9c0aa9a8.png
[14af2b4a9bc74dbea11c06e499e6538b.png]: https://img-blog.csdnimg.cn/14af2b4a9bc74dbea11c06e499e6538b.png
[9d91023f2bb644e582b8839a8d69f1e8.png]: https://img-blog.csdnimg.cn/9d91023f2bb644e582b8839a8d69f1e8.png
[ded66f69133249ccbb73a1a4cad7a92e.png]: https://img-blog.csdnimg.cn/ded66f69133249ccbb73a1a4cad7a92e.png
[6ede2ca7e9ba4e00896906ae5a9ac35c.gif_pic_center]: https://img-blog.csdnimg.cn/6ede2ca7e9ba4e00896906ae5a9ac35c.gif#pic_center
[deb833fa45a6468dbcf4e4efc4b629f8.gif_pic_center]: https://img-blog.csdnimg.cn/deb833fa45a6468dbcf4e4efc4b629f8.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f2759930adde4897b845babd9430b6eb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[ec947674e8034edd88b93a1b140e2b6d.gif_pic_center]: https://img-blog.csdnimg.cn/ec947674e8034edd88b93a1b140e2b6d.gif#pic_center