はじめに
配列に配列を追加しようと、定番の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 ]
きれいに並んだ！
失敗例
その１ 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個ですよ」とか返ってくる始末です。
その２ 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変数自体を変えたいのであれば、成功例のように書いて頂くと良いかと思います。
さいごに
走り書きで恐縮ですが、読んでいただいてありがとうございました。
間違いや、分かりにくい部分があれば、お気軽に編集リクエスト出していただければ幸いです。