【JavaScript】参照を保ったまま配列の末尾に要素を複数追加する

Tweet

Category JavaScript / Tagged vue 2019/03/04

問題

配列を参照を保ったまま他の配列とマージ（後ろに結合）するにはどうしたらよいですか。

var x = [1, 2, 3];
var y = [4, 5, 6];
var z = x;
x = x.concat(y);
console.log(x); // -> [1, 2, 3, 4, 5, 6]
console.log(y); // -> [4, 5, 6]
console.log(z); // -> [1, 2, 3]

Vueなどでリアクティブを保ちたいときによく困るのですが。-

答え

Array.prototype.concat()を使うと、非破壊に2つの配列をマージした配列を返してくれます。元の配列に追加してくれるわけではないです。返ってきた新しい配列を元の x に代入すると、参照は外れます。

元のxにyの各要素を追加するには、Array.prototype.push() やArray.prototype.splice() が使えます。

IEを無視すれば、スプレッド構文が楽です。

var x = [1, 2, 3];
var y = [4, 5, 6];
var z = x;
x.push(...y);
console.log(x); // -> [1, 2, 3, 4, 5, 6]
console.log(y); // -> [4, 5, 6]
console.log(z); // -> [1, 2, 3, 4, 5, 6]

var x = [1, 2, 3];
var y = [4, 5, 6];
var z = x;
x.splice(x.length, 0, ...y);
console.log(x); // -> [1, 2, 3, 4, 5, 6]
console.log(y); // -> [4, 5, 6]
console.log(z); // -> [1, 2, 3, 4, 5, 6]

残念ながらスプレッド構文はIEが未対応なので、IEを無視できない場合は、以下のように若干長くなるのはやむを得ないかと思います。

var x = [1, 2, 3];
var y = [4, 5, 6];
var z = x;
Array.prototype.push.apply(x, y);
console.log(x); // -> [1, 2, 3, 4, 5, 6]
console.log(y); // -> [4, 5, 6]
console.log(z); // -> [1, 2, 3, 4, 5, 6]