首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Map与WeakMap类型在JavaScript中的使用详解

Posted in Javascript onNovember 18, 2020

map类型特点与创建方法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>


  <script>
    // 对象的键名会自动转为字符串
    // let obj = {
    //   1: 'cyy1',
    //   '1': 'cyy2'
    // };
    // console.log(obj);

    // 对象的键名是对象时，会自动转为字符串
    // 读取时也要先转为字符串再读取
    //     let obj = {
    //       name: 'cyy'
    //     };
    //     let obj2 = {
    //       obj: 'cyy2',
    //       [obj]: 'cyy3'
    //     };
    //     console.log(obj2);
    //     console.log(obj2[obj.toString()]);

    // map类型，什么都可以作为键，键名可以是任何类型
    // let map = new Map();
    // map.set('name', 'cyy');
    // map.set(function() {}, 'cyy2');
    // map.set({}, 'cyy3');
    // map.set(1, 'cyy4');
    // console.log(map);

    // 构造函数创建时加入数据
    let map = new Map([
      ['name', 'cyy'],
      ['age', 18]
    ]);
    console.log(map);

    // 支持链式操作
    let str = 'cyy';
    let str2 = str.toUpperCase().substr(1, 2);
    console.log(str2);

    map.set('11', 11).set('22', 22);
    console.log(map);
  </script>
</body>

</html>

map类型增删改查操作：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>


  <script>
    let obj = {
      name: 'cyy'
    };
    let map = new Map();
    map.set(obj, 'obj');
    console.log(map.has(obj));
    console.log(map);
    console.log(map.get(obj));
    console.log(map.delete('abc'));
    console.log(map.delete(obj));
    map.clear();
    console.log(map);
  </script>
</body>

</html>

遍历map类型数据：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>


  <script>
    let map = new Map([
      [1, 11],
      [2, 22]
    ]);
    // console.log(map.keys());
    // console.log(map.values());
    // console.log(map.entries());

    // for (let k of map.keys()) {
    //   console.log(k);
    // }
    // for (let v of map.values()) {
    //   console.log(v);
    // }
    // for (let e of map.entries()) {
    //   console.log(e);
    // }
    // for (let [k, v] of map.entries()) {
    //   console.log(`${k}--${v}`);
    // }

    map.forEach((item, key) => {
      console.log(item + '--' + key);
    })
  </script>
</body>

</html>

map类型转换操作：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>

  <script>
    let map = new Map([
      ['name', 'cyy'],
      ['age', '18']
    ]);
    // console.log(...map);
    // console.log([...map]);
    // console.log([...map.entries()]);
    // console.log([...map.keys()]);
    // console.log([...map.values()]);

    // let arr = [...map].filter(item => item[1].includes('cyy'));
    let arr = [...map].filter(item => {
      return item[1].includes('cyy');
    });
    // console.log(arr);
    let new_map = new Map(arr);
    console.log(new_map);
    console.log(new_map.values());
    // ...是展开语法
    console.log(...new_map.values());
  </script>
</body>

</html>

map类型管理DOM节点：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>
  <div name="cyy1">cyy1</div>
  <div name="cyy2">cyy2</div>

  <script>
    let map = new Map();
    let divs = document.querySelectorAll('div');
    divs.forEach(item => {
      // 往map中压入数据
      map.set(item, {
        content: item.getAttribute('name')
      });
    });
    // console.log(map);
    map.forEach((config, elem) => {
      // console.log(config, elem);
      elem.addEventListener('click', function() {
        console.log(config.content);
      });
    })
  </script>
</body>

</html>

使用map类型控制网站表单提交：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>
  <form action="#" onsubmit="return post()">
    接受协议：
    <input type="checkbox" name="agreement" error="请接受协议"> 我是学生：
    <input type="checkbox" name="student" error="网站只对学生开放">
    <input type="submit" value="提交">
  </form>

  <script>
    function post() {
      let map = new Map();
      let inputs = document.querySelectorAll('[error]');
      console.log(inputs);
      inputs.forEach(item => {
        map.set(item, {
          error: item.getAttribute('error'),
          status: item.checked
        });
      });
      // console.log(map);
      return [...map].every(([elem, config]) => {
        // 短路操作，前面为真，则不会执行后面
        // 前面会假，则执行后面
        config.status || alert(config.error);
        return config.status;
        // console.log(config);
      });

    }
  </script>
</body>

</html>

Map与WeakMap类型在JavaScript中的使用详解

WeakMap的语法使用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <style>

  </style>
</head>

