【JavaScript】参照を保ったまま配列を空にする

Tweet

Category JavaScript / Tagged vue 2019/03/03

問題

配列を参照を保ったまま空にするにはどうしたらよいですか。

var x = [1, 2, 3];
var y = x;
x[1] = 5;
console.log(y); // -> [1, 5, 3]
x = [];
console.log(y); // -> [1, 5, 3] 空にならない

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

答え

Array.prototype.splice() を使いましょう。

丁寧に引数を2個指定するなら、

x.splice(0, x.length);

第2引数を省略すると開始位置以降をすべて取り除いてくれるので、空にしたいのであれば、以下でよい。

x.splice(0);

実行結果

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