JavaScriptのオブジェクトでは、キーと値のペアを保持することができますが、その順序が保証されない場合があります。今回は、指定した順序でオブジェクトのキーと値を配列に出力する方法を解説します。
問題の例
例として、以下のオブジェクトがバックエンドからAPIを通じて取得できると仮定します。
const obj = {
8: "tomato",
7: "lemon",
2: "apple",
3: "orange"
};JavaScriptによってこのオブジェクトが自動的に並べ替えられ、以下のようになります。
const obj = {
2: "apple",
3: "orange",
7: "lemon",
8: "tomato",
};このオブジェクトのキーと値を、元の順序のままの表示順で配列に変換したいとします。
['8', 'tomato'] ['7', 'lemon']['2', 'apple']['3', 'orange']ただし、Object.entries メソッドを使用してオブジェクトを配列に変換すると、キーの順序が保証されません。
JavaScriptのオブジェクトは、ES2015 (ECMAScript 2015) 以降、キーの挿入順で保持されることが仕様に明記されています。ただし、整数プロパティ（全ての数値のキーは内部的に文字列に変換される）は昇順で並び、それ以外の文字列プロパティは挿入順に並びます。
解決策
配列は要素の挿入順を保持しているため、指定した順序でキーと値を取得できます。
まず、オブジェクトのキーを表示したい順序で配列に定義します。
（APIで順序を決める配列を取得するのもいいと思います。）
const order = [8, 7, 2, 3]次に、定義した配列をイテレートして、指定された順序でキーと値のペアを含む新しい配列を作成します。
const orderedEntries = order.map(key => [key.toString(), obj[key]]);この方法を使用することで、オブジェクトのキーと値が指定された順序で出力され、キーの順序を制御することができます。
関連記事
