JavaScriptで配列プロパティを持つオブジェクトを1つの配列にフラット化する最適な方法

例えば、次のように複数の配列を値として持つオブジェクトがあったとします。

const obj = {
    arr_a: [9, 3, 2],
    arr_b: [1, 5, 0],
    arr_c: [7, 18]
};

ここでは、このような「配列の集まりからなるオブジェクト」を引数として受け取り、すべての配列を1つに統合して平坦化（フラット化）した配列を生成するJavaScript関数を作成する必要があります。

そのため、最終的な出力配列は次のようになります。

const output = [9, 3, 2, 1, 5, 0, 7, 18];

実装例

const obj = {
    arr_a: [9, 3, 2],
    arr_b: [1, 5, 0],
    arr_c: [7, 18]
};
const objectToArray = (obj = {}) => {
    const res = [];
    for(key in obj){
        const el = obj[key];
        res.push(...el);
    };
    return res;
};
console.log(objectToArray(obj));

コードの解説

この関数では、for...in ループでオブジェクトの各キーを順番に取り出し、スプレッド構文（...）を使って各配列の要素を展開しながら結果配列へ push しています。これにより、すべての配列の要素が順序を保ちながら1つの配列に結合されます。

出力

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

[
    9, 3, 2, 1,
    5, 0, 7, 18
]

よりモダンな書き方：Object.values() と flat() を使う

ES2019以降の環境では、Object.values() で配列の一覧を取得し、flat() メソッドを組み合わせることで、さらに簡潔に記述できます。

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

console.log(objectToArray(obj));
// [9, 3, 2, 1, 5, 0, 7, 18]

どちらの方法でも同じ結果が得られますが、Object.values().flat() の方がコードが短く読みやすく、ネストした配列にも対応できるため、実務ではこちらのアプローチが推奨されます。