オブジェクトはキーと値をペアで持つデータ型
配列と違ってソート用のメソッドとかもありません。
でもほんの少しだけ工夫すれば、
配列と同じように値・キー名でソート可能です。
そのやり方をコード例と一緒に紹介。
キーでオブジェクトをソートする方法
初めにキー名でソートする方法から。
これは地道にforループで並び替えなどもできます。
でも Object.entries() を使うともっと楽です。
▼ MDNでの Object.entries() の説明
Object.entries() メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 [key, value] からなる配列を返します。
これを上手く使えばスマートにソート可能。
具体的な方法というと次の通りです。
まずソートしたいオブジェクトを用意
▼ ここでは次を並び替えしたい
|
1 2 3 4 5 6 7 |
var fruits = { jan: 1, feb: 2, mar: 3, apr: 4, may: 5 }; |
これをキー名で昇順ソートする方法が次コードです。
▼キー名で昇順ソートするコード例
|
1 2 3 4 5 6 7 8 9 |
var pairs = Object.entries(fruits); pairs.sort(function(p1, p2){ var p1Key = p1[0], p2Key = p2[0]; if(p1Key < p2Key){ return -1; } if(p1Key > p2Key){ return 1; } return 0; }) fruits = Object.fromEntries(pairs); console.log(fruits); |
▼ コンソールの出力結果
|
1 2 3 4 5 6 7 |
{ apr: 4, feb: 2, jan: 1, mar: 3, may: 5 } |
このようにキー名で並び替えされてます。
大事なポイントは次の３点ですね。
- Object.entries() を使う
オブジェクトを Object.entries() を使って [key, value] のペアにした配列に変換している。そうすることでキー名でのソートが行いやすくなる
- sortメソッドで並び替え
あとは配列として処理できるので sortメソッドを使ってソート。キー名を文字列として扱い、昇順（a => z）になるように並び替えしてるだけ
- fromEntriesで元に戻す
最後にソートした [key, value]の配列を Object.fromEntries() で再度オブジェクトに戻す。
ちょっと分かりにくいかもですが・・・
でもオブジェクトを配列として再定義すると、配列として扱えるからソートが簡単にできるかもしれません。またキーではなく値でソートするにも重宝します。
値でオブジェクトをソートする方法
お次は値でオブジェクトをソートする方法。
これも Object.entries() を使うと汎用性高いです。
▼ もう一度 Object.entries() の説明を引用
Object.entries() メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 [key, value] からなる配列を返します。
この説明の通り [key, value] の配列を返してくれます。
だから複雑なことせずにスマートに並び替え可能です。
こっちも簡単な例でコード例を作ってみました。
まずソートしたいオブジェクトを定義
▼ 今度は次を並び替えしたい
|
1 2 3 4 5 6 7 |
var fruits = { apr: 4, feb: 2, mar: 3, jan: 1, may: 5 }; |
これを値で昇順ソートするコードを書いてみました。
▼ 昇順でソートさせるコード例
|
1 2 3 4 5 6 7 |
var pairs = Object.entries(fruits); pairs.sort(function(p1, p2){ var p1Val = p1[1], p2Val = p2[1]; return p1Val - p2Val; }) fruits = Object.fromEntries(pairs); console.log(fruits); |
▼ このコードのコンソール出力結果
|
1 2 3 4 5 6 7 |
{ jan: 1, feb: 2, mar: 3, apr: 4, may: 5 } |
今度もちゃんとソートしてくれてます。
ポイントはキー名で並び替えする時と変わりません。
流れとしては １． 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() を使って配列変換することですね。
もし間違いなどあればコメント欄からご指摘ください。
以上、オブジェクトのソート方法でした。ではまた(^^)/~~~
