【JavaScript】オブジェクトの配列を配列の配列に変換する方法

はじめに

JavaScriptでは、データ処理やグラフ描画ライブラリへのデータ受け渡しなどの場面で、「オブジェクトの配列」を「配列の配列（2次元配列）」に変換したいことがあります。

例えば、次のようなオブジェクトの配列があったとします。

const arr = [
    {"Date":"2014","Amount1":90,"Amount2":800},
    {"Date":"2015","Amount1":110,"Amount2":300},
    {"Date":"2016","Amount1":3000,"Amount2":500}
];

この配列を受け取り、各オブジェクトを配列に変換して、次のような「配列の中に配列が入った構造」へマッピングする関数を作成する必要があります。

const output = [
    ['2014', 90, 800],
    ['2015', 110, 300],
    ['2016', 3000, 500]
];

実装例

この変換は、Object.values()メソッドを使うことで簡単に実装できます。Object.values()は、オブジェクトのすべての値を要素として持つ配列を返すメソッドです。

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

const arr = [
    {"Date":"2014","Amount1":90,"Amount2":800},
    {"Date":"2015","Amount1":110,"Amount2":300},
    {"Date":"2016","Amount1":3000,"Amount2":500}
];

const arrify = (arr = []) => {
    const res = [];
    const { length: l } = arr;
    for(let i = 0; i < l; i++){
        const obj = arr[i];
        const subArr = Object.values(obj);
        res.push(subArr);
    }
    return res;
};

console.log(arrify(arr));

コードの解説

• arrify関数: 引数として受け取った配列を走査し、各要素を処理します。
• Object.values(obj): 各オブジェクトからキー（Date、Amount1、Amount2）を取り除き、値のみを配列として取得します。
• res.push(subArr): 変換した配列を結果用の配列に追加していきます。

実行結果

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

[ [ '2014', 90, 800 ], [ '2015', 110, 300 ], [ '2016', 3000, 500 ] ]

補足：map()を使ったより簡潔な書き方

map()メソッドを使えば、同じ処理をより簡潔に1行で書くことも可能です。

const output = arr.map(obj => Object.values(obj));
console.log(output); // 同じ結果が出力されます

どちらの方法でも結果は同じですが、map()を使った方がコードが短く、意図も伝わりやすいでしょう。