JavaScript　配列の複製方法 – ディープコピーとシャローコピーの違い

JavaScriptで配列を複製する方法について、ディープコピーとシャローコピーの違いを解説します。

配列を複製するにはどうしたらいいですか？

配列を複製するには、ディープコピーとシャローコピーの2つの方法があります。
ディープコピーでは配列の中身もコピーされ、シャローコピーでは配列自体のコピーのみ行われます。

ディープコピーとシャローコピーの違い

　ディープコピーでは、参照先のオブジェクトもコピーします。そのため、参照先のオブジェクトを変更しても、元の配列は変更されません。

　一方、シャローコピーでは、参照先のオブジェクト自体はコピーしません。そのため、参照先のオブジェクトを変更すると、元の配列も変更されます。

ディープコピーを使った配列の複製方法

　ディープコピーは配列の中身（要素）も新しい配列としてコピーします。
そのため、元の配列とは別のメモリ領域を使用し、元の配列に影響を与えないことが保証されます。

以下は、JSON.parse(JSON.stringify())を使用したディープコピーのサンプルです。

let originalArray = [{a: 1}, {b: 2}];
let deepCopyArray = JSON.parse(JSON.stringify(originalArray));
console.log(deepCopyArray); // [{a: 1}, {b: 2}]

上記のプログラムでは、JSON.parse(JSON.stringify())関数を使用して、originalArray配列をdeepCopyArrayにディープコピーを行っています。

シャローコピーを使った配列の複製方法

　シャローコピーは配列自体を新しい配列としてコピーします。
そのため、元の配列と同じメモリ領域を使用するため、元の配列に影響を与える可能性があります。

配列をシャローコピーするにはいくつか方法があります。

・sliceメソッドを使った配列コピーのサンプル

let originalArray = [1, 2, 3];
let shallowCopyArray = originalArray.slice();
console.log(shallowCopyArray); // [1, 2, 3]

・assignメソッドを使った配列コピーのサンプル

let originalArray = [1, 2, 3];
let shallowCopyArray = Object.assign([], originalArray);
console.log(shallowCopyArray); // [1, 2, 3]

・spread演算子(…)を使った配列コピーのサンプル

let originalArray = [1, 2, 3];
let shallowCopyArray = [...originalArray];
console.log(shallowCopyArray); // [1, 2, 3]

「lodash」ライブラリのcloseメソッドを使った配列コピーの方法

　JavaScriptのlodashライブラリには、オブジェクトのディープコピーとシャローコピーを行うためのメソッドが用意されています。

以下に、配列をディープコピーするサンプルプログラムを示します。

const _ = require('lodash');

const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);

console.log(original); // { a: 1, b: { c: 2 } }
console.log(copy); // { a: 1, b: { c: 2 } }

original.a = 2;
original.b.c = 3;

console.log(original); // { a: 2, b: { c: 3 } }
console.log(copy); // { a: 1, b: { c: 2 } }

　上記のサンプルでは、lodashのcloneDeepメソッドを使用して、originalというオブジェクトのディープコピーを作成しています。そして、originalとcopyを比較し、originalのプロパティを変更した場合にもcopyには影響を及ぼさないことを確認しています。

次に、配列をシャローコピーするサンプルプログラムを示します。

const original = { a: 1, b: { c: 2 } };
const copy = _.clone(original);

console.log(original); // { a: 1, b: { c: 2 } }
console.log(copy); // { a: 1, b: { c: 2 } }

original.a = 2;
original.b.c = 3;

console.log(original); // { a: 2, b: { c: 3 } }
console.log(copy); // { a: 2, b: { c: 3 } }

　上記のサンプルでは、lodashのcloneメソッドを使用して、originalというオブジェクトのシャローコピーを作成しています。そして、originalとcopyを比較し、originalのプロパティを変更した場合にもcopyにも影響が及ぶことを確認しています。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。