ES12 学习

文章目录

  • 1. 逻辑赋值操作符
  • 2. 数字分隔符_
  • 3. replaceAll
  • 4. Promise.any
  • 5. WeakRefs
  • 6. FinalizationRegistry

1. 逻辑赋值操作符

逻辑赋值操作符 ??=、&&=、||=

let a = true
let b = true
a &&= b  // a = a && b
a ||= b  // a = a || b
obj.introduction ??= "这个人很懒"
// obj.introduction = obj.introduction ?? "这个人很懒"

2. 数字分隔符_

这个新特性是为了方便程序员看代码而出现的。如果数字比较大,那么看起来就不是那么一目了然。

123,456,789 与 123_456_789 其中的‘ , ’ 和 ‘ _ ’作用一样,都只是为了方便看而存在的。

let num = 123456789
let num2 = 123456789
console.log(num === num2) // true
let num3 = 0b0010_1010
let num4 = 0012_34_56
let num5 = 0xa1_b2_c3

3. replaceAll

所有匹配都会被替代项替换。模式可以是字符串或正则表达式,而替换项可以是字符串或针对每次匹配执行的函数。并返回一个全新的字符串。

  1. 使用replace()
let str = `I wish to wish the wish you wish to wish,but if you wish
the wish the witch wishes,I won't wish the wish you wish to wish.`
console.log(str.replace("wish","*"))

// I * to wish the wish you wish to wish,but if you wish
the wish the witch wishes,I won’t wish the wish you wish to wish.

  1. 使用正则表达式
