オブジェクトはキーと値をペアで持つデータ型

配列と違ってソート用のメソッドとかもありません。

でもほんの少しだけ工夫すれば、
配列と同じように値・キー名でソート可能です。

そのやり方をコード例と一緒に紹介。

キーでオブジェクトをソートする方法

初めにキー名でソートする方法から。

これは地道にforループで並び替えなどもできます。

でも Object.entries()  を使うともっと楽です。

▼ MDNでの Object.entries() の説明

Object.entries() メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 [key, value] からなる配列を返します。

引用元　：　Object.entries() - JavaScript | MDN

これを上手く使えばスマートにソート可能。

具体的な方法というと次の通りです。

まずソートしたいオブジェクトを用意

▼ ここでは次を並び替えしたい

これをキー名で昇順ソートする方法が次コードです。

▼キー名で昇順ソートするコード例

▼ コンソールの出力結果

このようにキー名で並び替えされてます。

大事なポイントは次の３点ですね。

• Object.entries() を使う
  オブジェクトを Object.entries()  を使って [key, value]  のペアにした配列に変換している。そうすることでキー名でのソートが行いやすくなる
• sortメソッドで並び替え
  あとは配列として処理できるので sortメソッドを使ってソート。キー名を文字列として扱い、昇順（a => z）になるように並び替えしてるだけ
• fromEntriesで元に戻す
  最後にソートした [key, value]の配列を Object.fromEntries()  で再度オブジェクトに戻す。

ちょっと分かりにくいかもですが・・・

でもオブジェクトを配列として再定義すると、配列として扱えるからソートが簡単にできるかもしれません。またキーではなく値でソートするにも重宝します。

値でオブジェクトをソートする方法

お次は値でオブジェクトをソートする方法。

これも Object.entries()  を使うと汎用性高いです。

▼ もう一度 Object.entries() の説明を引用

Object.entries() メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 [key, value] からなる配列を返します。

引用元　：　Object.entries() - JavaScript | MDN

この説明の通り [key, value]  の配列を返してくれます。

だから複雑なことせずにスマートに並び替え可能です。

こっちも簡単な例でコード例を作ってみました。

まずソートしたいオブジェクトを定義

▼ 今度は次を並び替えしたい

これを値で昇順ソートするコードを書いてみました。

▼ 昇順でソートさせるコード例

▼ このコードのコンソール出力結果

今度もちゃんとソートしてくれてます。

ポイントはキー名で並び替えする時と変わりません。

流れとしては １． Object.entries()  から [key, value]  の配列を取得　＝＞　２．sortメソッドから値を昇順ソート　＝＞　３． Object.fromEntries()  でオブジェクトに戻す　という感じですね。

あとは for...in  ループ内や Object.keys()  もソートした順になります。

オブジェクトをソートする方法まとめ

簡単にここまでの内容まとめ

• オブジェクトのキー名でソート
  １． Object.entries()  から [key, value]  の配列取得　＝＞　２．sortメソッド内で key を使ってソート　＝＞　３． Object.fromEntries()  でオブジェクトに戻す
• オブジェクトを値でソート
  １． Object.entries()  から [key, value]  の配列取得　＝＞　２．sortメソッド内で value を使ってソート　＝＞　３． Object.fromEntries()  でオブジェクトに戻す

見ての通り、両方ともやり方はほぼ変わりません。

大事なのは Object.entries() を使って配列変換することですね。

もし間違いなどあればコメント欄からご指摘ください。

以上、オブジェクトのソート方法でした。ではまた(^^)/~~~