[JavaScript]要素がオブジェクトの配列を展開する方法がわからない

Question

前提・実現したいこと

要素がオブジェクトの配列をある一つの配列にしたいのですが、普通にpushしてしまうと以下のように2次元配列になってしまいます。
どのようにすれば、中身だけが展開されるのでしょうか。
ご教授お願いします。

該当のソースコード

res = [];
array = [{hoge: "hoge", ...}, {}, ...        {}]
res.push(array) //[[{}, {}, ...]]となる
// [{}, {}, ...]としたい

###試したこと
res.push(...array);

TypeError: Invalid attempt to spread non-iterable instance.

Answer 1

res.push(...array);

するか、concatでresを置き換えるか

Comments

[aiai8976]

試しましたが、上に書いているようなエラーが出ました

[aiai8976]

渡している配列そのものを変更すれば解決しました。

Answer 2

既に回答されている方もおりますが、補足として・・・
今回の例ならArray.from()やflat()でも同じことができます。

res = [];
array = [{hoge: "hoge", ...}, {}, ...        {}]
res.push(array) //[[{}, {}, ...]]となる

hoge = Array.from(...res);
fuga = res.flat();

Answer 3

• push

pushは配列の中身を直接変更し、要素を1つ追加するみたいなイメージです。直接変更するのでimmutableだと使えません。

hoge = [];
hoge.push(fuga);
// => hoge = [fuga]

今回はfugaの部分が配列になってしまっています。

hoge = [];
fuga = [1,2,3];
hoge.push(fuga);
// => hoge = [ [1,2,3] ]

• concat

concatは配列を連結したものを返します。中身を直接変更するわけでは無いので、代入してあげないといけません。(mutableなら再代入でも可)

hoge = [1,2];
fuga = [3,4];
puni = hoge.concat(fuga);
// => hoge = [1,2]
//    puni = [1,2,3,4]

• 展開代入

展開代入は、1個ずつ要素を取り出して代入します。
元の値は無視するので、「追加する」場合は使えません。
これも代入なので、immutableの場合使えません。

hoge = [1,2];
fuga = [3,4];
hoge = [...fuga];
// => hoge = [3,4];