JavaScript を使用する場合、オブジェクトと配列を効果的に操作するには、浅いコピーと深いコピーの違いを理解することが不可欠です。これらの用語の意味と、各タイプのコピーをコードに実装する方法を詳しく見てみましょう。

浅いコピー
浅いコピーでは、元のコピーと同じ値を保持する新しいオブジェクトまたは配列が作成されます。ただし、元のファイルにネストされたオブジェクトまたは配列が含まれている場合、浅いコピーでは、構造自体ではなく、これらのネストされた構造への参照のみがコピーされます。これは、コピーされた構造内のネストされたオブジェクトまたは配列に対する変更は、元の構造にも影響を与えることを意味します。

浅いコピー方法の例:

1. 拡散演算子 ({...})

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

ここで、shallowCopy は新しいオブジェクトですが、shallowCopy.b はまだoriginal.b と同じオブジェクトを参照しています。

2.Object.assign()

const shallowCopy = Object.assign({}, original);

1. 配列スライスメソッド

const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();

ディープコピー
ディープ コピーでは、ネストされたすべてのオブジェクトと配列を含む、元の完全な独立したクローンである新しいオブジェクトまたは配列が作成されます。ディープ コピーへの変更はオリジナルには影響しません。またその逆も同様です。

ディープコピー方法の例:

1. JSON.stringify() と JSON.parse()

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

このメソッドは、オブジェクトを JSON 文字列にシリアル化し、それを解析して新しいオブジェクトに戻します。ただし、関数、未定義、または循環参照は処理しません。

2.再帰関数

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') return obj;

  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

1. StructuredClone() (最新の JavaScript 環境)

const deepCopy = structuredClone(original);

それぞれを使用する場合

• 浅いコピー: ネスト構造のない単純なオブジェクトまたは配列に適しています。より高速で、使用するメモリも少なくなります。ネストされたオブジェクトへの変更を元のオブジェクトとコピーの両方に反映する必要があるクイック コピーが必要な場合に使用します。

• ディープ コピー: 複雑なオブジェクトまたは入れ子構造の配列に必要です。これにより、コピーへの変更がオリジナルに影響を与えないことが保証されます。完全に独立したクローンが必要な場合に使用します。

これらの違いを理解すると、意図しない共有参照から発生するバグを防ぎ、アプリケーションのデータの整合性を確保できます