ES2021新特性解析:数字分隔符、逻辑或赋值与字符串替换
需积分: 5 117 浏览量
更新于2024-08-03
收藏 3KB MD 举报
"这篇文章除了介绍ECMAScript 2021(ES12)的四个主要特性,还提供了这些特性的实际代码示例,以帮助理解它们的用法。"
### 1. 数字分隔符(NumberSeparators)
在ES2021中,数字字面量引入了下划线`_`作为数字分隔符,目的是提高大数字的可读性。使用下划线不会改变数字的值,只是视觉上的辅助。例如:
```js
const A = 1_000_000_000; // 1,000,000,000 (十亿)
const B = 0b1010_0001_0010; // 2578 (二进制表示)
const C = 0xA0_B0_C0; // 10531008 (十六进制表示)
```
### 2. 逻辑或赋值运算符(Logical OR Assignment Operator `||=`)
逻辑或赋值运算符`||=`简化了在变量为 falsy 值时设置默认值的过程。如果左侧的变量已经有一个 truthy 值,那么就不会执行右侧的表达式。例如:
```js
let x = 1;
x ||= 2; // x 保持不变,因为 x 已经是 truthy(1)
console.log(x); // 输出 1
let y = 0;
y ||= 3; // y 被赋值为 3,因为 y 是 falsy(0)
console.log(y); // 输出 3
```
在函数中,这个运算符可以用来提供默认参数,如:
```js
function greet(name) {
name ||= 'XXX';
console.log(`Hello, ${name}!`);
}
greet('ABC'); // 输出 "Hello, ABC!"
greet(); // 输出 "Hello, XXX!",因为没有传递 name 参数
```
### 3. `String.prototype.replaceAll()`
在ES2021之前,`String.replace()`只能替换第一个匹配的子字符串。现在,`replaceAll()`方法可以替换所有匹配的子字符串。例如:
```js
const originalString = "ABAD";
const newString = originalString.replaceAll("A", "E");
console.log(newString); // 输出 "EBED"
```
### 4. `Promise.any()`
`Promise.any()`方法处理一个 Promise 阵列,当其中任意一个 Promise 解决(resolve)时,它会返回解决的值。这对于并发执行多个异步操作并等待任一操作完成特别有用。例如:
```js
Promise.any([
fetch('url1').then(res => res.json()),
fetch('url2').then(res => res.json()),
]).then(result => {
console.log('成功获取数据:', result);
}).catch(error => {
console.error('所有请求都失败:', error);
});
```
在这个例子中,如果`url1`或`url2`的请求成功,`Promise.any()`将返回成功的响应,而如果所有请求都失败,它会抛出一个错误。
### 5. `Array.prototype.at()`
`Array.prototype.at()`方法允许通过一个负数索引从数组末尾开始访问元素,这使得从末尾获取元素更加方便。例如:
```js
const array = ['a', 'b', 'c', 'd'];
console.log(array.at(-1)); // 输出 'd'
console.log(array.at(-2)); // 输出 'c'
```
以上就是ECMAScript 2021(ES12)的几个重要特性,这些新功能增强了JavaScript的表达能力和代码的可读性,使得开发更加高效。
2021-05-30 上传
2021-05-02 上传
2021-06-21 上传
狐说狐有理
- 粉丝: 2323
- 资源: 38
最新资源
- ES管理利器:ES Head工具详解
- Layui前端UI框架压缩包:轻量级的Web界面构建利器
- WPF 字体布局问题解决方法与应用案例
- 响应式网页布局教程:CSS实现全平台适配
- Windows平台Elasticsearch 8.10.2版发布
- ICEY开源小程序:定时显示极限值提醒
- MATLAB条形图绘制指南:从入门到进阶技巧全解析
- WPF实现任务管理器进程分组逻辑教程解析
- C#编程实现显卡硬件信息的获取方法
- 前端世界核心-HTML+CSS+JS团队服务网页模板开发
- 精选SQL面试题大汇总
- Nacos Server 1.2.1在Linux系统的安装包介绍
- 易语言MySQL支持库3.0#0版全新升级与使用指南
- 快乐足球响应式网页模板:前端开发全技能秘籍
- OpenEuler4.19内核发布:国产操作系统的里程碑
- Boyue Zheng的LeetCode Python解答集