javascriptでのobjectの配列をソートするやり方

javascriptで配列がある時に何かの基準や要素でソートしたい時があると思います。その際のソートの方法を紹介します。

const items = [
  {id: 1, price: 200, name: '鮭'},
  {id: 2, price: 180, name: '鶏肉'},
  {id: 3, price: 300, name: '牛肉'},
  {id: 4, price: 280, name: '豚肉'},
]

例えば、このようなオブジェクトで価格順(安い順。昇順)にしたいとします。その際にこのようにすると価格順になります。

items.sort((a,b) => a.price - b.price)
console.log(items)

// 表示結果
0: {id: 2, price: 180, name: "鶏肉"}
1: {id: 1, price: 200, name: "鮭"}
2: {id: 4, price: 280, name: "豚肉"}
3: {id: 3, price: 300, name: "牛肉"}

ソートの基準

ここで、a.price - b.priceで何をしているかを説明します。そもそも、ソートをする時には、下記のような基準にしたがって書けば良いのです。

要素の説明

a: 最初の比較対象
b: 次の要素

ソートの基準

比較の結果が0ならば、要素の大きさは同じ
比較の結果がプラスの値ならば、aの方が大きく。bの方が小さい。
比較の結果がマイナスの値ならば、aの方が小さく、bの方が大きい。

となります。つまり比較結果が0か、マイナス、プラスになるかがソートの基準となります。そのため、数値だけでなくても、比較結果として、0, プラス、マイナスを返してあげれば値以外のソートも可能になります。

先程のコードは下記のようにも置き換えられます。

function by_price_order(a,b) {
  if (a.price == b.price ) { return 0}
  if (a.price > b.price) {  return 1 }
  if (a.price < b.price) {  return -1 }
}
items.sort(by_price_order)

また、マイナスになるか、プラスになるかでどちらが先になるか（順番）を決めているので、価格を高い順(降順)にする場合は、a - bの結果を反対にするだけで良いです。下記のように書き換えられます。

function by_price_order_desc(a,b) {
  if (a.price == b.price ) { return 0}
  if (a.price > b.price) {  return -1 }
  if (a.price < b.price) {  return 1 }
}

items.sort(by_price_order_desc)
items.sort((a,b) => b.price - a.price) // by_price_order_descと結果は同じ

参考: array sort