ECMAScript日常总结--ES2021(ES12)

狐说狐有理

已于 2023-12-19 15:49:44 修改

阅读量550

点赞数 13

分类专栏： ECMAScript日常总结文章标签： ecmascript 前端开发语言

于 2023-12-18 09:19:50 首次发布

本文链接：https://blog.csdn.net/Robinwang1128/article/details/135054832

版权

ECMAScript日常总结专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍了ECMAScript2021（ES12）的新特性，包括数字字面量的分隔符、逻辑或赋值运算符、String.prototype.replaceAll()、Promise.any()以及Promise.prototype.finally()的用法和应用场景。

摘要由CSDN通过智能技术生成

ECMAScript日常总结–ES2021(ES12)

文章目录

ECMAScript日常总结--ES2021(ES12)

1. 数字分隔符

允许在数字字面量中使用下划线（_）进行分隔，提高数字的可读性。

const A = 1_000_000_000;
const B = 0b1010_0001_0010;
const C = 0xA0_B0_C0;


console.log(A) // 1000000000
console.log(B) //2578
console.log(C) //10531008

2. 逻辑或赋值(||=)

逻辑或赋值运算符 ||= 用于将一个变量赋值给另一个变量，但仅当左侧的变量为 falsy（假值）时才执行赋值操作。这有助于简化代码，特别是在需要检查并设置默认值的情况下。

// 语法：左侧变量 ||= 右侧表达式;
let x = 1;
x ||= 2;
console.log(x); // 输出 1，因为 x 不是 falsy

let y = 0;
y ||= 3;
console.log(y); // 输出 3，因为 y 是 falsy

逻辑或赋值运算符的使用场景之一是在设置默认值时：

function greet(name) {
  name ||= 'XXX';
  console.log(`Hello, ${name}!`);
}

greet('ABC'); // 输出 "Hello, ABC!"
greet();       // 输出 "Hello, XXX!"，因为没有传递 name 参数，所以使用默认值 'XXX'

如果 name 参数为 falsy，就会使用逻辑或赋值运算符将默认值 'Guest' 赋给 name。

逻辑或赋值运算符是一个短路运算符，即如果左侧的表达式是 truthy，右侧的表达式将不会被执行。这有助于避免不必要的计算。

3. String.prototype.replaceAll()

该方法允许通过替换所有匹配的子字符串来更新字符串。以前，String.replace()方法只替换第一个匹配项。

const originalString = "A B A D";
const newString = originalString.replaceAll("A", "E");
console.log(newString); // "E B E D"

4. Promise.any()

Promise.any()方法接收一个Promise数组，一旦数组中的任何一个Promise被解决（fulfilled），它就会返回该Promise的值。如果所有Promise都被拒绝（rejected），则返回一个聚合错误。

const promises = [
  fetch('https://api.example.com/data1'),
  fetch('https://api.example.com/data2'),
  fetch('https://api.example.com/data3')
];

Promise.any(promises)
  .then(result => console.log(result))
  .catch(error => console.log(error));

5. Promise.prototype.finally()

finally方法在Promise被解决（fulfilled）或拒绝（rejected）后执行指定的回调函数，无论Promise的状态如何。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .finally(() => console.log('请求完成，无论成功或失败'));