JavaScriptでオブジェクトをキー・値でソートするには

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

▼ コンソールの出力結果

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

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

  • 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]  の配列を返してくれます。

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

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

 

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

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

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

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

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

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

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

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

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

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

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

  • オブジェクトのキー名でソート
    1. Object.entries()  から [key, value]  の配列取得 => 2.sortメソッド内で key を使ってソート => 3. Object.fromEntries()  でオブジェクトに戻す
  • オブジェクトを値でソート
    1. Object.entries()  から [key, value]  の配列取得 => 2.sortメソッド内で value を使ってソート => 3. Object.fromEntries()  でオブジェクトに戻す

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

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

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください