JavaScript
多次元配列
配列
Push
concat

[JS]配列に配列をpushしたら、勝手に二次元配列になる件


はじめに

配列に配列を追加しようと、定番のpushメソッドを使ってみたら、


失敗例①

let base = [];

let add1 = [ 1, 2, 3 ];
let add2 = [ 4, 5, 6 ];

base.push(add1);
base.push(add2);
console.log(base);



実行結果:失敗例①

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


・・・こうなりました。

間違ってはないけど、もうちょっと綺麗に並べたい・・・

ってなったので、調べた結果を共有します。


今回のコード


成功例

let base = [];

let add1 = [ 1, 2, 3 ];
let add2 = [ 4, 5, 6 ];

base = base.concat(add1);
base = base.concat(add2);
console.log(base);



実行結果:成功例

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


きれいに並んだ!


失敗例


その1 pushをフツーに使ったパターン


失敗例①

let base = [];

let add1 = [ 1, 2, 3 ];
let add2 = [ 4, 5, 6 ];

base.push(add1);
base.push(add2);
console.log(base);



実行結果:失敗例①

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


はじめに書いた通り、普通にpushしたらこうなる。

.lengthで個数を調べたりしたら、

「中身2個ですよ」とか返ってくる始末です。


その2 concatをというメソッドを知り、希望を託すも惨敗したパターン


失敗例②

let base = [];

let add1 = [ 1, 2, 3 ];
let add2 = [ 4, 5, 6 ];

base.concat(add1);
base.concat(add2);
console.log(base);



実行結果:失敗例②

[]


もう、なんも入ってませんやん。

一周回って、笑えるやつ。


ざっくり解説

pushは、元の配列に値を追加するときによく使われるメソッドです。

しかし、追加する値が配列だった場合、失敗例①のように、二次元配列になって追加されてしまいます。

どうも、かゆいところに手が届かない。

そこで、他のメソッドを調べたら、出てくるのがconcatメソッド。

これは、追加するというより、結合するというメソッドだそうです。

しかし油断するなかれ。

そのまま、失敗例①のpushメソッドをconcatメソッドに書き直しても、失敗例②のようになります。

一周回って笑うしかありません。

僕は、笑いました。

これは、pushが破壊的メソッドと表現されるのに対して、concatは非破壊的メソッドと表現されるものだからだそうです。

つまり、pushメソッドは、base変数に付くとともに、元の空配列であったbase変数を破壊し、add1変数やadd2変数が追加された変数へと姿形を変えてしまいます。これに対して、concatメソッドは、元の空配列であるbase変数を破壊しません。そのままです。

なので、失敗例②は元の空配列であるbase変数が出力されて、こうなってしまったんですね。

base変数自体を変えたいのであれば、成功例のように書いて頂くと良いかと思います。


さいごに

走り書きで恐縮ですが、読んでいただいてありがとうございました。

間違いや、分かりにくい部分があれば、お気軽に編集リクエスト出していただければ幸いです。