盤點2024年最令人驚嘆的5項JavaScript新功能

admin

2024年12月27日 21:46 本文熱度 284

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...');
};