現代 JavaScript 功能：ES3 中的新增功能-js教程-PHP中文網

Modern JavaScript Features: What’s New in ES3

JavaScript 正在不斷發展，每年都會帶來一組新功能，旨在讓開發人員的生活更輕鬆。最新的更新 ES2023 包含了一些新工具，可以增強我們編寫、讀取和維護程式碼的方式。讓我們深入了解您希望在專案中開始使用的一些出色功能。

1. 數組 findLast 和 findLastIndex

您是否曾經需要從陣列結尾開始尋找某個項目？ ES2023 引入了 findLast 和 findLastIndex，它們就是這樣做的。

findLast：此方法尋找數組中滿足指定條件的最後一個元素。

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

登入後複製

findLastIndex：此方法傳回最後一個元素的索引。

  const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 3

登入後複製

這些方法非常適合您需要反轉搜尋邏輯的情況，使您的程式碼更清晰並且可能更有效率。

2. JavaScript 檔案中的 Hashbangs (#!)

如果您正在用 JavaScript 編寫命令列工具，您將會欣賞對 hashbangs 的新支援。透過新增#!在檔案頂部，您可以直接指定解釋器，使您的腳本無需外部命令即可執行。

#!/usr/bin/env node

console.log("Hello, world!");

登入後複製

這是一個小但方便的功能，特別是對於那些在 Node.js 中建立 CLI 工具的人來說。

3. 符號作為 WeakMap 鍵

以前，只有物件可以用作 WeakMap 中的鍵，但 ES2023 透過允許符號也改變了這一點。

const wm = new WeakMap();
const sym = Symbol('key');
wm.set(sym, 'value');

console.log(wm.get(sym)); // 'value'

// Storing hidden game data that players can't easily access, such as secret unlock codes:
const secretCode = Symbol('vc-cheat-code');
const gameData = new WeakMap();
gameData.set(secretCode, 'PANZER-ASPIRINE-BIGBANG-PRECIOUSPROTECTION');

登入後複製

此增強功能使 WeakMap 更加通用，特別是當您需要符號提供的獨特、無碰撞鍵時。

4. 陣列依方法分組

使用新的分組方法將陣列元素分組變得更加容易。

group：此方法將陣列組織成一個對象，其中鍵由您提供的函數決定，值作為與每個鍵匹配的元素數組。

  const animals = [
    { type: 'mammal', name: 'dog' },
    { type: 'bird', name: 'sparrow' },
    { type: 'mammal', name: 'cat' },
  ];

  const grouped = animals.group(({ type }) => type);
  console.log(grouped);
  // {
  //   mammal: [{ type: 'mammal', name: 'dog' }, { type: 'mammal', name: 'cat' }],
  //   bird: [{ type: 'bird', name: 'sparrow' }]
  // }

登入後複製

此功能非常適合需要快速且有效率地對資料進行分類的場景。

5. Array.prototype.toSorted 和 Array.prototype.toReversed()

使用 toSorted 對陣列進行排序變得更加清晰。與改變原始數組的 sort 不同，toSorted 傳回一個新的排序數組，而 toReversed 傳回一個新的反轉數組，保持原始數組不變。

const arr = [3, 1, 4, 1, 5];
const sortedArr = arr.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]

let data = [/* important data that shouldn't be modified */];
let reversedData = data.toReversed(); // Safely reverse

登入後複製

當您需要在使用排序版本時保留原始陣列時，此方法非常適合。

6. Array.prototype.with

with 方法提供了一種透過取代特定索引處的元素來建立新陣列的簡單方法。

const numbers = [10, 20, 30, 40];
const newNumbers = numbers.with(2, 25); // [10, 20, 25, 40]

登入後複製

當您想要不可變地更新陣列時，此方法非常完美，從而可以更輕鬆地在函數式程式設計模式中管理狀態。

7. Promise.withResolvers

借助 Promise.withResolvers，管理 Promise 從未如此簡單。這種新方法可以讓您一次建立一個 Promise 及其解析和拒絕函數。

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

setTimeout(() => resolve("done"), 1000);

promise.then(console.log); // "done"

登入後複製

這是一種處理非同步操作的簡潔方式，特別是當您需要從其建構函式外部控制 Promise 的結果時。

ES2023 的瀏覽器支持

ES2023 是 JavaScript 的最新版本，自從 2023 年剛完成以來，它是相當新的。這意味著並非所有網頁瀏覽器都可以使用其新功能，但它們已經開始：

Firefox、Chrome 和 Edge 確實支援某些功能 Array.prototype.findLast() 和 Array.prototype.findLastIndex()
Safari 尚不支援任何這些功能。
Node.js
- Node.js 19.0 及更高版本可以使用：
  - Array.prototype.findLast()
  - Array.prototype.findLastIndex() 預計在未來的更新中添加更多 ES2023 功能。

轉譯器：
現在要使用新的 ES2023 功能，開發人員可以使用 Babel 等稱為轉譯器的工具將 ES2023 程式碼轉換為更多瀏覽器可以理解的舊版本。這樣，即使瀏覽器尚未準備好，您也可以開始使用新內容。

目前，對 ES2023 的支援仍在不斷增長。 Firefox 和 Chrome 等大型瀏覽器開始包含它的一些功能。有關支援內容和位置的詳細信息，您可以查看我可以使用嗎。使用轉譯器有助於使這些新功能在今天可用，同時我們等待瀏覽器在未來幾年迎頭趕上。