JavaScriptでオブジェクトを配列に変換する方法｜キーと値のペアを配列化する実装例

はじめに

JavaScriptでは、オブジェクトのデータを配列形式に変換したい場面がよくあります。たとえば、次のようなキーと値のペアを持つオブジェクトがあるとしましょう。

const obj = {
    name: "Vikas",
    age: 45,
    occupation: "Frontend Developer",
    address: "Tilak Nagar, New Delhi",
    experience: 23,
    salary: "98000"
};

今回の課題は、このオブジェクトを引数として受け取り、各サブ配列が1つのキーと値のペアに対応する「配列の配列」を返す関数を作成することです。

実装方法

まずObject.keys()メソッドでオブジェクトのすべてのキーを取得し、その後ループ処理によって各キーと対応する値を組み合わせた配列を順番に構築していきます。

const obj = {
    name: "Vikas",
    age: 45,
    occupation: "Frontend Developer",
    address: "Tilak Nagar, New Delhi",
    experience: 23,
    salary: "98000"
};

const objectToArray = obj => {
    const keys = Object.keys(obj);
    const res = [];
    for(let i = 0; i < keys.length; i++){
        res.push([keys[i], obj[keys[i]]]);
    };
    return res;
};

console.log(objectToArray(obj));

実行結果

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

[
    [ 'name', 'Vikas' ],
    [ 'age', 45 ],
    [ 'occupation', 'Frontend Developer' ],
    [ 'address', 'Tilak Nagar, New Delhi' ],
    [ 'experience', 23 ],
    [ 'salary', '98000' ]
]

コードの解説

処理の流れは次の通りです。

1. Object.keys(obj) でオブジェクトの全キーを配列として取得
2. キーの個数分だけforループを実行
3. 各周回で [キー, 値] のペアを作成し、結果格納用の配列にpush
4. 完成した配列の配列をreturnで返す

もっと簡単な方法：Object.entries()を使う

ES2017（ES8）以降では、Object.entries()メソッドを使うことで、同じ結果をわずか1行で得られます。

const result = Object.entries(obj);
console.log(result); // objectToArray関数と同じ出力になる

Object.entries()は、オブジェクト自身の列挙可能なプロパティを [キー, 値] のペアからなる配列として返してくれるため、自前でループを書く必要がありません。モダンなJavaScript開発では、この方法が標準的かつ推奨されています。

まとめ

オブジェクトを配列の配列に変換するには、Object.keys()とループを組み合わせる方法と、Object.entries()を使う方法があります。後者のほうがコードが簡潔で可読性も高いため、特別な理由がない限りObject.entries()の活用をおすすめします。