从 ES2021 到 ES2023 的 13 个实用的 JavaScript 新功能

2023年 11月 24日 39.4k 0

以下是 ECMAScript 从 ES2021 到 ES2023 中引入的一些有用且令人兴奋的功能:

ES2021

  • String.prototype.replaceAll():使用该方法可以替换字符串中出现的所有子串。
  • 逻辑赋值运算符(&&=、||=、??=):这些运算符将逻辑运算符(AND、OR、nullish coalescing)与赋值相结合

ES2022(拟议)

  • Array.prototype.groupBy():该提案引入了一种新方法,允许根据提供的函数对数组元素进行分组。
  • String.prototype.sliceSet():该功能旨在增强现有的 slice() 方法,允许使用切片语法替换字符串中的子串。

ES2023(拟议)

  • Realms API:该提案引入了 "境界 "的概念,即隔离、独立的 JavaScript 代码执行环境。它可以提高安全性,并将应用程序的不同部分分离开来。
  • Temporal:这一新的内置库旨在为 JavaScript 中日期和时间的处理提供更好的方法,解决现有 Date 对象的一些问题。
  • Record 和 Tuple:这个提案引入了新的数据结构,分别类似于对象和数组,具有特定的固定键或元素类型。Record 拥有命名属性,而 Tuple 则具有固定长度和有序元素。
  • Promise.any():这个方法返回一个 promise,该promise以迭代器中第一个实现的承诺的值为满足条件。它与 Promise.all() 相反。
  • Promise.try():该提议引入了基于 Promise 的 try-catch 代码块,允许以一致的方式处理同步和异步错误。
  • WeakRefs:弱引用允许我们创建对对象的引用,而不阻止它们被垃圾收集。这在诸如缓存或管理内存密集型对象的场景中可能非常有用。
  • Object.observe():该提案建议添加一个新方法,提供一种观察对象变化的方式,类似于 Object.defineProperty() 允许观察特定属性变化的方式。
  • 管道操作符该提案引入了一个新的操作符(|>),可让我们以更易读、更简洁的方式组成函数,类似于其他编程语言中管道操作符的工作方式。
  • 错误原因:这个提案建议为 Error 对象添加一个 cause 属性,允许我们捕获错误的根本原因并提供更多上下文。

请注意,提到的 ES2022 和 ES2023 的特性目前还处于提案阶段,可能会经历变更,或者最终不会被纳入正式规范。查看官方 ECMAScript 文档或关注 TC39 委员会的讨论,以获取这些特性的最新更新,总是一个好主意。

下面是功能说明和代码示例:

ES2021

1、String.prototype.replaceAll():

const str = 'Hello, World!';
const replacedStr = str.replaceAll('o', '0');
console.log(replacedStr); // Hell0, W0rld!

2、逻辑赋值运算符(&&=、||=、??=):

let x = 5;
let y = 10;
x &&= y;
console.log(x); // 10

let a = false;
let b = true;
a ||= b;
console.log(a); // true

let c = null;
let d = 'default';
c ??= d;
console.log(c); // default

ES2022

3、Array.prototype.groupBy()

const numbers = [1, 2, 3, 4, 5, 6];
const grouped = numbers.groupBy((num) => num % 2 === 0 ? 'even' : 'odd');
console.log(grouped);
// Output: { odd: [1, 3, 5], even: [2, 4, 6] }

4、String.prototype.sliceSet()

let str = 'Hello, World!';
str.sliceSet(7, 12, 'Earth');
console.log(str); // Hello, Earth!

ES2023

5、Realms API

该功能没有附带具体的代码示例,因为它更像是对 JavaScript 运行环境的概念性补充。

6、Temporal

该功能引入了一个新的内置库。下面是一个简化示例:

const date = Temporal.now.date();
console.log(date.year); // 2023
console.log(date.month); // 6
console.log(date.day); // 2

7、Record and Tuple

const person: Record = { name: 'John', age: '30' };
console.log(person.name); // John

type Point = [number, number];
const coordinates: Point = [10, 5];
console.log(coordinates[0]); // 10

8、Promise.any()

const promises = [
  Promise.reject('Error 1'),
  Promise.resolve('Success 2'),
  Promise.reject('Error 3')
];

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

9、Promise.try()

const synchronousTask = () => {
  throw new Error('Oops!');
};

Promise.try(synchronousTask)
  .then(() => console.log('Success'))
  .catch((error) => console.log(error)); // Error: Oops!

10、WeakRefs

该功能比较复杂,涉及需要跟踪对象弱引用的情况。下面是一个简单的例子:

let obj = { data: 'example' };
const weakRef = new WeakRef(obj);
obj = null;

setTimeout(() => {
  const recoveredObj = weakRef.deref();
  console.log(recoveredObj); // { data: 'example' }
}, 1000);

11、Object.observe()

该提案目前处于第二阶段,还没有可用的代码示例。

12、管道操作符

该功能允许以更易读的方式连锁函数:

const add = (x, y) => x + y;
const multiplyBy2 = (num) => num * 2;
const subtract = (x, y) => x - y;

const result = 5 |> add(3) |> multiplyBy2 |> subtract(10);
console.log(result); // -1

13、错误原因

该提案建议在错误对象中添加 cause 属性,为错误提供更多上下文信息:

const error1 = new Error('Error 1');
const error2 = new Error('Error 2');
error1.cause = error2;

console.log(error1.cause.message); // Error 2

请记住,ES2022 和 ES2023 提出的特性可能会根据 TC39 委员会正在进行的讨论和最终审批而发生变化。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论