JavaScript のシャロー コピーとディープ コピー: 例とベスト プラクティス

JavaScript でオブジェクトや配列を操作する場合、データ構造のコピーを作成するのが一般的なタスクです。ただし、開発者は、浅いコピーと深いコピーのどちらを使用するかを決定する際に、多くの場合課題に直面します。違いを誤解すると、コードに意図しない副作用が生じる可能性があります。これらの概念、その違い、それぞれをいつ使用するかについて詳しく見ていきましょう。

? 電子ブックをダウンロード - JavaScript: ES2015 から ES2023 まで

浅いコピーとは何ですか?

浅いコピーは、元のオブジェクトの最上位プロパティのコピーを使用して新しいオブジェクトを作成します。プリミティブであるプロパティ (数値、文字列、ブール値など) の場合、値自体がコピーされます。ただし、オブジェクトであるプロパティ (配列やネストされたオブジェクトなど) の場合、参照のみがコピーされ、実際のデータはコピーされません。

これは、新しいオブジェクトには最上位プロパティの独自のコピーがありますが、ネストされたオブジェクトまたは配列は元のオブジェクトとコピーの間で共有されたままであることを意味します。

浅いコピーの例

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

浅いコピーを作成する方法

1. スプレッド演算子 (...) の使用:

   const shallowCopy = { ...originalObject };

1. Object.assign() の使用:

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

これらのメソッドは高速で簡単ですが、深くネストされたオブジェクトには適していません。

ディープコピーとは何ですか?

ディープ コピーは、元のオブジェクトのすべてのプロパティとサブプロパティを複製します。これにより、コピーがオリジナルから完全に独立し、コピーへの変更が元のオブジェクトに影響を与えないことが保証されます。

ディープ コピーは、ネストされたオブジェクトや配列などの複雑なデータ構造を扱う場合、特にデータの整合性が重要なシナリオでは不可欠です。

ディープコピーの例

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

ディープコピーを作成する方法

1. JSON.stringify() と JSON.parse() の使用:
   • オブジェクトを JSON 文字列に変換し、それを解析して新しいオブジェクトに戻します。
   • 制限事項:
     • 循環参照を処理できません。
     • 関数、未定義、シンボルなどのプロパティを無視します。

   const shallowCopy = { ...originalObject };

1. ライブラリの使用:
   • Lodash のようなライブラリは、堅牢なディープ クローン作成方法を提供します。

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

1. カスタム再帰関数:
   • 完全に制御するには、ネストされたオブジェクトのクローンを作成する再帰関数を作成できます。

浅いコピーと深いコピーの比較

浅いコピーを使用する場合

• フラット オブジェクト: ネストされたプロパティのない単純なオブジェクトを扱う場合。
• パフォーマンス: 速度が重要であり、深くネストされたデータを処理する必要がない場合。
• 一時的な変更: 最上位のプロパティを変更するが、ネストされたデータを共有する場合。

使用例

ユーザーの設定オブジェクトをコピーして簡単に調整する:

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

ディープコピーを使用する場合

• 複雑な構造: 複数レベルのネストを持つオブジェクト用。
• 副作用の回避: コピーの変更がオリジナルに影響を与えないようにする必要がある場合。
• 状態管理: React や Redux などのフレームワークでは、不変性が重要です。

使用例

ゲームまたはアプリケーションの状態の複製:

   const shallowCopy = { ...originalObject };

よくある間違いと落とし穴

1. 浅いコピーが常に十分であると仮定する:

   • 開発者は、ネストされたオブジェクトに対してシャロー コピー メソッドを誤って使用することがよくあり、元のデータに意図しない変更が発生します。

2. JSON メソッドの過剰使用:

   • JSON.stringify/JSON.parse は単純ですが、すべてのオブジェクト (メソッドや循環参照を含むオブジェクトなど) に対して機能するわけではありません。

3. パフォーマンスの無視:

   • ディープ コピー メソッドは、特に大きなオブジェクトの場合、速度が遅くなる可能性があるため、慎重に使用してください。

結論

シャロー コピーとディープ コピーの違いを理解することは、バグのない JavaScript コードを作成するために不可欠です。浅いコピーはフラットな構造では効率的ですが、深いコピーは複雑なネストされたオブジェクトには不可欠です。データ構造とアプリケーションのニーズに基づいて適切な方法を選択し、各アプローチの制限を理解して潜在的な落とし穴を回避してください。

? 電子ブックをダウンロード - JavaScript: ES2015 から ES2023 まで

以上がJavaScript のシャロー コピーとディープ コピー: 例とベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。