【前端】ES12：ES12新特性

子非鱼921

于 2024-09-27 22:36:52 发布

阅读量334

点赞数 7

分类专栏： ES6-ES13教程文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_45980065/article/details/142499177

版权

ES6-ES13教程专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

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>