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にも影響が及ぶことを確認しています。
リスキリングでキャリアアップしてみませんか?
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大70%のキャッシュバックを受けることができます。
最大70%の給付金が出るおすすめのプログラミングスクール!
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります!
興味のある方はすぐに確認しましょう。
この記事のまとめ
配列のディープコピーとシャローコピーについて解説しました。
- 配列の複製には、ディープコピーとシャローコピーの2つの方法がある
- ディープコピーは配列の全ての要素を複製しているため、参照先のオブジェクトが変更されても原配列に影響が及ばない。
- シャローコピーは配列の一部を参照しているため、参照先のオブジェクトが変更されると原配列にも影響が及ぶ。
- 配列をディープコピーするには、JSON.parse(JSON.stringify())やlodashの_.cloneDeepなどを使用する。
- 配列をシャローコピーするには、スプレッド演算子やArray.sliceなどを使用する。
JavaScriptで配列を複製する方法についてディープコピーとシャローコピーの違いがよくわかりました!
配列を複製する際は、必要に応じてディープコピーかシャローコピーかを選択することが重要です。
特に、オブジェクトや配列を含む配列を複製する場合は、必ずディープコピーを使用するようにしましょう。
コメント