2024 年的 JavaScript 的最新標準，尤其是在分組和非同步處理方面多了新的方法，其中分組跟後端的 laravel 集合頗為相似。

參考書籍：Exploring JavaScript (ES2024 Edition)

Map.groupBy()

MDN： Map.groupBy()

功能
Map.groupBy() 方法用於將陣列中的元素根據指定的條件進行分組，然後傳回一個 Map 對象，其中 key 是分組的條件值，value 是滿足該條件的元素數組。

語法

Map.groupBy(items, callbackFn)

比較
和 Array.reduce 方法相比，groupBy() 提供了更直覺的分組功能，不需要手動管理累加器和分組條件。

const data = [1, 2, 3, 4, 5, 6];

const grouped = data.reduce((accumulator, item) => {
    const key = item % 2 === 0 ? 'even' : 'odd';
    if (!accumulator[key]) {
        accumulator[key] = [];
    }
    accumulator[key].push(item);

    return accumulator;
}, {});

console.log(grouped);

範例

const data = [1, 2, 3, 4, 5, 6];
const grouped = Map.groupBy(data, n => n % 2 === 0 ? 'even' : 'odd');
console.log(grouped);

題外話
在後端的 Laravel collection 也有一個 groupby() 的好用方法，原理大同小異，以下是前後端的用法。

後端分組方法 groupBy()：後端小白自學 Laravel - 第 8 天：集合 - 高級操作

• 需求：以下有一個變數請依照性別分類。

• 後端 Laravel：

  use Illuminate\Support\Collection;
  
  $users = collect([
      ['name' => 'Alice', 'gender' => 'female'],
      ['name' => 'Bob', 'gender' => 'male'],
      ['name' => 'Charlie', 'gender' => 'male'],
      ['name' => 'Diana', 'gender' => 'female'],
  ]);
  
  $grouped = $users->groupBy('gender');
  
  dd($grouped->toArray());
  

  

• 前端 Javascript：

  const users = [
      { name: 'Alice', gender: 'female' },
      { name: 'Bob', gender: 'male' },
      { name: 'Charlie', gender: 'male' },
      { name: 'Diana', gender: 'female' }
  ];
  
  const grouped = Map.groupBy(users, user => user.gender);
  
  console.log(grouped);
  

  

Promise.withResolvers()

MDN：Promise.withResolvers()

功能
Promise.withResolvers() 是一種用於建立一個具有明確 resolve 和 reject 方法的 Promise 的新方式。這個方法簡化了非同步操作中對 Promise 的建立和管理。

語法

Promise.withResolvers()

對比
與傳統的 Promise 創建方式相比，這種方法使得手動建立和管理 Promise 更加簡便。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Resolved after 2 seconds');
    }, 2000);
});

promise
    .then(console.log)
    .catch(console.error);

範例

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => {
    resolve('Resolved after 2 seconds');
}, 2000);

promise
    .then(console.log)
    .catch(console.error);

Atomics.waitAsync()

MDN：Atomics.waitAsync()

功能
Atomics.waitAsync() 方法用於在共享記憶體中等待某個條件變為 true，這是一個非同步版本的 Atomics.wait()，適用於需要在多執行緒環境中等待條件滿足的場景。

語法

Atomics.waitAsync(typedArray, index, value)
Atomics.waitAsync(typedArray, index, value, timeout)

範例

const sharedBuffer = new SharedArrayBuffer(1024);
const int32Array = new Int32Array(sharedBuffer);

Atomics.waitAsync(int32Array, 0, 0).then(({ value }) => {
  console.log('Value changed:', value);
});

setTimeout(() => {
  Atomics.store(int32Array, 0, 1);
  Atomics.notify(int32Array, 0);
}, 2000);