JavaScript高级(十三)---ES6中Set,map

 ES6

Set
  • 在ES6之前,我们存储数据的结构主要有两种:数组、对象。

    • 在ES6中新增了另外两种数据结构:Set、Map,以及它们的另外形式WeakSet、WeakMap。
  • Set是一个新增的数据结构,可以用来保存数据,类似于数组,但是和数组区别元素不能重复

    • 创建Set我们需要通过Set构造函数(暂时没有字面量创建的方式):
  • Set常见的属性和方法

    • size 返回Set中元素的个数。[属性]
    • add(value) 添加某个Set元素,并返回对象本身。
    • delete(key):根据key删除一个键值对,返回Boolean类型。
    • has(value) 判断某个元素是否存在,返回boolean类型。
    • clear() 清空所有元素,没有返回值。
    • forEach() 遍历
  • 使用场景

    • 数组去重

WeakSet
  • 和Set类似的另外一个数据结构称之为WeakSet,也是内部元素不能重复的数据结构。
  • 那么和Set有什么区别呢?
    • 区别一:WeakSet中只能存放对象类型,不能存放基本数据类型;
    • 区别二:WeakSet对元素的引用是弱引用,如果没有其他引用对某个对象进行引用,那么GC可以对该对象进行回收;
    • 无法遍历
  • 常见方法
    • add(value):添加某个元素,返回WeakSet对象本身;
    • delete(value):从WeakSet中删除和这个值相等的元素,返回boolean类型;
    • has(value):判断WeakSet中是否存在某个元素,返回boolean类型;
  • 使用场景
      // Stack Overflow
      const pwset = new WeakSet();
    
      class Person {
        // new的时候会执行constructor里面的代码
        constructor() {
          pwset.add(this)
        }
    
        running() {
          if (!pwset.has(this)) {
            throw new Error('不能通过其他对象来调用running方法')
          }
          console.log("running", this)
        }
      }
    
      var p = new Person();
      console.log(p.running())
      // 会报错
      p.running.call({ })
      
      // 这里为什么使用WeakSet呢? 
      // 因为WeakSet是弱引用 我们把p = null 后 就会被GC回收
      // 如果使用Set 就会是强引用 ,我们把p = null 后 还要 set.delete(p) 才会被GC回收
    
    
    强引用和弱引用的区别
  • 弱引用 弱引用与强引用相对, 一个对象若只被弱引用所引用,则被认为是不可访问(或弱可访问)的,并因此可能在任何时刻被回收。因此使用弱引用可以防止内存泄漏。在JavaScript中弱引用的WeakMapWeakSet

强引用 JavaScript中最常见的就是声明一个变量并且将一个引用类型数据(对象)赋值给这个变量,这种情况就是强引用。只要该对象还被引用,垃圾回收机制GC就不会回收该对象或者属性。对于一个普通对象,将全部引用该对象的变量关系相应设置为null,便能等待垃圾回收机制GC回收

