JavaScriptのオブジェクトのキーをconsole.logでアルファベット順にせずに確認する方法

オブジェクトだとアルファベット順になる
1. Object.entriesを使用する
2. console.tableを使用する

オブジェクトだとアルファベット順になる

JavaScriptで以下のような順番のオブジェクトを作成してconsole.logを確認すると、オブジェクトのキーがアルファベット順になってしまいます。

JavaScript

const characters = {
  first: 'Ryu',
  second: 'Ken',
  third: 'Chun-Li',
  fourth: 'Guile',
  fifth: 'Zangief',
  sixth: 'Dhalsim',
  seventh: 'Balrog',
  eighth: 'Vega',
  ninth: 'Sagat',
}

console.log(characters)

見ての通り、本来は「first」が最初に表示されるはずですが、並び替えにより「eighth」が先に表示されています。(a b c d e f g)

オブジェクトのキーが少数なら展開する前の状態でfirstから順番に確認できますが、数が多いと「...」で省略されて、展開してもキーがアルファベット順に表示されてしまうので厄介です。

この現象はChrome, Safari, Edge, Firefoxなど、すべてのブラウザで発生します。

この問題を簡単に解決する方法は2つあります。

1. Object.entriesを使用する

console.logの確認時にObject.entriesで配列化すれば、並べ替えをせずに確認できます。

JavaScript

const characters = {
  first: 'Ryu',
  second: 'Ken',
  third: 'Chun-Li',
  fourth: 'Guile',
  fifth: 'Zangief',
  sixth: 'Dhalsim',
  seventh: 'Balrog',
  eighth: 'Vega',
  ninth: 'Sagat',
}

console.log(Object.entries(characters))
// ['first', 'Ryu']
// ['second', 'Ken']
// ['third', 'Chun-Li']
// ['fourth', 'Guile']
// ['fifth', 'Zangief']
// ['sixth', 'Dhalsim']
// ['seventh', 'Balrog']
// ['eighth', 'Vega']
// ['ninth', 'Sagat']