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

2024-10-07 03:01:09

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>

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中的使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

js原生map实现的方法总结

js原生方法map实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
JavaScript中Object、map、weakmap的区别分析

前言 ECMAScript 6以前,在JavaScript中实现"键/值"式存储可以使用Object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值.但这种实现并非没有问题,为此TC39委员会专门为"键/值"存储定义了一个规范.作为ECMAScript 6的新增特性,Map是一种新的集合类型,为这门语言带来了真正的键/值存储机制.Map的大多数特性都可以通过Object类型实现,但二者之间还是存在一些细微的差异.具体实践中使用哪一个,还是值得细细甄别.
java中JSONObject转换为HashMap(方法+main方法调用实例)

1.首先要导入json相关的jar包引入的jar包: (版本自行定义,可以选用使用人数偏多的版本,这样比较稳定) commons-beanutils-1.9.2.jar commons-collections-3.2.1.jar commons-lang-2.6.jar commons-logging-1.2.jar ezmorph-1.0.6.jar json-lib-2.4-jdk15.jar jar包的下载可以去下面这个网址搜索: https://mvnrepository.com/ 2
fastjson对JSONObject中的指定字段重新赋值的实现

JSONObject对同一个key重新put时,新值就会取代旧值,没有set之类的方法构建json string时,所有的引号都要转义 package xx; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; // 对JSONObject中的指定字段重新赋值 public class testJsonReplace { public static void main(String[] args)
springboot中JSONObject遍历并替换部分json值

使用场景如何修改JSONObject 的值,如何替换json中的部分内容,比如检查报告我们再数据库存的是json格式的字符串varchar,然后前端传来确认更新报告的json,后台接口需要将前端传来的json里面的内容更新到后台数据库(当然,前端传来的不一定是完整的字符串,可能是一个,两个,总之只是部分不是全部).这个时候就需要使用这个方案了. 代码展示 @PutMapping("/result/{checkNum}") public ApiReturnObject update(@
详解Java中String JSONObject JSONArray List<实体类>转换

JSON使用阿里的fastJson为依赖包 gradle依赖管理如下: compile group: 'com.alibaba', name: 'fastjson', version:'1.2.41' 1.String转JSONObject 前言:String 是JSONObject格式的字符串 eg: JSONObject jSONObject = JSONObject.parseObject(String); 2.String转JSONArray 前言:String 是JSONArray格式
Java使用JSONObject操作json实例解析

本文实例讲述了Java使用JSONObject操作json.分享给大家供大家参考,具体如下: 简介在程序开发过程中,在参数传递,函数返回值等方面,越来越多的使用JSON.JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,同时也易于机器解析和生成.易于理解.阅读和撰写,而且Json采用完全独立于语言的文本格式,这使得Json成为理想的数据交换语言. JSON建构于两种结构: "名称/值"对的集合(A Collection of name/va
Java使用JSONObject需要的6个jar包下载地址

JSONObject所必需的6个jar包: commons-beanutils-1.7.0.jar commons-collections-3.1.jar commons-lang-2.5.jar commons-logging.jar ezmorph-1.0.3.jar json-lib-2.1-jdk15.jar 网上有很多的下载jar包地址,但是我个人比较喜欢的是Maven网站,里面一般提供了各种版本. 这个网址是maven仓库的国内镜像地址: http://mvnrepository.c
Map与WeakMap类型在JavaScript中的使用详解

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-scal
javascript中Promise使用详解

目录一.首先,要知道为什么要用Promise语法? 二.接着,来了解一下回调地狱(Callback Hell) 三.最后,也是本章的重头戏,Promise的基本使用 (一) resolve函数 (二) rejected函数 (三)Promise的API 1. then 2. catch 3. finally 4. Promise.all 5. Promise.race 四.最后前言: 做过前端开发的都知道,JavaScript是单线程语言,浏览器只分配给JS一个主线程,用来执行任务,但是每次
javascript中正则表达式语法详解

好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要是以前本人一遇到写正则的需求就开始头大,头疼,网上剽窃,东拼西凑,反正就是各种不适应,所以我打算系统的把正则表达式看一遍,一来是自己有所提升,这一块知识点的查漏补缺,二来是给大家分享一下.好了,下面我们直接进入主题: 正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符
javascript中clone对象详解

开发中,打断对象间的引用关系,只想下个副本的情况无处不在,clone一个对象就在所难免了. JavaScript中,简单的方法就是用JSON函数,将对象stringify成字符串,再parse成一个新对象.要么就是从网上搜个代码,开源社区里面clone的代码还是有不少的. 代码虽然可以找得到,但,东西永远是别人的,动手学着码永远是个不变的主题. 自己写了两个克隆的函数: cloneOwn:克隆自定义对象的自有属性,不包括继承的属性,属性可以是基本数据类型和数组,自定义的对象,可以制定要克隆的属性
javascript中new关键字详解

和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中new关键字不是用来创建一个类的实例对象,而是用于继承. 接下来,本文将带你一起来探索JS中new的奥秘... function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = function(){ conso
javascript中this关键字详解

不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法.强烈推荐. 以下篇幅有点长,希望读者耐心阅读. 以下内容会分为如下部分: 1.涵义 1.1:this涵义 1.2:this指向的可变性 2.使用场合 2.1:全局环境 2.2:构造函数 2.3:对象的方法 3.使用注意点 3.1:避免多层嵌套this 3.2:避免数组处理方法中的this 3.3:避免回调函数中的this 1.涵义 1.1:this涵义在我写的一篇关于构造函数与new关键字
JavaScript中闭包的详解

闭包是什么在 JavaScript 中,闭包是一个让人很难弄懂的概念.ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. 是不是看完这个定义感觉更加懵逼了?别急,我们来分析一下. 闭包是一个函数闭包可以使用在它外面定义的变量闭包存在定义该变量的作用域中好像有点清晰了,但是使用在它外面定义的变量是什么意思,我们先来看看变量作用域. 变量作用域变量可分为全局变量和局部变量.全局变量的作用域就是全局性的,在 js
比较全面的C 、Java、JavaScript中的正则表达式详解

什么是正则表达式? 正则表达式(Regular Expression) 就是用某种模式去匹配一类字符串的公式.如你要在一篇文章中查找第一个字是"罗"最后一个字是"浩"的三个字的姓名,即"罗 * 浩":那么"罗 * 浩"就是公式,也称作模式(Pattern) ,这篇文章就是要匹配的串( 或叫文本 text) .再如,你要检查输入的一个字符串是否是 126 邮箱的格式,你得制定一个规则去查检,这种规则就是正则表达式. 从入门开
javascript中闭包(Closure)详解

在javascript中,函数可看作是一种数据,可以赋值给变量,可以嵌套在另一个函数中. var fun = function(){ console.log("平底斜"); } function fun(){ var n=10; function son(){ n++; } son(); console.log(n); } fun(); //11 fun(); //11 我们把上面第二段代码稍微修改下: var n=10; function fun(){ function son(){
Javascript中的 “&” 和 “|” 详解

一.前言: 在文章开始之前,先出几个题目给大家看看: var num1 = 1 & 0; console.log(num1); // 0 var num2 = 'string' & 1; console.log(num2); // 0 var num3 = true & 1; console.log(num3); // 1 var num4 = undefined | false; console.log(num4); // 0 var num5 = undefined | tru

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

相关推荐

随机推荐