当前位置： 首页 > article >正文

【前端】ES12：ES12新特性

article 2024/11/20 0:31:43

文章目录

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

1 逻辑赋值操作符

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

let a = true
let b = false
//a &&= b //false
a ||= b ; //true
console.log(a)

let obj = {
    name:"kerwin",           
}

obj.introduction = obj.introduction ?? "很懒"
obj.introduction ??= "很懒"

2 数字分隔符

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

const num = 123456789

分隔符不仅可以分割十进制，也可以分割二净值或者十六净值的数据，非常好用。

const number = 1_000_000_000_000;
const binary = 0b1010_0101_1111_1101;
const hex = 0xA1_B2_C3;

3 replaceAll

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

const 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. ";
const newStr = str.replaceAll("wish", "kerwin");
console.log(newStr);

4 Promise.any

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

Promise.any()跟Promise.race()方法很像，只有一点不同，就是Promise.any()不会因为某个Promise变成rejected状态而结束，必须等到所有参数Promise变成rejected状态才会结束。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       // Promise.all 都成功了就走.then，只要有一个失败了就走.catch
       // Promise.race 部署两个接口，超时处理
       // Promise.allSettled 成功失败都走.then，能显示就显示，不能显示就过滤掉，页面也能成功展示出数据
     
       // Promise.any // some
       //登录-会员联盟系统（沃尔玛，华润万家，盒马）如果三家都没有账号就走catch注册
       let ajax1 = function(){
           return new Promise((resolve,reject)=>{
                //resolve("沃尔玛")
                reject("沃尔玛")
           })
       }
       let ajax2 = function(){
           return new Promise((resolve,reject)=>{
                reject("华润万家")
           })
       }
       let ajax3 = function(){
           return new Promise((resolve,reject)=>{
                reject("盒马")
           })
       }

       Promise.any([ajax1(), ajax2(), ajax3()]).then(res=>{
           console.log(res)
       }).catch(err=>{
           console.log("err", err) // All promises were rejected
       })
    </script>
</body>
</html>

5 WeakRef

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
      //ES6 Set Map

      //ES6 WeakSet WeakMap ES12 WeakRef 
      //weak系列：帮助垃圾回收机制回收这些不可访问的对象

      let obj = {
        name:"kerwin"
      }

      let obj1 = obj // 判断引用计数是否大于0，如果等于0就回收
      obj = null // 垃圾回收机制常用算法：引用计数法、标记清除法     
    
      let s1= new Set()
      s1.add(obj) // 插入到s1中也引用计数 + 1，没有办法回收
      s1.add("aaaaa")
      obj = null // obj依然存在

      //   for(let i of s1){
      //       console.log(i)
      //   }

      /*
        weakset:

        1. 只能复杂类型(对象、数组、函数)，不能是基本类型
        2. 不存在引用计数+1
        3. size, for不能用了，里面的内容是不确定能访问到的
      */
      let s2= new WeakSet()
      s2.add(obj) // 不会引用计数，不会 + 1
      //   s2.add("aaaaa")
      obj = null // obj删除了

      //   for(let i of s1){ // 不可迭代，weakset的内容是不确定的
      //       console.log(i)
      //   }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="like">like</button>
    <script>
        //WeakMap()

        // 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依然存在
        //     //like = null // like不存在了
        //     console.log(like)
        // }, 2000)


        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")) // 引用依赖dom页面上的节点
        },2000)
    </script>
</body>
</html>

在一般情况下，对象的引用是强引用的，这意味着只要持有对象的引用，它就不会被垃圾回收。只有当该对象没有任何的强引用时，垃圾回收才会销毁该对象并且回收该对象所占的内存空间。

而 WeakRef 允许您保留对另一个对象的弱引用，而不会阻止被弱引用对象被垃圾回收。

let target = {};
let wr = new WeakRef(target);

WeakRef实例对象有一个deref()方法，如果原始对象存在，该方法返回原始对象；如果原始对象已经被垃圾回收机制清除，该方法返回undefined。

let obj = {
			name:"kerwin"
		  }

let wobj = new WeakRef(obj) // 弱引用
//wobj.deref() 拿到原始对象

obj = null // 弱引用不会阻止垃圾回收机制回收，销毁obj，wobj访问不到了
//wobj.deref() undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="like">like</button>
    <script>
        //WeakMap()
        let wmap = new WeakMap()
        let like = new WeakRef(document.getElementById("like")) // 弱引用，节点删掉了，访问不到了

        wmap.set(like.deref(), {click: 0})

        like.deref().onclick = function(){
            let times = wmap.get(like.deref())
            times.click++
        }

        setTimeout(()=>{
            document.body.removeChild(like.deref())         
        },2000)      
    </script>
</body>
</html>

6 FinalizationRegistry

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let obj = {
            name:"kerwin"
        }

		// 新建一个注册表实例
        let registry = new FinalizationRegistry(data=>{ // "临终遗言"
            console.log("销毁了", data)
        })

        registry.register(obj, "11111111111111") // 只要obj指向的对象被销毁(obj = null)，"11111111111111"传给回调函数调用
        //registry.unregister(obj) // 取消注册
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="like">like</button>
    <script>
        //WeakMap()
        let registry = new FinalizationRegistry(data=>{
            console.log("销毁了", data)
        })

        let wmap = new WeakMap()
        let like = new WeakRef(document.getElementById("like"))

        wmap.set(like.deref(), {click:0})

        like.deref().onclick = function(){
            let times = wmap.get(like.deref())
            times.click++
        }

        setTimeout(()=>{
            // 删除节点后，执行回调函数
            registry.register(like.deref(), wmap.get(like.deref()).click)
            document.body.removeChild(like.deref())
        },3000)
    </script>
</body>
</html>

http://www.kler.cn/a/325828.html

相关文章：

  • React Native 全栈开发实战班 ：数据管理与状态之React Hooks 基础
  • Qt 的 QThread：多线程编程的基础
  • SpringBoot Data Redis连接Redis-Cluster集群
  • Java项目实战II基于Java+Spring Boot+MySQL的共享汽车管理系统(源码+数据库+文档)
  • 微知-DOCA ARGP参数模块的相关接口和用法（config单元、params单元，argp pipe line，回调）
  • LeetCode 445.两数相加 II
  • 【Python报错已解决】TypeError: ‘list‘ object is not callable
  • 探索AI新纪元：揭秘Mammoth库的神秘面纱
  • plt.bar函数介绍及实战
  • linux服务器部署filebeat
  • 【30天玩转python】自动化与脚本编写
  • 各种 JIT（Just-In-Time） 编译器
  • Python | Leetcode Python题解之第446题等差数列划分II-子序列
  • 鸿蒙harmonyos next flutter通信之MethodChannel获取设备信息
  • 【Python】Curdling：Python 包管理的高效工具
  • 基于STM32与OpenCV的物料搬运机械臂设计流程
  • 卷积神经网络 循环神经网络
  • 定时任务上云改造方案
  • 【MySQL】常见的SQL优化方式（二）
  • 设计模式 命令模式（Command Pattern）
  • MySQL 索引最左匹配原则详解
  • Element-plus安装及其基础组件使用
  • Python轴承故障诊断 (四)基于EMD-CNN的故障分类
  • 用Python集成免费IP归属地查询API
  • 语言的重定向
  • python select interpreter vscode 配置