该来的还是来了,盘点 ES12 中有新特性!
作者:KUMAR HARSH
译者:前端小智
来源:blog
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
今天主要介绍一下 ECMAScript 2021(ES12)的一部分的 JS 功能。
- 逻辑赋值操作符
- 数字分隔符(1_000)
- Promise.any 与 AggregateError
- String.prototype.replaceAll
- WeakRefs 与 FinalizationRegistry 对象
逻辑赋值操作符
逻辑赋值操作符将逻辑操作(&&
、||
或??
)与赋值表达式组合在一起。
x ||= y;
x || (x = y);x &&= y;
x && (x = y);x ??= y;
x ?? (x = y);
带有&&
的逻辑赋值操作符
let x = 1;
let y = 2;
x &&= y;
console.log(x); // 2
x &&= y
等价于 x && (x = y)
。
或者等价于
if(x) {x = y
}
因为x
是一个真值,所以它被赋值为y
,即2
。
带有||
的逻辑赋值操作符
let x = 1;
let y = 2;
x ||= y;
console.log(x); // 1
x ||= y
等价于 x || (x = y)
。
这意味着赋值操作只在x
为虚值时才会发生。在我们的代码中,x
包含1
,这是一个真值,因此,赋值不会发生。这就是我们的代码在控制台中打印1
的原因。
简单地说
const updateID = user => {// 我们可以这样做if (!user.id) user.id = 1// 或者这样user.id = user.id || 1// 或者这样user.id ||= 1
}
带有??
的逻辑赋值操作符
??
在 JS 中专门检查一个值是否为 null
或undefined
。
let a;
let b = a ?? 5;
console.log(b); // 5
在第二行,let b = a ?? 5
,如果a
的值为null
或undefined
,??
求值并赋值给b
。
现在考虑??
和==
。
let x;
let y = 2;
x ??= y;
console.log(x); // 2
x ??= y
等价于 x = x ?? (x=y)
数字分隔符
它允许我们在数字之间添加下划线(_
)字符,使数字更具可读性。
例如
const num = 100000000
被0的数量所迷惑
分隔符解决这个问题:
const num = 100_000_000
分隔符可以用于数字的整数部分和小数部分。
const num = 1_000_000.123_456
分隔符不仅可以用在整数和浮点数中,也可以用在二进制、十六进制、八进制字面量中。
分隔符也适用于BigInt数字。
const trillion = 1000_000_000_000n;
console.log(trillion.toString()); // "1000000000000"
分隔符只是为了可读性。所以,它可以放在数字内的任何地方。
const amount = 178_00; // 00 after _ for cents.
Promise.any 与 AggregateError
Promise.any()
返回第一个完成的promise的值。如果所有传递给Promise.any()
作为参数(作为数组)的Promise都被拒绝,则抛出一个"AggregateError
"异常。
AggregateError`是一个新的Error子类,它对单个错误进行分组。每个AggregateError实例都包含一个对异常数组的引用。
考虑下面例子:
下面我们有3个 promise,它们是随机的。
const p1 = new Promise((resolve, reject) => {setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));
});
在p1
, p2
和p3
中,最先的完成的的由Promise.any()
执行。
(async function() {const result = await Promise.any([p1, p2, p3]);console.log(result); // 打印 "A", "B" 或者 "C"
})();
如果所有的 promise 都失败了?在这种情况下,Promise.any()
抛出AggregateError
异常。
我们需要捕获它:
const p = new Promise((resolve, reject) => reject());try {(async function() {const result = await Promise.any([p]);console.log(result);})();
} catch(error) {console.log(error.errors);
为了演示的目的,在Promise.any()
中我们只能它一个 promise
。而这个 promise 是失败的。上述代码在控制台中记录了以下错误。
String.prototype.replaceAll 方法
String.prototype.replaceAll()
允许我们用一个不同的值替换字符串中的所有子串实例,而不需要使用全局正则表达式。
目前,JavaScript字符串有一个replace()
方法。它可以用来用另一个字符串替换一个字符串。
const str = "Backbencher sits at the Back";
const newStr = str.replace("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Back"
如果输入模式是一个字符串,replace()
方法只替换第一次出现的内容。这就是为什么在代码中,"Back
"的第二次出现没有被替换。
只有将模式作为正则表达式提供时,才能进行完全替换。
const str = "Backbencher sits at the Back";
const newStr = str.replace(/Back/g, "Front");
console.log(newStr); // "Frontbencher sits at the Front"
我们来看另一个例子
const strWithPlus = '++'
const strWithComma = strWithPlus.replace(/+/g, ', ')
// , ,
这种方法需要使用正则表达式。然而,复杂的正则表达式往往是错误的来源。(没有人喜欢RegEx
该来的还是来了,盘点 ES12 中有新特性!相关推荐
- ES6、ES7、ES8、ES9、ES10、ES11、ES12、ES13新特性大全
本文是对 ES6 至 ES13 常用到的特性的总结,关于每个特性的详细内容,都有单独的文章进行详细讲述,可以跳转到具体文章进行学习查看.学习永无止境大家一起努力 . 文章为从新到旧的顺序. ECMAS ...
- 盘点VS2015 预览版的5个新特性
盘点VS2015 预览版的5个新特性 发表于10小时前| 3393次阅读| 来源码农网| 17 条评论| 作者小峰 Visual StudioIDE微软 width="22" ...
- ECMAScript 2021(ES12)新特性简介
简介 ES12是ECMA协会在2021年6月发行的一个版本,因为是ECMAScript的第十二个版本,所以也称为ES12. ES12发行到现在已经有一个月了,那么ES12有些什么新特性和不一样的地方呢 ...
- [转]ES7、ES8、ES9、ES10新特性大盘点
ES7.ES8.ES9.ES10新特性大盘点 本文转自:https://mp.weixin.qq.com/s/8bov6788ivV0sHzmwrn5lw 以下文章来源于前端工匠 ,作者浪里行舟君 前 ...
- 【 javascript】JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
JS语法 ES6.ES7.ES8.ES9.ES10.ES11.ES12新特性 前言 ES6(2015) 1. 类(class) 2. 模块化(ES Module) 3. 箭头函数 4. 函数参数默认值 ...
- 常用ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性归纳
ES6.ES7.ES8.ES9.ES10.ES11.ES12新特性 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript ...
- JavaScript语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性汇总
本文汇总了 ES6 至 ES11 使用十分常用的特性,包括正在规划的 ES12,仅涵盖了全部的 ES 特性.详细介绍将使用到 ES6 至 ES11 最新版的可用特性. 新特性ES6(2015) 1.类 ...
- JavaScript ES12新特性抢先体验
在上一篇文章中,我们介绍了ES2020的相关九大特性,里面不少实用的新特性让我们受益良多. 而每年,JavaScript都会更新添加新的特性新标准,在今年ES2020发布了,而ES2020(ES12) ...
- 盘点 Oracle 11g 中新特性带来的10大性能影响
盘点 Oracle 11g 中新特性带来的10大性能影响 原创 2017-08-02 盖国强 数据和云 Oracle的任何一个新版本,总是会带来大量引人瞩目的新特性,但是往往在这些新特性引入之初,首先 ...
最新文章
- 一些前端面试题(一)
- 计算机机房建设目标是什么,计算机机房建设方案计划.doc
- linux那些事之 page table基本操作
- 【纪中集训】2019.08.10【省选组】模拟TJ
- 微软推出面向 Kubernetes 的 OSM 项目,计划捐赠给 CNCF 基金会
- ScintillaNET的应用
- java并发常量_Java并发编程-常量对象(七)
- java不规则数组杨辉,JAVASE课程 第一章 第三讲程序控制与数组
- 如何提升自己的设计能力
- [linux] unzip
- echarts 添加百分号%
- 病态!------沉沦的病态
- 阿里云mysql主从有延迟怎么办_MySQL主从数据库同步延迟问题解决-阿里云开发者社区...
- KC32C 7.1声道DTS/杜比数码AC3/TRUE HD音频解码板
- c语言图书管理系统解析,基于C语言的图书管理系统的设计与实现解析.doc
- js 所有空格替换成任意字符
- Unity 之 ShaderGraph UV节点解析汇总
- java 查询社保接口_服务中心-开放平台
- 计算机硬盘正在工作时,让硬盘永远工作在最佳状态
- Counting Intersections HDU - 5862