Objectの列挙順について

Question

前提・実現したいこと

オブジェクトのキー順に表示をさせたいです。

const object = {
  1000: 'テスト1',
  0: 'テスト2',
  1001: 'テスト3'
};

for (const [key, value] of Object.entries(object)) {
  console.log(`${key}: ${value}`);
}

> "1000: テスト1"
> "0: テスト2"
> "1001: テスト3"

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

以下、連番で列挙されます。
Mapは使用せず、Objectで、連番を無視して、列挙する事は可能でしょうか。

> "0: テスト2"
> "1000: テスト1"
> "1001: テスト3"

Comments

[Lhankor_Mhy]

当方の環境では連番で表示されました。（Win10 Firefox87 Chrome89）

naka0512さんの環境を示した方がいいかもしれません。

[naka0512]

ご指摘ありがとうございます。
私も環境で連番で表示されておりました。試行錯誤でコードを書いたのですが、キー順で表示されずです。。
（macOSMojave Chrome88）

[Lhankor_Mhy]

失礼しました、質問を誤読しておりました。

Answer 1

オブジェクトのキー順に表示をさせたいです。

キーの順番は、

• ES5以下→保証されない（どんな順番になっても文句は言えない）
• ES6以降→整数であれば数字順に整列される（入れた順には決してならない）

ということで、この場合には「確実に入れたときの順番のまま保持する」方法はありません。配列もしくはMapで管理する必要があります。

Comments

[maisumakun]

ES6のキー順で処理がなされない古いブラウザを無視できるのであれば、キーへ「*0」のように余計なものを付けるなどして、整数としてのソートを避ける、という手段は考えられます。

[naka0512]

なるほど、やはりMapや配列になりますでしょうか、、
ご回答ありがとうございます。

[naka0512]

なるほど、ソートの条件に合わせて、キーを変更する手段がありますよね。
列挙順に出来ない場合は、検討してみます。ありがとうございます。

Answer 2

通常のObjectはイテラブルではないため任意の順番で引き出すことは出来ません
ご自身でも指摘されている通りMapや配列などを利用することをおすすめします

Comments

[naka0512]

やはりMapや配列になりますでしょうか、、
すみません、ご回答ありがとうございます。

Answer 3

ES6以降が動作する標準的なブラウザであれば、連番で並ぶはずです。試してないけど、Node.jsもそのはず。

文字列キーの内、0 以上の整数に解釈可能なキーが整数昇順で並ぶ

ES6 以降は JavaScript のプロパティに順序は「ある」 - Qiita

Firefox87 Chrome89 Edge89 で確認しました。
キーを数値化するので、↓これでも連番になると思います。

const object = {
  '1000': 'テスト1',
  0: 'テスト2',
  1001: 'テスト3'
};

Comments

[Lhankor_Mhy]

ああ、誤読してました。キー順っていうのは、キーの登録順のことでしたか……

[naka0512]

こちら分かりづらい記述をしてしまい申し訳ありません。。
はい、キーの登録順で表示させたいです。

Answer 4

キーでソートしてから表示すればいいと思います。

for (const [key, value] of Object.entries(object).sort(([k1,v1],[k2,v2])=>Number(k1)-Number(k2))) {
  console.log(`${key}: ${value}`);
}

Comments

[naka0512]

ご回答ありがとうございます。
ご回答を参考にコードを修正して実行してみましたが、連番で表示されてしまって、、他のブラウザでも見てみます。

実行結果
> "0: テスト2"
> "1000: テスト1"
> "1001: テスト3"