JavaScript 最新動態：2024 年新功能

前端南玖發表於2024-03-07
JavaScript

前言

隨著 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 執行時和瀏覽器中。

相關文章