JavaScript 最新動態：2024 年新功能

前言

隨着 Web 技術的日新月異，JavaScript 也在不斷地吸收新的特性和技術，以滿足日益複雜和多樣化的開發需求。在 2024 年，JavaScript 迎來了一系列令人矚目的新功能，這些功能不僅提升了開發者的效率，也極大地豐富了 Web 應用的表現力和交互性。

在接下來的內容中，我們將逐一介紹這些新功能，並探討它們如何在實際開發中發揮作用，以及它們如何繼續引領前端開發的未來。

Object.groupBy

它是一個新的 JavaScript 方法，它可以根據提供的回調函數返回的字符串值對給定可迭代對象中的元素進行分組。返回的對象具有每個組的單獨屬性，其中包含組中的元素的數組。

當我們想要根據數組中對象的一個或多個屬性的名稱對數組元素進行分類時，此方法非常有用。

語法

Object.groupBy(items, callbackFn)

參數

• items：一個將進行元素分組的可迭代對象
• callbackFn：對可迭代對象中的每個元素執行的函數。它應該返回一個值，可以被強制轉換成屬性鍵（字符串或 symbol），用於指示當前元素所屬的分組。該函數被調用時將傳入以下參數：
  • element：數組中當前正在處理的元素
  • index：正在處理的元素在數組中的索引

返回值

一個帶有所有分組屬性的 null 原型對象，每個屬性都分配了一個包含相關組元素的數組。

對數組中的元素進行分組

我們可能經常需要對數據庫中的項目進行分組並通過 UI 將它們顯示給用戶。使用 Object.groupBy()就可以簡化此類項目的分組。

比如有這樣一堆數據：

const arr = [
  { product: "iPhone X", quantity: 25, color: "black" },
  { product: "Huawei mate50", quantity: 6, color: "white" },
  { product: "xiaomi 13", quantity: 0, color: "black" },
  { product: "iPhone 13", quantity: 10, color: "white" },
  { product: "Huawei P50", quantity: 5, color: "black" },
]

然後我們希望將這些設備根據顏色進行分類

const newArr = Object.groupBy(arr, (item) => item.color)

console.log('【newArr】', newArr)

上面的代碼按產品的屬性值color對產品進行分組，每次調用回調函數時，都會返回與每個對象的屬性（“黑色”或“白色”）相對應的鍵。然後使用返回的鍵對數組的元素進行分組。

有條件地對數組中的元素進行分組

還是上面的數據，如果我們想要分成iphone和國產品牌兩類，可以這麼來實現：

const arr = [
  { product: "iPhone X", quantity: 25, color: "black" },
  { product: "Huawei mate50", quantity: 6, color: "white" },
  { product: "xiaomi 13", quantity: 0, color: "black" },
  { product: "iPhone 13", quantity: 10, color: "white" },
  { product: "Huawei P50", quantity: 5, color: "black" },
]

const list = Object.groupBy(arr, (item) => {
  return item.product.includes('iPhone') ? 'iPhone' : '國產品牌'
})

console.log('【list】', list)

擴展

注意： Object.groupBy()最初是作爲典型的數組方法實現的。它最初的用途是這樣的：

let myArray = [a, b, c]
myArray.groupBy(callbackFunction)

然而，由於ECMAScript技術委員會在實現該方法 時遇到了Web 兼容性問題，因此他們決定將其實現爲靜態方法 ( )。

Object.groupBy()只需兩個參數即可簡化數組中對象分組的過程：數組本身和回調函數。

在過去，您必須編寫一個自定義函數來對數組元素進行分組或從外部庫導入分組方法。

可用性： Object.groupBy()現在所有主要瀏覽器平臺都支持

正則表達式v標誌

大家可能熟悉正則表達式 Unicode 標誌 ( u)，它允許啓用對 Unicode 字符的支持。該v標誌是u標誌大部分功能的擴展。

它除了主要向後兼容該u標誌之外，還引入了以下新功能：

交集運算符

交集運算符可以匹配兩個字符集中必須存在的字符。其語法爲[operand-one&&operand-two]，其中&&表示交集運算符， operand-one和operand-two表示各自的字符集。

const str = 'My name is nanjiu'

const strReg = /[[a-z]&&[^aeiou]]/gv
const strArr = str.match(strReg)
console.log('【strArr】', strArr)

// 【strArr】 ['y', 'n', 'm', 's', 'n', 'n', 'j']

• [a-z]上面的代碼定義了一個匹配小寫字母和非元音字符的交集的正則表達式[^aeiuo]。
• 運算&&符確保僅匹配兩個集合共有的字符。
• 這些gv標誌啓用全局搜索（查找所有匹配項）和正則表達式 v 模式。

差異運算符

差異運算符由兩個連續的連字符 ( --) 表示，提供了一種在正則表達式中指定排除項的便捷方法。正則表達式引擎將忽略--後面的任何字符集

查找非 ASCII 表情符號字符：

let myEmojis = "😁,😍,😴,☉‿⊙,:O";

let myRegex = /[\p{Emoji}--\p{ASCII}]/gv;
console.log(myEmojis.match(myRegex));

// ["😁","😍","😴"]

可用性： 所有主要 JavaScript 環境都支持該v標誌。

Promise.withResolvers()

Promise.withResolvers()是一個靜態方法，它返回一個包含三個屬性的對象：

• promise：一個新的peomise對象
• resolve：一個函數，用於解決該promise
• reject：一個函數，用於拒絕該promise

很多時候，我們希望能夠在promise外部訪問resolve和reject，在這之前我們都是通過以下形式解決的

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

現在我們可以使用Promise.withResolvers來優雅的解決這個問題，並且resolve和reject函數現在與 Promise 本身處於同一作用域，而不是在執行器中被創建和一次性使用。這可能使得一些更高級的用例成爲可能，例如在重複事件中重用它們，特別是在處理流和隊列時。這通常也意味着相比在執行器內包裝大量邏輯，嵌套會更少。

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

  setTimeout(() => {
    const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    resolve(list)
  }, 1000)

  return promise
}

getList().then(res => {
  console.log('【res】', res)
})

// 【res】 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

可用性： 適用於所有主要瀏覽器。

注意：Promise.withResolvers()尚未包含在 Node.js 中。因此，提供的示例可能無法在 Node.js 中按預期運行

四種新的非改變數組方法

通過複製改變數組引入了四種新的非改變數組方法： toReversed()、toSpliced()、toSorted()和with()

前三個在功能上等同於它們的相似方法： reverse()、splice()和sort()。

它們與對應方法的功能相似，區別在於新增的三個方法不會改變原數組

with()是第四個新的數組方法。它允許我們替換數組中特定位置的元素，同樣不會改變原數組

const groupList = [1, 2, 3, 4, 5, 6] 

const newGroupList = groupList.with(2, 'nanjiu')
console.log('【newGroupList】', newGroupList)
console.log('【groupList】', groupList)

可用性： 適用於所有主要的 JavaScript 運行時和瀏覽器中。