はじめに
配列のコピーはconst newArr = arr;と文字列と同じようにコピーしようとすると片方が更新された時にもう一方も変更がかかってしまいます。
知らなくて躓いてしまったので配列のコピーを備忘録として残しておきます。
何故できないのか
JavaScriptでは、配列はオブジェクトの一つであり、オブジェクトは参照の値渡しになるため、配列も参照渡しになります。
なので、変数にはオブジェクトの参照が格納されています。
const arr1 = [0, 1, 2];
// arr2にarr1に入っている参照を代入
const arr2 = arr1;
console.log(arr2);
//出力結果
//[0, 1, 2]
// arr2を変更
arr2[1] = 10;
// arr1でも変更される
console.log(arr1[1]);
////出力結果
//10
元の配列を参照しているだけなので、どちらかの値を変更するともう一方の配列の値も変わってしまうという事象が起こります。
そのため配列をコピーして新しく配列を作る場合には一工夫する必要があります。
コピーの仕方
concat
const newArr = [].concat(arr);
空の配列に元となる配列を繋げることで、配列をコピーし新しい配列を作っています。
slice
const newArr = arr.slice(0, arr.length);
コピーしたい配列から、スライスで初めから終わりまで値を切り取って新しい配列に格納することによってコピーしたい配列をコピーした新しい配列が作られます。
スプレッド構文
const newArr = [...arr];
角括弧の中で...の後にコピーしたい配列名を入れるとその配列をコピーした新しい配列を作成することができます。
Array.from
const newArr = Array.from(arr);
配列のオブジェクトや反復可能オブジェクトから、シャローコピーの Arrayインスタンスを生成します。
map
const newArr = arr.map( x => x );
配列から各要素に処理を加えて新しい配列を作ることができます。
何も処理を加えなかった場合はオリジナルの配列をそのままコピーした配列を作れますが、処理速度が速くないので配列をコピーしたいだけの場合はあまりおすすめではないです。
ディープコピー
二重配列の場合
上記の方法で二重配列のコピーでできなかったので調べてみました。
const newArr = JSON.parse(JSON.stringify(arr));
JSON.parse()メソッドは文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築します。