【JavaScript】オブジェクト配列の複数プロパティを1つの配列にマッピングする方法

はじめに

JavaScript開発では、オブジェクトの配列から特定のプロパティの値を取り出し、それらを1つのフラットな配列にまとめたい場面がよくあります。本記事では、その実装方法を具体的なコード例とともに解説します。

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

const arr = [
    {a: 1, b: 2},
    {a: 3, b: 4},
    {a: 5, b: 6}
];

ここで求められているのは、このようなオブジェクトの配列を引数として受け取り、各オブジェクトが持つプロパティの値をすべて抽出して、次のような数値リテラルの配列へとマッピングするJavaScript関数を作成することです。

const output = [1, 2, 3, 4, 5, 6];

reduce()を使った実装例

配列の reduce() メソッドを使うと、各オブジェクトから複数のプロパティ値を効率的に取り出し、1つの結果配列にまとめることができます。

const arr = [
    {a: 1, b: 2},
    {a: 3, b: 4},
    {a: 5, b: 6}
];
const pushToArray = (arr = []) => {
    const result = arr.reduce((acc, obj) => {
        acc.push(obj.a);
        acc.push(obj.b);
        return acc;
    }, []);
    return result;
};
console.log(pushToArray(arr));

コードのポイント

• reduce() の第2引数として初期値の空の配列 [] を渡しています。
• コールバック関数内で、各オブジェクトの a と b の値を順番にアキュムレータ（acc）へ追加しています。
• これにより、元の配列の順序を保ちながら、すべてのプロパティ値が1つの配列へフラット化されます。

実行結果

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

[ 1, 2, 3, 4, 5, 6 ]

代替手法：flatMap()を使う方法

よりシンプルに書きたい場合は、ES2019で導入された flatMap() メソッドも便利です。各オブジェクトから値の配列を作れば、自動的にフラット化されます。

const output = arr.flatMap(obj => [obj.a, obj.b]);
console.log(output); // [ 1, 2, 3, 4, 5, 6 ]

どちらの方法でも目的は達成できますが、flatMap() を使う方がコードが簡潔になり、可読性も向上します。状況に応じて使い分けると良いでしょう。