2023 年 7 月，ECMAScript 發布了多項 JavaScript 新規範。一些功能包括不修改現有數組的新數組方法。在這篇部落格中，我們將討論其中的三個（一個從2024 年開始），如果您想了解Web 和JavaScript 的最新趨勢，您必須了解它們!

Array.toSorted()

原始的 Array.sort() 對陣列的元素進行排序就地。有時您可能不想要這種行為。在程式設計中，避免修改現有值並傳回新版本通常是一個好習慣。

Array.toSorted() 透過傳回一個新陣列來解決這個問題，其中包含回呼函數中描述的已排序元素！

我特別喜歡這個功能，因為早在 VSCode 和 Web 瀏覽器對其提供適當支援之前我就已經開始在我的程式碼中使用它了！

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed() 是一個新增功能，它提供了一種不可變的方式來反轉數組。與 Array.reverse() 修改原始陣列不同，Array.toReversed() 傳回陣列的反向副本，保持原始陣列不變。

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced() 提供了一種非破壞性的方法來刪除、替換或添加數組中的元素。傳統的 Array.splice() 直接修改數組，但 Array.toSpliced() 建立一個應用變更的新數組，並保持原始數組不變。當您需要應用變更而不影響來源資料時，這可能很有用。

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

物件.groupBy()

該方法在 ES2024 中正式發布，但之前在 polyfill 中仍然可用，並且已經推進到 ECMAScript 的後期階段。

Object.groupBy() 根據特定物件屬性對給定陣列的項目進行分組。這是非常有用的，當您想要對某個物件列表進行分組，然後在鍵值結構中相應地迭代它們時，它會非常方便。關於此方法的一個有趣的事實是，由於 Web 相容性問題，它沒有作為數組的原型方法實現。 （許多較舊的 JavaScript 函式庫已經在 Array.prototype.group() 命名空間中實作了一些程式碼，這就是原因！）

獎勵：實作您自己的 Object.groupBy() 以按多個元素進行分組

最終，您可能還需要按多個屬性進行分組。原始的 Object.groupBy() 僅在一層進行分組。

在您的專案中實作以下程式碼，以按多個屬性將元素分組！

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

例子：

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

結局！

如果您已閱讀本文，非常感謝您的閱讀！ ？