Javascript オブジェクトの並べ替えの際に文字コードの関係で希望通りにならない。

Question

前提

htmlでテーブルを作り、ボタンにより表のソートを行おうとしています。
テストで単純なオブジェクトを作り並べ替えのjavascriptを作成し
codepenで検証しました。

実現したいこと

const obj={"100":1,"200":2,"010":3}
//これを変換し、
objConv={"010":3,"100":1,"200":2}
//というオブジェクトにしたいと思っています。

発生している問題・エラーメッセージ

調べていくと、100と010では文字コードとして変換されて
(10進数　UTF-8)
100->10 49 48 48
010-> 48 49 48
となるため、１バイト目の10 と48が比較され、10<48よって
100<010という結論になって希望通りの並び順にならないのではないか？
と考えています（正しいかどうかも完全に理解できていないかと思いますが。。。）

該当のソースコード

 const obj={"100":1,"200":2,"010":3}

var pairs = Object.entries(obj);
pairs.sort(function(p1, p2){
  var p1Key = p1[0], p2Key = p2[0];
  if(p1Key < p2Key){ return -1; }
  if(p1Key > p2Key){ return 1; }
  return 0;
})
objConv = Object.fromEntries(pairs);
console.log(objConv);

補足情報（FW/ツールのバージョンなど）

CodePenにてテスト中。

よろしくお願いいたします。

Comments

[Cocode]

オブジェクトは配列とは違い、順番がありません。
（プログラムに認識される順番は、記述順とは関係なくランダムです）
順番を並び替えたいのであれば、配列の中に別々のオブジェクトとして格納する必要があります！

私の理解力が足りず申し訳ないのですが、順番のルールはなんでしょう＞＜？
2進数ではないんですもんね＞＜

[latte217]

Cocode様
　早速のごご意見ありがとうございます。
　行いたいことは、「後者」の内容でソートを考えております。

　お書きいただいた回答を考えている中で、おっしゃる通り「基準」を明確に考える必要があることを理解しました。
　考えていた基準は数値としてとらえて、010=>10 と考えるべきだとわかりました。
とすると、キーの取得後に一旦数値に変換したうえで処理するのが正しいようにおもいます。

確かにオブジェクトは順番という概念がないため、やろうとしていること自体が間違っているのかもしれないのですね。

[Cocode]

お返事ありがとうございます！回答投稿します。

Answer 1

オブジェクトは配列とは違い、順番がありません。
（プログラムに認識される順番は、記述順とは関係なくランダムです）

順番を並び替えたいのであれば、配列の中に別々のオブジェクトとして格納する必要があります！
またキーの文字列"010"などを、数値10に変換してやる必要があります。（.parseInt(str)）

const input = {"100":1,"200":2,"010":3};

function convertObjToSortedArr(obj) {
  let arr = Object.entries(obj).map(([key,val]) => ({[key]: val}));
  let sortedArr = arr.sort((a,b) => parseInt(Object.keys(a)[0]) - parseInt(Object.keys(b)[0]));
  
  return sortedArr
}                        
console.log(convertObjToSortedArr(input));
// [{010: 3}, {100: 1}, {200: 2}]

.sort()について

ifを使わずシングルラインで簡単に表現できます。

// 昇順　1->2->3
array.sort((a, b) => a - b)

// 降順　3->2->1
array.sort((a, b) => b - a)

おまけ

この処理は、アロー関数を使えばシングルラインで表現することもできます。
（すっごい長くてみにくいですけど）

const convertObjToSortedArr = obj => Object.entries(obj)
                                           .map(([key,val]) => ({[key]: val}))
                                           .sort((a,b) => parseInt(Object.keys(a)[0]) - parseInt(Object.keys(b)[0]));

Comments

[latte217]

Cocode様
　ご丁寧な回答ありがとうございました。
　＞配列の中に別々のオブジェクトとして格納する必要があります！
　なるほど！
　よくわかりました。
　また、.sortについて、さらに、シングルラインでの記載方法まで教えていただき感謝いたします！

　引き続きよろしくお願いいたします。

[Cocode]

間違って各オブジェクトのバリューを配列にしていたので、数値に直しました。
[3] -> 3

[Cocode]

お役て立ててよかったです〜。