はじめに

配列のコピーはconst newArr = arr;と文字列と同じようにコピーしようとすると片方が更新された時にもう一方も変更がかかってしまいます。
知らなくて躓いてしまったので配列のコピーを備忘録として残しておきます。

何故できないのか

JavaScriptでは、配列はオブジェクトの一つであり、オブジェクトは参照渡しになるため、配列も参照渡しになります。
なので、変数にはオブジェクトの参照が格納されています。

constarr1=[0,1,2];// arr2にarr1に入っている参照を代入constarr2=arr1;console.log(arr2);//出力結果//[0, 1, 2]// arr2を変更arr2[1]=10;// arr1でも変更されるconsole.log(arr1[1]);////出力結果　//10

元の配列を参照しているだけなので、どちらかの値を変更するともう一方の配列の値も変わってしまうという事象が起こります。
そのため配列をコピーして新しく配列を作る場合には一工夫する必要があります。

コピーの仕方

concat

constnewArr=[].concat(arr);

空の配列に元となる配列を繋げることで、配列をコピーし新しい配列を作っています。

slice

constnewArr=arr.slice(0,arr.length);

コピーしたい配列から、スライスで初めから終わりまで値を切り取って新しい配列に格納することによってコピーしたい配列をコピーした新しい配列が作られます。

スプレッド構文

constnewArr=[...arr];

角括弧の中で...の後にコピーしたい配列名を入れるとその配列をコピーした新しい配列を作成することができます。

Array.from

constnewArr=Array.from(arr);

配列のオブジェクトや反復可能オブジェクトから、シャローコピーの Arrayインスタンスを生成します。

map

constnewArr=arr.map(x=>x);

配列から各要素に処理を加えて新しい配列を作ることができます。
何も処理を加えなかった場合はオリジナルの配列をそのままコピーした配列を作れますが、処理速度が速くないので配列をコピーしたいだけの場合はあまりおすすめではないです。

ディープコピー

二重配列の場合

上記の方法で二重配列のコピーでできなかったので調べてみました。

constnewArr=JSON.parse(JSON.stringify(arr));

JSON.parse()メソッドは文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築します。

参考リンク

Javascriptの配列をコピーする方法の処理速度を比べてみた