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

例：

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

終わり！

この記事を最後まで読んでくださった方、本当にありがとうございます！ ?