JavaScriptでオブジェクトを2次元配列に変換する方法【サンプルコード付き】

ここでは、ある都市の天気情報を持つ次のようなオブジェクトを例に考えてみます。

const obj = {
    city: "New Delhi",
    maxTemp: 32,
    minTemp: 21,
    humidity: 78,
    aqi: 456,
    day: 'Tuesday',
};

このオブジェクトを引数として受け取り、元のオブジェクトをもとに「配列の中に配列が入った2次元配列」を構築するJavaScript関数を作成します。各サブ配列には、必ず次の2つの要素が含まれるようにします。

• 対応するキー

• そのキーの値

したがって、上記のオブジェクトの場合、期待される出力は次のようになります。

const output = [
    [ 'city', 'New Delhi' ],
    [ 'maxTemp', 32 ],
    [ 'minTemp', 21 ],
    [ 'humidity', 78 ],
    [ 'aqi', 456 ],
    [ 'day', 'Tuesday' ]
];

実装例

以下がそのコードです。

const obj = {
    city: "New Delhi",
    maxTemp: 32,
    minTemp: 21,
    humidity: 78,
    aqi: 456,
    day: 'Tuesday',
};
const objectToArray = (obj = {}) => {
    const res = [];
    const keys = Object.keys(obj);
    for(key of keys){
        res.push([
            key, obj[key]
        ]);
    };
    return res;
};
console.log(objectToArray(obj));

コードの解説

まずObject.keys()を使って、オブジェクトのすべてのキーを配列として取得します。続いてforループで各キーを順に処理し、「キー」と「その値」からなる新しいサブ配列を生成して、結果用の配列へ追加していきます。最後に、完成した2次元配列を返します。

出力

コンソールへの出力は次のとおりです。

[
    [ 'city', 'New Delhi' ],
    [ 'maxTemp', 32 ],
    [ 'minTemp', 21 ],
    [ 'humidity', 78 ],
    [ 'aqi', 456 ],
    [ 'day', 'Tuesday' ]
];

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

ES2017以降では、Object.entries()メソッドを使うことで、同じ処理を1行で実現できます。

const objectToArray = (obj = {}) => Object.entries(obj);

console.log(objectToArray(obj));

Object.entries()は、オブジェクト自身の列挙可能なプロパティを「[キー, 値]」というペアの配列として返すため、まさに今回求められている形式の出力が得られます。手動でループを記述する必要がないため、コードが簡潔になり、可読性・保守性の面でも優れたアプローチと言えます。