JavaScriptでJSONオブジェクトを配列に変換する方法を徹底解説

例えば、次のようなJSONオブジェクトがあるとします。このオブジェクトでは、インデックス番号を表すキーがそれぞれの文字列（リテラル）にマッピングされています。

const obj = {
    "0": "Rakesh",
    "1": "Dinesh",
    "2": "Mohit",
    "3": "Rajan",
    "4": "Ashish"
};

このようなオブジェクトを引数として受け取り、オブジェクトが持つ値を使って配列を構築するJavaScript関数を作成することを目標とします。キーが連続した数字になっているため、変換後は通常のインデックス付き配列として扱えるのがポイントです。

実装例

コードは以下のようになります。

const obj = {
    "0": "Rakesh",
    "1": "Dinesh",
    "2": "Mohit",
    "3": "Rajan",
    "4": "Ashish"
};
const objectToArray = (obj) => {
    const res = [];
    const keys = Object.keys(obj);
    keys.forEach(el => {
        res[+el] = obj[el];
    });
    return res;
};
console.log(objectToArray(obj));

処理の流れの解説

この関数の動作を順番に見ていきましょう。

• Object.keys(obj): オブジェクトのすべてのキー（"0"〜"4"）を文字列の配列として取得します。
• +el: 単項プラス演算子を使うことで、文字列型のキー（"0"など）を数値型（0など）に変換しています。これにより、配列の正しいインデックス位置へ値を代入できます。
• forEach(): 各キーに対して順番に処理を行い、対応する値を結果の配列に格納します。

代替手段：Object.values()を使う方法

よりシンプルに書きたい場合は、Object.values()を使う方法もあります。このメソッドはオブジェクトの値だけを抽出して配列として返してくれるため、1行で変換が完了します。

const result = Object.values(obj);
console.log(result); // [ 'Rakesh', 'Dinesh', 'Mohit', 'Rajan', 'Ashish' ]

どちらの方法でも同じ結果が得られますが、キーの順序や数値変換を明示的に制御したい場合は最初の方法が便利です。用途に応じて使い分けるとよいでしょう。

出力結果

コンソールには以下のように出力されます。

[ 'Rakesh', 'Dinesh', 'Mohit', 'Rajan', 'Ashish' ]