ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript オブジェクトを適切に複製するにはどうすればよいですか?

JavaScript オブジェクトを適切に複製するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2025-01-03 16:36:43147ブラウズ

How to Properly Clone a JavaScript Object?

JavaScript オブジェクトを正確に複製する方法

JavaScript でオブジェクトを複製することは、データの整合性を維持し、予期しない変更を防ぐために不可欠です。ただし、オブジェクトの単純なコピーを作成すると、意図しない変更が誤って導入される可能性があります。 JavaScript でオブジェクトのクローンを確実に成功させるための包括的なガイドは次のとおりです:

構造化クローン (最新のソリューション):

最新のブラウザの場合、構造化クローン (ES2020 で導入)簡単で信頼性の高いソリューションを提供します:

const clone = structuredClone(object);

このメソッド不要な要素を一切含まず、すべてのプロパティを含むオブジェクトの正確なコピーを生成します。

従来のアプローチ:

以前のブラウザ バージョンの場合、オブジェクトのクローンを作成するには、さらに関与するプロセス:

回避ショートカット:

組み込み JavaScript オブジェクトから派生したオブジェクトをコピーすると、追加のプロパティが導入される可能性があります。これを防ぐには、リテラルで構築されたオブジェクトのみを複製します。

プロトタイプ継承の処理:

通常、新しいオブジェクトはプロトタイプからプロパティを継承します。この動作を模倣するには、継承されたプロパティをクローン オブジェクトに手動で転送する必要があります。

非ローカル属性を除外する:

列挙不可能なプロパティは、デフォルトでは継承されません。 。 hasOwnProperty メソッドを使用して、プロトタイプからそのような属性をフィルターで除外します。

非表示プロパティを検討する:

特定のオブジェクトには、プロトタイプや __proto__ など、非表示のプロパティがあります。列挙を通じてアクセスできます。これらのプロパティは個別に処理する必要があります。

日付オブジェクトの処理:

日付オブジェクトには、日付値を含む非表示のデータ プロパティがあります。同じ日付を保持するには、複製された Date オブジェクトに対して setTime を呼び出します。このアプローチは Date オブジェクトに固有であることに注意してください。

複雑なデータ型:

オブジェクトに配列や他のオブジェクトなどの複雑なデータ型が含まれる場合、これらも複製する必要があります。再帰的に完全なコピーを確保します。

クローン作成機能:

次の原則に従った包括的なクローン作成関数を次に示します:

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;
}

制限事項:

これに注意することが重要です。関数は、限られたデータ型のセットを想定しており、循環参照や、それを超える非表示のプロパティを持つオブジェクトは処理しません。

以上がJavaScript オブジェクトを適切に複製するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。