【JavaScript】Object.entriesなら配列も配列っぽいオブジェクトもまとめて簡単に全て繰り返せる

　様々なAPIを使っていると稀に添え字が雑なAPIに出会います。API側としては配列を返したかったのだろうけども、誤ってオブジェクトになってしまっているというやつです。より具体的には次の様なレスポンスを返してくるAPIです。

// 普段は配列でいい感じに返してくれる
[
  {name: '静岡市'},
  {name: '浜松市'},
  {name: '沼津市'},
  {name: '熱海市'},
  {name: '三島市'},
]
// たまにオブジェクトで返してくる
{
  1: {name: '浜松市'},
  3: {name: '熱海市'},
  4: {name: '三島市'},
}

　よくPHPであるのが配列を操作したら添え字が配列としてふさわしくない形になり、そのよろしくない添え字のままの配列もどきをそのままレスポンスにしてしまうというパターンです。こういった問題はサーバー側のコードを改修してarray_valuesの様な添え字を整える処理を追加したりすることで片付くのですが、APIの管理者に改修を依頼するのが難しいなどの理由によって、この配列とオブジェクトのどちらにもなりうるレスポンスをそのまま処理しなければならない場合があります。そういった際に役に立つコードを紹介します。

　使うのは Object.entries です。これは引数のオブジェクトが持つ列挙可能なプロパティの組 [key, value] からなる配列を返します。具体的には次のように使えます。
Object.entries() – JavaScript ｜ MDN

// 基本的には配列で返してくる
const arr = [
  {name: '静岡市'},
  {name: '浜松市'},
  {name: '沼津市'},
  {name: '熱海市'},
  {name: '三島市'},
];

// たまにオブジェクトで返してくる
const obj = {
  1: {name: '浜松市'},
  3: {name: '熱海市'},
  4: {name: '三島市'},
};

// Object.entries ならどちらが来ても同じ対応をしてくれる
Object.entries(arr).forEach(([key, value]) => {
  console.log({key, value});
});
// { key: '0', value: { name: '静岡市' } }
// { key: '1', value: { name: '浜松市' } }
// { key: '2', value: { name: '沼津市' } }
// { key: '3', value: { name: '熱海市' } }
// { key: '4', value: { name: '三島市' } }
Object.entries(obj).forEach(([key, value]) => {
  console.log({key, value});
});
// { key: '1', value: { name: '浜松市' } }
// { key: '3', value: { name: '熱海市' } }
// { key: '4', value: { name: '三島市' } }

　Object.entriesの返り値が配列であることとObject.entriesがnullとundefined以外なんでも受け付けてくれるため、配列も配列っぽいものもまとめて配列として扱い、当初の値に含まれる要素を総ざらいできます。