首页
所有分类
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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
浅谈javascript中return语句
Jul 15 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 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
redis shake(1) 窗口函数(3) 阿里云(6) 分析统计(1) 速龙(1) 数据同步(1) matplotlib(7) 排名(1) 条形图(1) Tomcat(18)
You might like
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
IE 条件注释详解总结（附实例代码）
2009/08/29 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”
2015/03/05 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
javascript实现视频弹幕效果（两个版本）
2019/11/28 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python文件如何引入？详解引入Python文件步骤
2018/12/10 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python中 * 的用法详解
2019/07/10 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
购买大码女装：Lane Bryant
2016/09/07 全球购物
法国房车租赁网站：Yescapa
2019/08/26 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商：Wynsors
2020/02/17 全球购物
技术总监岗位职责
2013/12/05 职场文书
教师实习自我鉴定
2013/12/14 职场文书
创业计划书撰写原则
2014/01/25 职场文书
总会计师岗位职责
2014/02/19 职场文书
中文教师求职信
2014/02/22 职场文书
社区交通安全实施方案
2014/03/22 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
大学生党员个人总结
2015/02/13 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
Python time库的时间时钟处理
2021/05/02 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python