map

  • 数据结构Map,用于存储映射关系。

    • 事实上我们对象存储映射关系只能用字符串(ES6新增了Symbol)作为属性名(key);
    • 某些情况下我们可能希望通过其他类型作为key,比如对象,这个时候会自动将对象转成字符串来作为key;对象的key内部会自动toString();
  • Map常见的属性和方法

    • size 返回Set中元素的个数。[属性]
    • set(key, value):在Map中添加key、value,并且返回整个Map对象。
    • get(key):根据key获取Map中的value。
    • has(value) 判断某个元素是否存在,返回boolean类型。
    • clear() 清空所有元素,没有返回值。
    • forEach(value,key,map) 遍历
  • 使用场景

    • 缓存
    •     const decorator = (fn) => {
            const mapList = new Map();
            return (x, y) => {
              const sum = `${x}${y}`;
              if (mapList.has(sum)) {
                return mapList.get(sum);
              }
              const res = fn(x, y)
              mapList.set(sum, res);
              return res;
            }
          }
      
          let work = (a, b) => {
            return a + b;
          }
      
          work = decorator(work)
          work(1, 2);
          work(1, 2); // 这里实际上用的缓存
          work(3, 4);
          work(3, 4); // 这里实际上用的缓存
      
      WeakMap
    • WeakMap的key只能使用对象,不接受其他的类型作为key

    • WeakMap的key对对象想的引用是弱引用,如果没有其他引用引用这个对象,那么GC可以回收该对象;

    • WeakMap常见方法:

      • set(key, value):在Map中添加key、value,并且返回整个Map对象
      • get(key):根据key获取Map中的value
      • has(key):判断是否包括某一个key,返回Boolean类型
      • delete(key):根据key删除一个键值对,返回Boolean类型
    • Weak使用场景(vue3响应式原理)

  •     const obj1 = {
          name: "why",
          age: 18
        }
    
        const obj2 = {
          name: "why",
          age: 18
        }
    
        // 1.创建WeakMap
        const weakMap = new WeakMap();
    
        // 2. 收集依赖结构
        // 2.1 使用map来收集
        const obj1Map = new Map();
        obj1Map.set("name", [obj1GetName, obj1SetName])
        obj1Map.set("age", [obj1GetAge, obj1SetAge])
        weakMap.set(obj1, obj1Map)
    
    
        // 3.如果obj1.name发生改变
        // Proxy/Object.defineProperty
        obj1.name = "test";
        const targetMap = weakMap.get(obj1);
        const fns = targetMap.get("name")
        fns.forEach(item => item())
    
    
        function obj1GetName() {
          console.log("obj1GetName")
        }
    
        function obj1SetName() {
          console.log("obj1SetName")
        }
    
        function obj1GetAge() {
          console.log("obj1GetAge")
        }
    
        function obj1SetAge() {
          console.log("obj1SetAge")
        }
    
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/474998.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt QGraphicsView移动、缩放

原链接 首先需要明白,view在整个视图框架中的角色是用于显示scene的,所以决定了如何展示scene,包括scale()函数,用于放大缩小所展示的scene;centerOn()函数,决定scene的中心在何方。所有的操作&#xff0c…

VS2019 C++ NetCDF配置

原链接1 原链接2 做个备份 1.下载对应的NetCDF-C和C库 官网下载 选择64位的NetCDF4安装版(没有DAP的) 现在官网已经没有NetCDF-C 4.7.3 版本了,网上别人提供了新的下载地址:NetCDF各个版本(Index of /library/net…

vue iframe实现父页面实时调用子页面方法和内容

父页面标签添加鼠标按下事件 父页方法中建立iframe通信 实时调用子页面方法 实时更改子页面文本内容

贵州省二级分类土地利用数据(矢量)

贵州省,地处中国西南腹地,地貌属于中国西南部高原山地,境内地势西高东低,自中部向北、东、南三面倾斜,平均海拔在1100米左右。贵州高原山地居多,素有“八山一水一分田”之说。全省地貌可概括分为&#xff1…

基于SpringBoot的街道办管理系统

摘 要 随着世界经济信息化、全球化的到来和互联网的飞速发展,推动了各行业的改革。若想达到安全,快捷的目的,就需要拥有信息化的组织和管理模式,建立一套合理、动态的、交互友好的、高效的街道办管理系统。当前的信息管理存在工作…

Python+requests+unittest+excel搭建接口自动化测试框架(超详细)

🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 一、框架结构 工程目录【文末有配套视频和资料免费领取】 代码:基于python2编写 二…

006_【基础篇】springboot整合Mybatis

SpringBoot 整合 Mybatis 只需要两步: 案例: 创建数据库 在 IDEA 提供的插件的内置的数据库图形化界面(其他图形化界面软件也可以,都一样) 中创建以下数据库: create database if not exists mybatis;use mybatis…

principles of network applications网络应用原理

Creating a network app write programs that: ▪ run on (different) end systems ▪ communicate over network ▪ e.g., web server software communicates with browser software application transport network data link physical application transport network data li…

LeetCode每日一题【206. 反转链表】

思路:双指针,一前一后,逐个把指向后面的指针指向前面。 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), ne…

