【前端】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>
相关推荐
你挚爱的强哥2 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森37 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy37 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891140 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js