盤點(diǎn)2024年最令人驚嘆的5項JavaScript新功能

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

admin

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

2024年JavaScript新特性做了哪些升級？讓我們來回顧一下ES15帶來的全新的特性和有前景的提案。（ "ES15" 是指 ECMAScript 2024。ECMAScript 是 JavaScript 的標(biāo)準(zhǔn)，由 ECMA International 的技術(shù)委員會 TC39 負(fù)責(zé)制定。）

讓我們一起來盤點(diǎn)一下那些令人驚嘆的5項JavaScript新功能。

數(shù)組原生的group-by方法

Object.groupBy()：

有了它，也就不在需要Lodash了，現(xiàn)在看Lodash基本大部分功能都有了原生的支持。

我本以為還會有一個類似 Array.prototype.groupBy 的新實(shí)例方法，但不知出于什么原因，它并沒有增加到數(shù)組上。

反倒是在Map上增加了一個靜態(tài)方法， Map.groupBy 對對象鍵進(jìn)行分組：

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

Promise.withResolvers

有了Promise.withResolvers()，創(chuàng)建Promise更簡單了，而在此之前，我們不得不通過閉包來實(shí)現(xiàn)：

或者從 NPM 安裝 - 多一個依賴項！

但現(xiàn)在有了 ES15 中的 Promise.withResolvers()：

Promise.withResolvers使得做開關(guān)延遲特別方便，例如在資源加載完畢后resolve。這允許我們在Promise外部控制加載過程，實(shí)現(xiàn)更有效的延遲加載策略，優(yōu)化頁面加載時間和性能。

Buffer性能升級

Buffer是用于存儲應(yīng)用程序生成的臨時數(shù)據(jù)的微型數(shù)據(jù)存儲區(qū)。它們使在pipeline的各個階段傳輸和處理數(shù)據(jù)變得異常簡單。

像以下的Pipelines:

文件處理: Input file → buffer → process → new buffer → output file
視頻流: Network response → buffer → display video frame
生產(chǎn)消費(fèi)隊列: Receive customer → queue/buffer → serve customer

有了緩沖器，每個階段處理數(shù)據(jù)的速度各不相同，互不影響。

但是，如果流水線上的數(shù)據(jù)超過了緩沖區(qū)的容量，會發(fā)生什么情況呢？

在此之前，我們必須將當(dāng)前數(shù)據(jù)的緩沖區(qū)全部復(fù)制到一個更大的緩沖區(qū)中。

這對性能的影響非常大，尤其是當(dāng)管道中會有大量數(shù)據(jù)時。

ES15 為我們提供了解決這一問題的方法：可調(diào)整的數(shù)組緩沖區(qū)。

異步升級

Atomics.waitAsync()：ES2024 中另一個強(qiáng)大的異步編碼功能：

在JavaScript中，Atomics對象提供了一組靜態(tài)方法，用于在多線程環(huán)境中以原子方式執(zhí)行操作，比如共享內(nèi)存的操作。Atomics.waitAsync()方法允許開發(fā)者在異步環(huán)境中等待某個條件變量達(dá)到特定值，這在并發(fā)編程中非常有用，因為它可以避免阻塞主線程，同時等待某個事件的發(fā)生。

例如：當(dāng)兩個代理共享一個緩沖區(qū)時

而代理 1 則 Sleep"，等待代理 2 完成任務(wù)。

當(dāng)代理 2 完成后，它會使用共享緩沖區(qū)作為通道發(fā)出通知。

如果你認(rèn)為這與普通的 async/await 類似，那你就完全正確了。

但最大的區(qū)別在于這兩個代理可以存在于完全不同的代碼上下文中，它們只需要訪問同一個緩沖區(qū)。

而且：多個代理可以在不同時間訪問或等待共享緩沖區(qū)，其中任何一個代理都可以通知 "喚醒 "所有其他代理。

這怎么理解？假設(shè)我們有兩個Web Workers，一個主線程和多個工作線程。工作線程將等待主線程更新一個共享的內(nèi)存位置。

主線程代碼：

// 創(chuàng)建一個共享的ArrayBuffer
const sharedBuffer = new SharedArrayBuffer(4);
const sharedUint32 = new Uint32Array(sharedBuffer);

// 初始值設(shè)置為0
sharedUint32[0] = 0;

// 創(chuàng)建一個Worker
const worker = new Worker('worker.js');

// 向Worker發(fā)送共享內(nèi)存的引用
worker.postMessage({ sharedBuffer });

// 稍后更新共享內(nèi)存的值
setTimeout(() => {
  sharedUint32[0] = 1; // 這個值的改變將觸發(fā)等待中的Atomics.waitAsync()
}, 1000);

工作線程代碼（worker.js）：

// 監(jiān)聽主線程發(fā)送的消息
onmessage = async ({ data }) => {
  const { sharedBuffer } = data;
  const sharedUint32 = new Uint32Array(sharedBuffer);

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

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