<body>
  <div>cyy</div>
  <div>cyy2</div>

  <script>
    // WeakMap的键只能是引用对象
    // let map = new WeakMap();
    // map.set('name');
    // console.log(map);

    // map.set([]);
    // console.log(map);

    // let map = new WeakMap();
    // let divs = document.querySelectorAll('div');
    // divs.forEach(item => map.set(item, item.innerHTML));
    // console.log(map);

    // WeakMap也是弱引用类型
    // let arr = [];
    // let map = new WeakMap();
    // map.set(arr, 'cyy');
    // map.delete(arr);
    // console.log(map.has(arr));
    // console.log(map);

    // 弱引用类型，values、keys、entries、迭代循环都用不了
    let map = new WeakMap();
    // console.log(map.keys());

    for (const iterator of map) {
      console.log(iterator);
    }
  </script>
</body>

</html>

WeakMap弱引用类型体验：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>

  </style>
</head>

<body>


  <script>
    let a = { name: 'cyy' };
    let b = a;
    let map = new WeakMap();
    map.set(a, 'cuu2');
    console.log(map);
    a = null;
    b = null;
    console.log(map);
    setTimeout(function () {
      console.log(map);
    }, 1000);
  </script>
</body>

</html>

使用WeakMap开发选课组件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    main {
      width: 100%;
      display: flex;
      flex: 1;
    }

    section {
      border: 2px solid #ddd;
      width: 50%;
      padding: 10px;
    }

    ul {
      list-style: none;
    }

    li {
      padding: 10px;
      border: 2px solid orange;
      margin-bottom: 5px;
      position: relative;
    }

    a {
      display: inline-block;
      position: absolute;
      right: 10px;
      width: 20px;
      height: 20px;
      background: green;
      color: white;
      text-decoration: none;
      line-height: 20px;
      text-align: center;
    }

    #list span {
      background: green;
      border-radius: 5px;
      padding: 5px;
      color: white;
      margin: 5px;
    }

    #list {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <main>
    <section>
      <ul>
        <li><span>html</span><a href="javascript:;">＋</a></li>
        <li><span>css</span><a href="javascript:;">＋</a></li>
        <li><span>js</span><a href="javascript:;">＋</a></li>
      </ul>
    </section>
    <section>
      <strong id="count">共选了2门课</strong>
      <p id="list">
        <!-- <span>111</span> -->
      </p>
    </section>
  </main>

  <script>
    class Lesson {
      // 构造函数
      constructor() {
        this.lis = document.querySelectorAll('li');
        this.countElem = document.getElementById('count');
        this.listElem = document.getElementById('list');
        // console.log(this.lis, this.countElem, this.listElem);
        this.map = new WeakMap();
      }
      run() {
        this.lis.forEach(li => {
          li.querySelector('a').addEventListener('click', event => {
            let a = event.target;
            // console.log(li);
            // console.log(event.target.parentElement);
            const state = li.getAttribute('select');
            if (state) {
              // 移除
              li.removeAttribute('select');
              this.map.delete(li);
              a.style.backgroundColor = 'green';
              a.innerHTML = '＋';
            } else {
              // 添加
              li.setAttribute('select', true);
              this.map.set(li);
              a.style.backgroundColor = 'red';
              a.innerHTML = '-';
            }
            // console.log(this.map);
            this.render();
          });
        })
      }
      render() {
        this.countElem.innerHTML = `共选了${this.count()}门课`;
        // console.log(this.count());
        this.listElem.innerHTML = this.list();
      }
      count() {
        return [...this.lis].reduce((count, li) => {
          return count += this.map.has(li) ? 1 : 0;
        }, 0);
      }
      list() {
        let lis = [...this.lis].filter(li => {
          return this.map.has(li);
        }).map(li => {
          return `<span>${li.querySelector('span').innerHTML}</span>`;
        }).join('');
        // console.log(lis);
        return lis;
      }
    }
    new Lesson().run();
  </script>
</body>

</html>

Map与WeakMap类型在JavaScript中的使用详解

到此这篇关于Map与WeakMap类型在JavaScript中的使用的文章就介绍到这了,更多相关Map与WeakMap类型在JavaScript中的使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

Map与WeakMap类型在JavaScript中的使用详解

- Author -

陈莺莺呀

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 #Javascript
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
vue实现下载文件流完整前后端代码
Nov 17 #Vue.js
vue+iview实现文件上传
Nov 17 #Vue.js
FuzzyWuzzy(1) PyTorch(1) Pyecharts(7) moviepy(1) opencv(7) 模型保存加载(1) Athens(1) 模糊匹配(1) compose(3) iOS(1)
You might like
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python OpenCV之图片缩放的实现（cv2.resize）
2019/06/28 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python列表如何更新值
2020/05/27 Python
全天然狗零食：Best Bully Sticks
2016/09/22 全球购物
标准导师推荐信（医学类）
2013/10/28 职场文书
会计毕业生自荐信
2013/11/21 职场文书
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
防火标语大全
2014/10/06 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
中秋节慰问信
2015/02/15 职场文书
感恩节寄语2015
2015/03/24 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS