JavaScript オブジェクトの配列をソートする

JavaScriptでオブジェクトの配列を、特定のプロパティの値順にソートする方法についてご紹介します。

というか、何回やっても忘れるので備忘録も兼ねつつ。

やりたいこと

下のオブジェクトを name , price , kigenのどれかの値を基準にソートする。

const fruits = [
  {
    name: 'Apple',
    price: '100',
    kigen: '2024-11-12T16:00:00.000Z'
  },
  {
    name: 'Orange',
    price: '80',
    kigen: '2022-10-06T02:30:00.000Z'
  },
  {
    name: 'Meron',
    price: '1000',
    kigen: '2022-10-06T15:00:00.000Z'
  },
  {
    name: 'Banana',
    price: '120',
    kigen: '2018-09-20T16:00:00.000Z'
  }
];

オブジェクトの配列をソートする（数値編）

数値の場合はこのように簡潔に書けます。

昇順

fruits.sort((a, b) => {
  return a.price - b.price; // 昇順
  // return b.price - a.price; // 降順
})

結果:

[
    {
        "name": "Orange",
        "price": "80",
        "kigen": "2022-10-06T02:30:00.000Z"
    },
    {
        "name": "Apple",
        "price": "100",
        "kigen": "2026-11-12T16:00:00.000Z"
    },
    {
        "name": "Banana",
        "price": "120",
        "kigen": "2018-09-20T16:00:00.000Z"
    },
    {
        "name": "Meron",
        "price": "1000",
        "kigen": "2022-10-06T15:00:00.000Z"
    }
]

オブジェクトの配列をソートする（文字列, 日付）

文字列や日付の場合は、足し算や引き算ができません。ので、比較演算を使います。

ここでは日付でやってみます。

fruits.sort((a, b) => {
  if (a.kigen > b.kigen) return 1;
  else if (a.kigen < b.kigen) return -1;
  return 0;
});


// 降順の場合は1と-1を逆にする

結果:

[
    {
        "name": "Banana",
        "price": "120",
        "kigen": "2018-09-20T16:00:00.000Z"
    },
    {
        "name": "Orange",
        "price": "80",
        "kigen": "2022-10-06T02:30:00.000Z"
    },
    {
        "name": "Meron",
        "price": "1000",
        "kigen": "2022-10-06T15:00:00.000Z"
    },
    {
        "name": "Apple",
        "price": "100",
        "kigen": "2026-11-12T16:00:00.000Z"
    }
]

ちゃんと日付の昇順に並んだことが確認できました。