【前端】ES12:ES12新特性

文章目录

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

1 逻辑赋值操作符

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

js 复制代码
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 数字分隔符

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

js 复制代码
const num = 123456789

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

javascript 复制代码
const number = 1_000_000_000_000;
const binary = 0b1010_0101_1111_1101;
const hex = 0xA1_B2_C3;

3 replaceAll

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

js 复制代码
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状态才会结束。

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>
    <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

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>
    <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>
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 允许您保留对另一个对象的弱引用,而不会阻止被弱引用对象被垃圾回收。

js 复制代码
let target = {};
let wr = new WeakRef(target);

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

javascript 复制代码
let obj = {
			name:"kerwin"
		  }

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

obj = null // 弱引用不会阻止垃圾回收机制回收,销毁obj,wobj访问不到了
//wobj.deref() undefined
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 = 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,用来指定目标对象被垃圾回收机制清除以后,所要执行的回调函数。

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>
    <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>
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>
相关推荐
栈老师不回家44 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos