ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript オブジェクトの真のディープ コピーを作成するにはどうすればよいですか?

JavaScript オブジェクトの真のディープ コピーを作成するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-26 02:03:10
オリジナル
749 人が閲覧しました

How to Create a True Deep Copy of a JavaScript Object?

JavaScript オブジェクトを正しく複製する方法

JavaScript オブジェクトの複製は、さまざまなプログラミング シナリオにおいて重要なタスクです。ただし、元のオブジェクトに加えられた変更の影響を受けないオブジェクトのコピーを作成することは、JavaScript のオブジェクト システムの複雑さのため、困難な場合があります。

ネイティブ コピー メソッドの落とし穴

JavaScript のネイティブ オブジェクトの割り当て演算子 (例: x = y) は、元のオブジェクトへの参照のみを作成します。 x または y のいずれかを変更すると、両方のオブジェクトに影響します。さらに、組み込み JavaScript オブジェクト (配列、日付など) から派生したオブジェクトをコピーすると、不要なプロパティが導入される可能性があります。

包括的なクローン作成ソリューション

JavaScript オブジェクトのディープ コピーを作成するには、次の包括的なソリューション:

function clone(obj) {
  if (null == obj || "object" != typeof obj) return obj;

  var copy = obj.constructor();
  for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
  }
  return copy;
}
ログイン後にコピー

この関数は、再帰的アプローチを採用してオブジェクトのプロパティを走査し、別個のオブジェクトを使用して新しいオブジェクトを作成します。各プロパティ値のインスタンス。これは、列挙不可能なプロパティや非表示のプロパティを除外しながら、null、未定義、およびさまざまな組み込みオブジェクト タイプのケースを処理します。

エッジ ケースと仮定

このソリューションはほとんどのシナリオをカバーしていますが、次のことを前提としています。オブジェクト データがツリー構造を形成していること、つまりオブジェクト内に循環参照がないことを意味します。また、クローン オブジェクトを適切にインスタンス化するには、オブジェクトのコンストラクターに関する知識も必要です。

構造化クローン (ES2022 アップデート)

最新のブラウザでは、構造化クローン標準により、より堅牢かつ効率的な方法が提供されます。オブジェクトのディープコピーを作成します。 StructuredClone() 関数は、非表示のプロパティと循環参照を保持しながら、オブジェクト全体のクローンを作成します。

const clone = structuredClone(object);
ログイン後にコピー

オブジェクトのクローン作成は複雑なタスクになる可能性があることに注意し、特定の要件に基づいて各アプローチの制限を考慮してください。アプリケーションの

以上がJavaScript オブジェクトの真のディープ コピーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート