JavaScriptでオブジェクトのvalueでソートする方法

めっちゃ久々になりました...

お仕事落ち着いてきたので再開しようと思います笑

今回は「単純に見えてやってみると意外と難しい!」と友人から質問を受けたオブジェクトのソートです。

今回のソート条件としては単純で、下記のようなオブジェクトのvalueでソートをかけたいとのこと。

let obj = {
  kinmu_0: 500, 
  zangyo_0: 400, 
  zangyo_1: 300,
  shinyaZangyo_0: 200,
  endTIme: 100
}

「そんな難しいか...？」と思ったのですが、PHPとかJavaとかと違ってJavaScriptの配列、もといオブジェクトって意外と曖昧かつ複雑だったりするんですよね〜

てな訳でやってみたのがこちらです。

let obj = {
  kinmu_0: 500, 
  zangyo_0: 400, 
  zangyo_1: 300,
  shinyaZangyo_0: 200,
  endTIme: 100
}

let array = [];

for (let [key, value] of Object.entries(obj)) {
  array.push({[key]: value});  // 躓きポイント
}

function compare(a, b) {
  const numA = Object.values(a);
  const numB = Object.values(b);
  
  let comparison = 0;
  if (numA > numB) {
    comparison = 1;
  } else if (numA < numB) {
    comparison = -1;
  }
  return comparison;
}


array.sort(compare);

流れとしては一旦配列に変換してsort関数を適用する、といった流れになっています。

おそらく友人が今回の質問で躓いていたのはおそらくオブジェクト→配列への変換だったのではないかなーと思ってます。

躓きポイントとしてコメントアウトしている部分、実は最初私はこのように書いていたんです。

  array.push({key: value}); 

これだと、変数名を解決してくれずただkeyというキーが設定されてしまいます。 ただ、変数を「[]」で囲んであげれば変数を解決してくれます。

これで配列への変換は完了しましたね。

あとはソートなのですが、配列にしてしまえばあとは簡単です。

普通の配列のソートと変わらずソートの関数を作ってコールバックでオブジェクトのvalueを比較してあげれば終了です。

なんだかんだ30分くらいかかってしまったのでもっとオブジェクトに対する理解を深めなければなーと感じました