【JavaScript】配列操作の新機能おさらい

今年5月に更新されたICS MEDIAさんのJSの配列操作の記事を眺めた

ics.media

ほとんど知っていたが、2023~実装された機能は曖昧だったのでおさらいすることができてよかった

toReversed

.reverseは知っていたが、.toReversedを知らなかった

.reverseは配列のコピーを作って逆転させていた

const list1 = [1, 2, 3];
const list2 = [...list1].reverse(); // 逆転

.toReversedはコピーをつくらなくて良い

const list1 = [1, 2, 3];
const list2 = list1.toReversed(); // 逆転

toSorted

toReversedと同様にコピーを作らずにソートできる

.sort

const list1 = [3, 1, 2];
const list2 = [...list1].sort(); // 並び順の整理

.toSorted

const list1 = [3, 1, 2];
const list2 = list1.toSorted(); // 並び順の整理

Object.groupBy()

配列の要素をグループ化するためのメソッド

全ブラウザで使えるようになったみたい

Object.groupBy() - JavaScript | MDN

第1引数に配列データ、第2引数にグループ化の条件を指定する関数を指定する

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);

/* 結果:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

function myCallback({ quantity }) {
  return quantity > 5 ? "ok" : "restock";
}

const result2 = Object.groupBy(inventory, myCallback);

/* 結果:
{
  restock: [
    { name: "asparagus", type: "vegetables", quantity: 5 },
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  ok: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/