sortメソッドを使って配列の並び替えを行う

JavaScriptのsortメソッドの使い方のメモです。

nameとpriceプロパティを持つオブジェクトの配列を用意します↓

const fruits = [
  {
    name: "Apple",
    price: 500
  },
  {
    name: "Cherry",
    price: 100
  },
  {
    name: "Banana",
    price: 100
  },
  {
    name: "Orange",
    price: 300
  }
];

priceプロパティを比較して昇順・降順に並べ替える方法についてメモします。

昇順で並べる

値の小さいものから大きいものへ進む順序で並べる方法です。

コード↓

//配列fruitsは省略
const asc = fruits.sort((a,b)=> {
 return a.price - b.price;
});

console.log(asc);//Cherry,Banana,Orange,Apple

//引数に渡される値はソートアルゴリズムによってランダムに渡されるらしい

挙動解説

返り値の計算結果によってどのように並べられるか決まります。

0より大きい場合（正の値）

aをbの後ろに並べます。

aにApple、bにBananaの場合500 - 100 = 400で0より大きいため「Banana、Apple」の順に並べます。

0より小さい場合（負の値）

aをbの前に並べます。

aにBanana、bにAppleの場合100 - 500 = -400で0より小さいため「Apple、Banana」の順に並べます。

0と等しい場合

作成した配列の順番通りに並べます。（インデックス番号が若い順）

aにBanana、bにCherryの場合100 - 100 = 0で0と等しいため「Cherry、Banana」の順に並びます。

降順で並べる

値の大きいものから小さいものへ進む順序で並べる方法です。

コード↓

//配列fruitsは省略
const desc = fruits.sort((a,b)=> {
 return b.price - a.price;
});

console.log(desc);//Apple,Orange,Cherry,Banana

降順ではb.price - a.priceのため大きい順になります。

aにApple、bにBananaの場合100 - 500 = -400で0より小さいため「Apple、Banana」の順になります。

注意点

sortメソッドは元の配列を変更する破壊的なメソッドのため、元の配列をコピーしてsortメソッドを使うか、ES2023に追加されたtoSortedメソッドを使用する必要があります。

参考