【JavaScript】オブジェクトをキーと値のペアごとのオブジェクト配列に分割する方法

JavaScriptでは、1つのオブジェクトにまとめられた複数のキーと値のペアを、それぞれ独立したオブジェクトへ分割し、「オブジェクトの配列」として扱いたいケースがあります。本記事では、その実現方法を、実際に動作するサンプルコードとともにわかりやすく解説します。

元になるオブジェクト

例として、次のような10個のプロパティを持つオブジェクトを用意しました。

const obj = {
    "value 0": "value",
    "value 1": "value",
    "value 2": "value",
    "value 3": "value",
    "value 4": "value",
    "value 5": "value",
    "value 6": "value",
    "value 7": "value",
    "value 8": "value",
    "value 9": "value"
};

やりたいこと

このようなオブジェクトを1つ引数として受け取り、各キーと値のペアをそれぞれ個別のオブジェクトに分解した「新しいオブジェクトの配列」を返すJavaScript関数を作成する必要があります。

実装のポイント：Object.keys()とforEach()

基本的な考え方はシンプルです。Object.keys()メソッドで元のオブジェクトのすべてのキーを配列として取得し、forEach()で各キーを順番に処理しながら、キーと値のペアごとに新しいオブジェクトを生成して、結果用の配列に追加していきます。

サンプルコード

const obj = {
    "value 0": "value",
    "value 1": "value",
    "value 2": "value",
    "value 3": "value",
    "value 4": "value",
    "value 5": "value",
    "value 6": "value",
    "value 7": "value",
    "value 8": "value",
    "value 9": "value"
};
const separateObject = obj => {
    const res = [];
    const keys = Object.keys(obj);
    keys.forEach(key => {
        res.push({
            key: obj[key]
        });
    });
    return res;
};
console.log(separateObject(obj));

出力結果

コンソールには次のように出力されます。元のオブジェクトの各エントリが、1つのキーだけを持つ独立したオブジェクトとして配列に格納されているのが分かります。

[
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' }
]

応用：元のキー名も保持したい場合

上記の実装は各ペアを { key: 値 } という形式のオブジェクトに変換しますが、元のキー名（"value 0"、"value 1"など）もそのまま残したいケースもあるでしょう。そんなときは、Object.entries()とmap()を組み合わせると、より簡潔に書けます。

const separateObject = obj =>
    Object.entries(obj).map(([key, value]) => ({ [key]: value }));

console.log(separateObject(obj));
// [{ 'value 0': 'value' }, { 'value 1': 'value' }, ... ]

Object.keys()+forEach()を使った方法は処理の流れが直感的に理解しやすく、Object.entries()+map()を使った方法はコードを短くまとめられるという特徴があります。目的や可読性の要件に応じて使い分けるとよいでしょう。