每天3分钟，重学ES6-ES12(八)ES11 ES12新增内容
每天3分钟，重学ES6-ES12(八)ES11 ES12新增内容
虎妞先生
发布于 2022-10-27 20:02:17
发布于 2022-10-27 20:02:17
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
前言
今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是ES11 ES12中新增的内容
ES11
BigInt 大整数类型
- 在早期的JavaScript中，我们不能正确的表示过大的数字:
- 大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。
- 那么ES11中，引入了新的数据类型BigInt，用于表示大的整数:
- BitInt的表示方法是在数值的后面加上n代码演示
// ES11之前 max_safe_integer
const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt) // 9007199254740991
console.log(maxInt + 1) // 9007199254740992
console.log(maxInt + 2)
// 9007199254740992表示错误
// ES11之后: BigInt
const bigInt = 900719925474099100n
console.log(bigInt + 10n)
// 900719925474099110n
const num = 100
console.log(bigInt + BigInt(num))
// 900719925474099200n
const smallNum = Number(bigInt)
console.log(smallNum)
// 900719925474099100
Nullish Coalescing Operator 空值合并操作符 ??
空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 [null] 或者 [undefined] 时，返回其右侧操作数，否则返回左侧操作数。
与[逻辑或操作符（||）]不同，逻辑或操作符会在左侧操作数为[假值]时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子。
代码演示
// ES11: 空值合并运算 ??
const foo = undefined
const bar1 = foo || "default value"
const bar2 = foo ?? "defualt value"
console.log(bar1,bar2)
//"default value","default value"
const foo1 = ''
const bar3 = foo1 || "default value"
const bar4 = foo1 ?? "defualt value"
console.log(bar1,bar2)
//"default value",""Optional Chaining 链式操作符
可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁:
代码演示
const info = {
friend: {
girlFriend: {
name: "hmm"
}
}
}
//ES11 之前的判断方案
console.log(info.friend.girlFriend.name)
if (info && info.friend && info.friend.girlFriend) {
console.log(info.friend.girlFriend.name)
}
// ES11提供了可选链(Optional Chainling)
console.log(info.friend?.girlFriend?.name)Global This全局对象
- 在之前我们希望获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的
- 比如在浏览器中可以通过this、window来获取;
- 比如在Node中我们需要通过global来获取;
- 那么在ES11中对获取全局对象进行了统一的规范:globalThis 代码演示
// 获取某一个环境下的全局对象(Global Object)
// 在浏览器下
// console.log(window)
// console.log(this)
// 在node下
// console.log(global)
// ES11
console.log(globalThis)for..in标准化
- 在ES11之前，虽然很多浏览器支持for...in来遍历对象类型，但是并没有被ECMA标准化。
- 在ES11中，对其进行了标准化，for...in是用于遍历对象的key的:
ES12
FinalizationRegistry
- FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。
- FinalizationRegistry 提供了这样的一种方法:当一个在注册表中注册的对象被回收时，请求在某个时间点上调 用一个清理回调。(清理回调有时被称为 finalizer );
- 你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值;
代码演示
// ES12: FinalizationRegistry类
const finalRegistry = new FinalizationRegistry((value) => {
console.log("注册在finalRegistry的对象, 某一个被销毁", value)
})
let obj = { name: "why" }
let info = { age: 18 }
finalRegistry.register(obj, "obj")
finalRegistry.register(info, "value")
obj = null
info = nullWeakRef
- 如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用:
- 如果我们希望是一个弱引用的话，可以使用WeakRef代码演示
// ES12: WeakRef类
// WeakRef.prototype.deref:
// > 如果原对象没有销毁, 那么可以获取到原对象
// > 如果原对象已经销毁, 那么获取到的是undefined
const finalRegistry = new FinalizationRegistry((value) => {
console.log("注册在finalRegistry的对象, 某一个被销毁", value)
})
let obj = { name: "why" }
let info = new WeakRef(obj)
finalRegistry.register(obj, "obj")
obj = null
setTimeout(() => {
console.log(info.deref()?.name)
console.log(info.deref() && info.deref().name)
}, 10000)
// 注册在finalRegistry的对象, 某一个被销毁 obj
// undefined
// undefined
logical assignment operators 逻辑赋值操作符
// 1.||= 逻辑或赋值运算
let message = "hello world"
// es5 写法
message = message || "default value"
// es12 简写
message ||= "default value"
console.log(message)
// 2.&&= 逻辑与赋值运算
let info = {
name: "why"
}
// 1.判断info
// 2.有值的情况下, 取出info.name
// es5写法
info = info && info.name
// es12写法
info &&= info.name
console.log(info)
// 3.??= 逻辑空赋值运算
let message = 0
message ??= "default value"
console.log(message)最后，这是我第一次参加更文活动，茫茫人海中，如果有幸遇到你，读到我这篇文章，那真是太好了。我深知还有很多不足，希望大家能多提建议，还是想舔着脸皮，向屏幕前的大帅比们，大漂亮们，恳请一个小小的点赞，这会是对我莫大鼓励。也祝愿点赞的大帅比们，大漂亮们升职加薪走向人生巅峰！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-06-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录