【JavaScript】Object.keys()とreduce()を使ってオブジェクトの配列値を単一の値に変換する方法

はじめに

JavaScriptでは、オブジェクトの各キーが持つ配列から特定の要素だけを取り出し、新しいオブジェクトの配列として整形したいケースがあります。本記事では、Object.keys()とreduce()を組み合わせて、配列形式のプロパティ値をその2番目の要素へ変換する方法を解説します。

元となるデータ

例えば、次のようなオブジェクトの配列があるとします。各キーには2つの要素を持つ配列が格納されています。

const arr = [
    {
        col1: ["a", "b"],
        col2: ["c", "d"]
    },
    {
        col1: ["e", "f"],
        col2: ["g", "h"]
    }
];

期待する出力

このような配列を受け取り、各キーの値を配列の2番目の要素（インデックス1）だけに置き換えた、以下のような出力を返す関数を作成します。

const output = [
    {
        col1: "b",
        col2: "d"
    },
    {
        col1: "f",
        col2: "h"
    }
];

つまり、もともと配列だったオブジェクトの各キーの値を単一の値へ変換し、その値として元の配列の2番目の要素を採用するということです。

実装コード

実装は以下のとおりです。reduce()で結果配列を組み立てながら、各オブジェクトに対してObject.keys()でキーを列挙し、対応する配列の2番目の要素を新しいオブジェクトに代入していきます。

const arr = [
    {
        col1: ["a", "b"],
        col2: ["c", "d"]
    },
    {
        col1: ["e", "f"],
        col2: ["g", "h"]
    }
];
const reduceArray = (arr = []) => {
    const res = arr.reduce((s, a) => {
        const obj = {};
        Object.keys(a).map(function(c) {
            obj[c] = a[c][1];
        });
        s.push(obj);
        return s;
    }, []);
    return res;
};
console.log(reduceArray(arr));

実行結果

コンソールへの出力結果は次のようになります。

[ { col1: 'b', col2: 'd' }, { col1: 'f', col2: 'h' } ]

コードのポイント

• Object.keys(): オブジェクトのすべてのキー名を配列として取得し、1つずつ反復処理できます。
• a[c][1]: キーcに紐づく配列の2番目の要素（インデックス1）を参照しています。
• reduce(): 初期値[]から始めて、変換後のオブジェクトを順に蓄積し、最終的な配列を生成します。

なお、キーを反復処理して新しいオブジェクトを作るだけであれば、map()の代わりにfor...ofループやforEach()を使っても同様の結果が得られます。また、より簡潔に書きたい場合は、arr.map(obj => Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, v[1]])))のようにObject.entries()とObject.fromEntries()を活用する方法もあります。