これらの新しい JavaScript メソッドはゲームチェンジャーです。

2023 年 7 月、ECMAScript は JavaScript の新しい仕様をいくつかリリースしました。一部の機能には、既存の配列を変更しない新しい Array メソッドが含まれています。このブログでは、Web と JavaScript の最新トレンドを知るために知っておくべき、そのうちの 3 つ (2024 年から 1 つ) について説明します。 !

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]

Object.groupBy()

このメソッドは ES2024 で正式にリリースされましたが、以前はポリフィルでまだ利用可能であり、すでに ECMAScript の後の段階に進んでいます。

Object.groupBy() は、特定のオブジェクト プロパティに基づいて、指定された配列の項目をグループ化します。これは非常に便利で、オブジェクトの特定のリストをグループ化し、それに応じてキーと値の構造で反復処理する場合に非常に役立ちます。このメソッドに関する興味深い事実は、Web 互換性の問題により、配列のプロトタイプ メソッドとして実装されていないことです。 (多くの古い JavaScript ライブラリはすでに Array.prototype.group() 名前空間内にコードを実装していました。それが理由です。)

おまけ: 複数の要素でグループ化する独自の Object.groupBy() の実装

最終的には、複数のプロパティでグループ化する必要がある場合もあります。元の Object.groupBy() は 1 つのレベルでのみグループ化します。

以下のコードをプロジェクトに実装して、複数のプロパティごとに要素をグループ化します。

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;
}

例:

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

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']

終わり！

この記事を最後まで読んでいただいた方、読んでいただきありがとうございます! ?

以上がこれらの新しい JavaScript メソッドはゲームチェンジャーです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。