面试常问:为什么 Vite 速度比 Webpack 快

前言 最近作者在学习 webpack 相关的知识,之前一直对这个问题不是特别了解,甚至讲不出个123....,这个问题在面试中也是常见的,作者在学习的过程当中总结了以下几点,在这里分享给大家看一下,当然最重要的是…

安全、合规、提质增效,南方某电网公司如何通过代码审计保障能源数字化转型?

​南方某电网公司供电营业区覆盖十几个州市,是所在省域电网运营和交易的主体,也是承担对外供电和培育电力支柱产业的重要企业。近年来该电网公司在数字化转型方面深耕细作,紧跟工业互联网的时代浪潮,打造设备智慧运维数字化场景&a…

Elasticsearch:ES|QL 入门 - Python Notebook

数据丰富在本笔记本中,你将学习 Elasticsearch 查询语言 (ES|QL) 的基础知识。 你将使用官方 Elasticsearch Python 客户端。 你将学习如何: 运行 ES|QL 查询使用处理命令对表格进行排序查询数据链式处理命令计算值计算统计数据访问列创建直方图丰富数…

数据结构从入门到精通——冒泡排序

冒泡排序 前言一、冒泡排序的基本思想二、冒泡排序的特性总结三、冒泡排序的动画演示四、冒泡排序的具体代码test.c 前言 冒泡排序是一种简单的排序算法,通过重复遍历待排序数列,比较相邻元素的大小并交换位置,使得每一轮遍历后最大&#xf…

蓝桥杯 2023 省A 更小的数

主要思路: 输入一个长度为n的字符串,用二维数组dp[i][j]来记录子串[i, j]是否需要反转一次才能满足条件。使用动态规划自底向上地填充dp数组。根据问题的要求,需要考虑字符串的子串中字符的大小关系来判断是否需要反转。最后统计满足条件的子…

小红书,已破!支持无水印批量下载

在我们刷小红书时,经常会遇到自己喜欢的头像/壁纸/背景图图片或各大博主发布的视频教程,想保存下载使用和后续的查看,但保存下载后发现图片或视频右下角保留小红书的水印,很影响使用查看的体验。 所以本期文章最软库给大家分享一…

3D高斯泼溅的崛起

沉浸式媒体领域正在以前所未有的速度发展,其中 3D 高斯溅射成为一项关键突破。 这项技术在广泛的应用中看起来非常有前景,并且可能会彻底改变我们未来创建数字环境以及与数字环境交互的方式。 在本文中,我们将通过与摄影测量和 NeRF 等前辈进…

JAVA_会话

会话技术 1.会话: 一次会话包含多次请求和响应 2.功能: 在一次会话的范围内的多次请求,共享数据 3.方式: 3.1.客户端会话技术 Cookie(甜点) 1.概念: 客户端会话技术,将数据保存到客户端 2.快速入门: 1.创建Cookie对象,绑定数据new Cookie(String name,String v…

3000+人使用,这套人力资源数据分析工具还能这么用

中国科学院自动化研究所(以下简称“自动化所”)成立于1956年,是中国科学院率先布局成立的“人工智能创新研究院”的总体牵头单位,是中国最早开展智能科学与技术基础理论、关键技术和创新性应用研究的科研机构,也是中国…

G1和ZGC垃圾回收器学习

前言 ​ 随着JDK17的占有率不断升高和SpringBoot3最低支持JDk17,JDK17很大概率会成为大家后续升级的一个选择,而JDK17上最重要的垃圾回收器G1和ZGC,也就显得格外重要。大家提前了解或者学习一下肯定是有用的。 ​ 本篇文章也默认大家了解一…

Python 全栈体系【四阶】(十五)

第五章 深度学习 一、基本理论 1. 深度学习概述 1.1 引入 1.1.1 人工智能划时代事件 2016 年 3 月,Google 公司研发的 AlphaGo 以 4:1 击败世界围棋顶级选手李世石。次年,AlphaGo2.0 对战世界最年轻的围棋四冠王柯洁,以 3:0 击败对方。背后…