console.log(str.replace(/wish/g,"*")

// I * to * the * you * to * but if you * the * the witch * es,I won’t * the * you to * .

  1. 使用repalceAll()
console.log(str.replaceAll("wish","*"))

// I * to * the * you * to * but if you * the * the witch * es,I won’t * the * you to * .

4. Promise.any

只要参数实例有一个变成fulfilled 状态,包装实例就会变成fulfilled 状态;如果所有参数实例都变成rejected 状态,包装实例就会变成rejected状态。

首先先回顾一下Promise.all / race / allSettled吧!

  1. Promise.all
    有一个大的模块中需要多个模块传入数据,只有全部模块都传入数据完毕程序才向下执行;

  2. Promise.race
    多个模块返回数据需要的时间不同,哪个模块最先返回数据就执行哪个模块;

  3. Promise.allSettled
    多个模块返回数据,不管有没有数据返回都会执行then() ,一般情况下我们会使用filter() 过滤得到能用的数据。

现在我们要执行一个登录任务:设计一个登录 – 会员联盟系统,其中包括商超1,商超2,商超3,只要注册了一家的会员就能在另外两家商超使用会员,不然跳转到注册页面。

let ajax1 = function(){
return new Promise((resolve,reject)=>{
resoLve("商超1")
})
let ajax2 = function(){
return new Promise((resolve,reject)=>{
resoLve("商超2")
})
let ajax3 = function(){
return new Promise((resolve,reject)=>{
resoLve("商超3")
})
Promise.any([ajax1(),ajax2(),ajax3()]).then(res=>{
console.log(res)
}).catch(err=>{
console.log("err",err)
})

// 商超1

any 和race 的不同点是:
使用race 时如果先返回的Promise 对象是rejected ,那么将执行catch() ;

使用any 时如果先返回一定是fulfilled 状态的Promise 对象,如果该模块所有的Promise 对象都为rejected 状态,那么将执行catch()。
在这里插入图片描述

5. WeakRefs

在一般情况下,对象的引用是强引用的,这意味着只要持有对象的引用,它就不会被垃圾回收。只有当该对象没有任何的强引用时,垃圾回收才会销毁该对象并且回收该对象所占的内存空间。而WeakRef允许您保留对另一个对象的弱引用,而不会阻止被弱引用对象被垃圾回收。

在ES6学习中,我们学习了Set 和Map 两种数据结构,其实还有WeakSet 和WeakMap 两种,在ES12 又推出了WeakRef ,我们在这里统一学习一下Weak 系列的数据结构。

垃圾回收机制学习

let obj = {
name:"kerwin"
}
let obj1 = obj
obj = null

闭包使用多了会造成内存泄露,因为我们让内部临时变量永久化了,导致了闭包的形成。

之前的Set 和Map 中也存在这样的问题。

let s1 = new Set()
s1.add(obj)
s1.add("aaaaa")
obj = null

这段代码中obj 的引用次数为一,无法触发垃圾回收机制,如果程序中多次出现这种情况,垃圾占用内存越来越多,也会造成内存泄露!那这种情况应该怎么解决呢?

我们只要将Set改为WeakSet

注意:WeakSet 和Set 有些差别,

  1. WeakSet 只能使用复杂数据类型;
  2. Weak 系列不存在引用计数加一;
  3. Weak 系列不能使用for 循环和size()
let s1 = new WeakSet()
s1.add(obj)
// s1.add("aaaaa")
obj = null

同样的,使用普通的Map 数据机构,下面的代码中obj 不会被回收,因为m1 总的引用数 >0 。

let obj = {
name:"kerwin"}
let m1 = new Map()
m1.set(obj,"111111")
obj =  null
// console.log(m1)

如果换成WeakMap 则obj 会被回收。


现在有一个DOM 节点,如果使用Map 存储该节点,当该节点被删除之后,但是不会出发垃圾回收机制;但是使用WeakMap ,obj 就会被回收。

let wmap = new WeakMap()
let like = document.getElementById("like")
wmap.set(like,{click:0})
like.onclick function(){
Let times wmap.get(like)
times.click++
}
setTimeout(()=>{
document.body.removeChild(like)
// like =null
console.log(like)
},2000)

虽然我们移除了like 但是因为我们先将like Dom 节点赋值给了like 变量,所以我们还是能够访问到like ,如果like = null 那么like 就会被回收,就访问不到like 了。

let wmap = new WeakMap()
wmap.set(document.getElementById("like"),{click:0})
document.getElementById("like").addEventListener("click",function(){
let times =  wmap.get(document.getElementById("like"))
times.click++
},false)
setTimeout(()=>{
document.body.removechild(document.getElementById("like"))
},2000)

这个案例也就是WeakSet 和WeakMap 的用武之地了。当Dom节点被删除之后,相应的数据就会被回收。

强引用和弱引用
一般来说,对象的引用都是强引用,这意味着只要有对象的引用,就不会被回收。

let obj = { name:"kerwin"}
let wobj = new WeakRef(obj)
// wobj.deref() 拿到原始对象

如果obj = null ,那么wobj.deref() 就拿不到对象,这就是对象的弱引用。wobj.deref() 这种写法就可以替换上面代码中的document.getElementById(“like”)

6. FinalizationRegistry

了解即可,建议少用。

清理器注册表功能FinalizationRegistry,用来指定目标对象被垃圾回收机制清除以后,所要执行的回调函数。

let obj = { name:"kerwin"}
let registry = new FinalizationRegistry(data=>{
console.log("销毁了",data)
})
registry.register(obj,"11111111111111")

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis -- 缓存击穿问题

缓存击穿问题也叫热点Key问题,就是一个被高并发访问并且缓存重建业务较复杂的key突然失效了,无数的请求访问会在瞬间给数据库带来巨大的冲击。 常见的解决方案有两种: 互斥锁 逻辑过期 逻辑分析:假设线程1在查询缓存之后&…

静态路由协议实验1

要求: 使用静态路由协议使得全网可达。 第一步、规划IP地址。并配置IP。 第二步、写静态路由 [r1]ip route-static 192.168.3.0 24 192.168.2.2 [r1]ip route-static 192.168.4.0 24 192.168.2.2 [r1]ip route-static 192.168.5.0 24 192.168.2.2[r2]ip route-st…

一、next-auth 身份验证凭据-使用电子邮件和密码注册登录

一、next-auth 身份验证凭据-使用电子邮件和密码注册登录 文章目录 一、next-auth 身份验证凭据-使用电子邮件和密码注册登录一、前言二、前置准备1、环境配置2、相关库安装(1)vercel 配置(2)Yarn 包管理配置 3、next项目初始化与…

【Oracle】oracle、mysql、sql server三者区别

欢迎来到《小5讲堂》,大家好,我是全栈小5。 这是《Oracle》系列文章,每篇文章将以博主理解的角度展开讲解, 特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识…

Shell脚本之基础-2

目录 一、字符处理 cut命令 awk命令 sed命令 字符串排序 二、条件判断 文件类型判断 文件权限判断 两个文件的判断 整数比较 字符串判断 多重判断 三、流程控制 if分支 if else 双分支结构 case分支 for循环 while循环 一、字符处理 cut命令 命令格式&#x…

深入剖析JavaScript中的this(下)

五、事件处理函数的this 5.1 事件绑定 <button id"btn">点击我</button>function handleClick(e) {console.log(this);// <button id"btn">点击我</button> }document.getElementById(btn).addEventListener(click, handleClick…

CSS基础:4种简单选择器的详解

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生&#xff0c;2年时间从1800到月入过万&#xff0c;工作5年买房。 分享成长心得。 261篇原创内容-公众号 后台回复“前端工具”可获取开发工具&#xff0c;持续更新中 后台回复“前端基础…

MySQL客户端安装并配置免密登录

最近在写脚本时需要向MySQL数据库中存储数据&#xff0c;且脚本运行的服务器与MySQL服务器不是同一台服务器&#xff0c;而且需要保证MySQL密码的安全性&#xff0c;不能在脚本中暴露&#xff0c;所以就需要在服务器上安装MySQL客户端&#xff0c;并配置免密登录。 一、虚拟机…

Git安装教程(图文安装)

Git Bash是git(版本管理器)中提供的一个命令行工具&#xff0c;外观类似于Windows系统内置的cmd命令行工具。 可以将Git Bash看作是一个终端模拟器&#xff0c;它提供了类似于Linux和Unix系统下Bash Shell环境的功能。通过Git Bash&#xff0c;用户可以在Windows系统中运行基于…

Vue项目登录页实现获取短信验证码的功能

之前我们写过不需要调后端接口就获取验证码的方法,具体看《无需后端接口,用原生js轻松实现验证码》这个文章。现在我们管理后台有个需求,就是登录页面需要获取验证码,用户可以输入验证码后进行登录。效果如下,当我点击获取验证码后能获取短信验证码: 这里在用户点击获取…

Linux 线程:线程同步、生产者消费者模型

目录 一、死锁 二、条件变量实现线程同步 1、为什么需要线程同步 2、条件变量、同步、竞态条件 3、条件变量函数&#xff1a;初始化 销毁 等待 唤醒 4、实现简单的多线程程序 不唤醒则一直等待 实现线程同步 三、生产者消费者 1、借助超市模型理解 2、优点 四、基于…

数字乡村创新实践探索:科技赋能农业现代化与乡村治理体系现代化同步推进

随着信息技术的飞速发展&#xff0c;数字乡村作为乡村振兴的重要战略方向&#xff0c;正日益成为推动农业现代化和乡村治理体系现代化的关键力量。科技赋能下的数字乡村&#xff0c;不仅提高了农业生产的效率和品质&#xff0c;也为乡村治理带来了新的机遇和挑战。本文旨在探讨…

Linux 环境下 Redis基础配置及开机自启

Linux 环境下 Redis基础配置及开机自启 linux环境安装redis<redis-6.0.5.tar.gz> 1-redis基本安装配置 解压 获取到tar包后&#xff0c;解压到相关目录&#xff0c;一般是将redis目录放在usr/local/redis目录下&#xff0c;可以使用-C指定到解压下目录 tar -zvxf re…

Java数据结构栈

栈&#xff08;Stack&#xff09; 概念 栈是一种先进后出的数据结构。 栈的使用 import java.util.Stack; public class Test {public static void main(String[] args) {Stack<Integer> s new Stack();s.push(1);s.push(2);s.push(3);s.push(4);System.out.println(s…

3. python练习题3-自由落体

3. python练习题3-自由落体 【目录】 文章目录 3. python练习题3-自由落体1. 目标任务2. 解题思路3. 知识回顾-%占位符格式化处理3.1 概述3.2 占位符的多种用法3.3 格式化操作符辅助指令3.4 将整数和浮点数格式化为字符串 4. 解题思路4.1 球第1次下落4.2 球第2次下落 5. 最终代…

day60 动态规划part17

这两题看了自己写的笔记还不懂的话&#xff0c;看看这个up的思路就行&#xff1a; https://space.bilibili.com/111062940/search/video?keyword%E5%9B%9E%E6%96%87 647. 回文子串 中等 提示 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回…

学习【RabbitMQ入门】这一篇就够了

目录 1. RabbitMQ入门1-1. 同步调用1-2. 异步调用1-3. MQ技术选型1-4. RabbitMQ介绍消息模式 1-5. SpringAMQPBasic QueueWork QueueFanout ExchangeDirect ExchangeTopic Exchange消息转换器 1. RabbitMQ入门 1-1. 同步调用 优势&#xff1a; 时效性强&#xff0c;等待到结…

Windows 2008虚拟机安装、安装VM Tools、快照和链接克隆、添加硬盘修改格式为GPT

一、安装vmware workstation软件 VMware workstation的安装介质&#xff0c;获取路径&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1AUAw_--yjZAUPbsR7StOJQ 提取码&#xff1a;umz1 所在目录&#xff1a;\vmware\VMware workstation 15.1.0 1.找到百度网盘中vmwa…

Mysql的基本命令

1 服务相关命令 命令描述systemctl status mysql查看MySQL服务的状态systemctl stop mysql停止MySQL服务systemctl start mysql启动MySQL服务systemctl restart mysql重启MySQL服务ps -ef | grep mysql查看mysql的进程mysql -uroot -hlocalhost -p123456登录MySQLhelp显示MySQ…

8.list容器的使用

文章目录 list容器1.构造函数代码工程运行结果 2.赋值和交换代码工程运行结果 3.大小操作代码工程运行结果 4.插入和删除代码工程运行结果 5.数据存取工程代码运行结果 6.反转和排序代码工程运行结果 list容器 1.构造函数 /*1.默认构造-无参构造*/ /*2.通过区间的方式进行构造…