盘点2024年最令人惊叹的5项JavaScript新功能

admin

2024年12月27日 21:46 本文热度 106

2024年JavaScript新特性做了哪些升级？让我们来回顾一下ES15带来的全新的特性和有前景的提案。（ "ES15" 是指 ECMAScript 2024。ECMAScript 是 JavaScript 的标准，由 ECMA International 的技术委员会 TC39 负责制定。）

让我们一起来盘点一下那些令人惊叹的5项JavaScript新功能。

数组原生的group-by方法

Object.groupBy()：

有了它，也就不在需要Lodash了，现在看Lodash基本大部分功能都有了原生的支持。

我本以为还会有一个类似 Array.prototype.groupBy 的新实例方法，但不知出于什么原因，它并没有增加到数组上。

反倒是在Map上增加了一个静态方法， Map.groupBy 对对象键进行分组：

目前支持使用groupBy的，就是Object和Map了。

Promise.withResolvers

有了Promise.withResolvers()，创建Promise更简单了，而在此之前，我们不得不通过闭包来实现：

或者从 NPM 安装 - 多一个依赖项！

但现在有了 ES15 中的 Promise.withResolvers()：

Promise.withResolvers使得做开关延迟特别方便，例如在资源加载完毕后resolve。这允许我们在Promise外部控制加载过程，实现更有效的延迟加载策略，优化页面加载时间和性能。

Buffer性能升级

Buffer是用于存储应用程序生成的临时数据的微型数据存储区。它们使在pipeline的各个阶段传输和处理数据变得异常简单。

像以下的Pipelines:

文件处理: Input file → buffer → process → new buffer → output file
视频流: Network response → buffer → display video frame
生产消费队列: Receive customer → queue/buffer → serve customer

有了缓冲器，每个阶段处理数据的速度各不相同，互不影响。

但是，如果流水线上的数据超过了缓冲区的容量，会发生什么情况呢？

在此之前，我们必须将当前数据的缓冲区全部复制到一个更大的缓冲区中。

这对性能的影响非常大，尤其是当管道中会有大量数据时。

ES15 为我们提供了解决这一问题的方法：可调整的数组缓冲区。

异步升级

Atomics.waitAsync()：ES2024 中另一个强大的异步编码功能：

在JavaScript中，Atomics对象提供了一组静态方法，用于在多线程环境中以原子方式执行操作，比如共享内存的操作。Atomics.waitAsync()方法允许开发者在异步环境中等待某个条件变量达到特定值，这在并发编程中非常有用，因为它可以避免阻塞主线程，同时等待某个事件的发生。

例如：当两个代理共享一个缓冲区时

而代理 1 则 Sleep"，等待代理 2 完成任务。

当代理 2 完成后，它会使用共享缓冲区作为通道发出通知。

如果你认为这与普通的 async/await 类似，那你就完全正确了。

但最大的区别在于这两个代理可以存在于完全不同的代码上下文中，它们只需要访问同一个缓冲区。

而且：多个代理可以在不同时间访问或等待共享缓冲区，其中任何一个代理都可以通知 "唤醒 "所有其他代理。

这怎么理解？假设我们有两个Web Workers，一个主线程和多个工作线程。工作线程将等待主线程更新一个共享的内存位置。

主线程代码：

// 创建一个共享的ArrayBuffer
const sharedBuffer = new SharedArrayBuffer(4);
const sharedUint32 = new Uint32Array(sharedBuffer);

// 初始值设置为0
sharedUint32[0] = 0;

// 创建一个Worker
const worker = new Worker('worker.js');

// 向Worker发送共享内存的引用
worker.postMessage({ sharedBuffer });

// 稍后更新共享内存的值
setTimeout(() => {
  sharedUint32[0] = 1; // 这个值的改变将触发等待中的Atomics.waitAsync()
}, 1000);

工作线程代码（worker.js）：

// 监听主线程发送的消息
onmessage = async ({ data }) => {
  const { sharedBuffer } = data;
  const sharedUint32 = new Uint32Array(sharedBuffer);

  // 等待sharedUint32[0]的值变为1
while (true) {
    const value = Atomics.waitAsync(sharedUint32, 0, 0);
    if (value === 1) {
      console.log('Value has changed to 1!');
      break;
    }
  }

  // 做一些工作...
  console.log('Processing data...');
};