文章目录
- 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>