ES2023（ES14）有什麼新特性？

在之前的文章《ES6（ES2015）有什麼新特性？》中，我們介紹到了 ES6 的 9 個重要新特性，且自 ES6（ES2015）發布以來，每年都會有新的 ECMAScript 版本推出。雖然後續版本的變動幅度沒有 ES6 那麼大，但每個版本都會引入一些關鍵性的功能，進一步完善 JavaScript。

在本文中，我們將重點擺在 2023 年 6 月正式推出的最新 ECMAScript 版本 - ES2023 （也是第 14 個版本）中的一些重要新特性(ECMAScript® 2023 Language Specification)。此外，在面試中，對 JavaScript 新特性的掌握程度也常常是面試官關注的重點之一，推薦各位讀者們每年都可以了解一下新的 ECMAScript 版本。

ES2023 的新特性

1. 由後往前查找陣列的方法：findLast() 和 findLastIndex()

findLast() 和 findLastIndex() 這兩者是在 ES2023 新加入的陣列操作方法，這兩者有相近的方法，分別是 find() 和 findIndex。

我們可以從字面上理解，find() 和 findIndex 會是從陣列開頭開始找尋符合條件的元素，而 findLast() 和 findLastIndex() 這兩個新的陣列方法是從陣列的尾部開始查找元素：

• 如果找到了符合條件的元素，findLast() 方法會返回該元素的值; 如果沒有找到符合條件的元素，findLast() 方法會返回 undefined
• findLastIndex() 它會返回從尾部查找中符合條件的第一個元素的索引; 如果沒有找到符合條件的元素，findLastIndex() 方法會返回 -1。

const arr = [6, 16, 25, 20, 17, 13, 33, 10];

// 從 index 0 開始尋找值大於 20 的項目，找到後就停止尋找，並返回值
const result1 = arr.find((x) => x > 20);
console.log(result1); // 25

const result2 = arr.findIndex((x) => x > 20);
console.log(result2); // 2

// 從陣列最後開始尋找值大於 20 的項目，找到後就停止尋找，並返回值
const result3 = arr.findLast((x) => x > 20);
console.log(result3); // 33

const result4 = arr.findLastIndex((x) => x > 20);
console.log(result4); // 6

2. 新增 4 個不改動到原陣列的操作方法

ES2023 引入了四種新的陣列操作方法，這些方法不會修改原始陣列，而是會返回一個原始陣列的拷貝。這四種方法是：

• toReversed()：將陣列中的元素反轉（相對應會改變陣列的方法：reverse()）

  const numbers = [1, 2, 3, 4, 5];
  
  // 反轉陣列
  const reversedNumbers = numbers.toReversed();
  console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]
  

• toSorted(fn)：將陣列中的元素排序（相對應會改變陣列的方法：sort()）

  const numbers = [1, 2, 3, 4, 5];
  
  // 將陣列排序
  const sortedNumbers = numbers.toSorted();
  console.log(sortedNumbers); // Output: [1, 2, 3, 4, 5]
  

• toSpliced(start, deleteCount, ...items)：從陣列中指定位置開始刪除指定數量的元素，並可選擇在刪除後新增新元素（相對應會改變陣列的方法：splice()）

  const numbers = [1, 2, 3, 4, 5];
  
  // 刪除從陣列中索引 2 開始兩個元素 - 2 和 3，並在刪除後新增 10 和 20
  const splicedNumbers = numbers.toSpliced(1, 2, 10, 20);
  console.log(splicedNumbers); // Output:  [1, 10, 20, 4, 5]
  

• with(index, value)：將陣列索引處的值，替換為新值

  const fruits = ["Apple", "Orange", "Lemon", "Mango", "Cherry"];
  
  // 將 fruits 陣列索引 2 的值 "Lemon" 替換為 10
  const newFruits = fruits.with(2, "Watermelon");
  console.log(newFruits);
  // Output: ['Apple', 'Orange', 'Watermelon', 'Mango', 'Cherry']
  

這些新方法提供了更簡潔、更具表達力的方式來操作陣列。它們可以幫助我們避免對原始陣列進行不必要的修改，從而提高程式碼的可讀性和可維護性。

3. Hashbang 語法（Hashbang Grammar）

Hashbang 注釋是一種特殊的注釋語法，它會以 #! 開頭，後面僅跟著解釋器(interpreter) 的路徑，並且只會在腳本或是模組的最開始有效。以下方程式碼為例，這段程式碼是告訴系統，用 Node.js 來執行文件：

#!/usr/bin/env node

console.log("Hello world");

4. WeakMap 新增支援 Symbol 作為鍵名 (key)

WeakMap 是一種與 Map 相似的資料結構，用於儲存鍵值對（key-value pair）。兩者的主要差別在於：

• Map 的鍵名可以是任何資料類型
• ES2023 之前，WeakMap 的鍵名則必須是物件; 而在 ES2023 提出了一項新的提案，允許 WeakMap 使用 Symbol 作為鍵名

備註：要了解 Set、Map、WeakSet 和 WeakMap 等可以閱讀這篇文章 👉 《請解釋 Set、Map、WeakSet 和 WeakMap 的區別？》