ホームページ > ウェブフロントエンド > jsチュートリアル > 異なる環境で JavaScript オブジェクトのクローンを効果的に作成するにはどうすればよいですか?

異なる環境で JavaScript オブジェクトのクローンを効果的に作成するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-31 03:12:17
オリジナル
626 人が閲覧しました

How to Effectively Clone JavaScript Objects in Different Environments?

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

JavaScript でオブジェクトを複製するには、元のオブジェクトから独立したコピーを作成する必要があります。クローンに加えた変更は元のクローンに影響を与えるべきではなく、その逆も同様です。

組み込みクローン作成 (ES2022)

ES2022 では、オブジェクトのクローンを作成する効率的で標準的な方法を提供する StructuredClone() が導入されました。循環参照を含む複雑なデータ構造のクローン作成をサポートします。

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

古いブラウザの手動クローン作成

structuraldClone() をサポートしていないブラウザの場合は、手動クローン作成プロセスが必要です。単純なオブジェクトは単純な割り当てで複製できますが、列挙不可能なプロパティやプロトタイプの継承を持つ複雑なオブジェクトには、より厳密なアプローチが必要です。

function clone(obj) {
  // Handle null, undefined, and simple types
  if (obj === null || typeof obj !== "object") return obj;

  // Clone custom Date objects
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }

  // Clone Arrays
  if (obj instanceof Array) {
    return obj.map(clone);
  }

  // Clone Objects
  if (obj instanceof Object) {
    let clone = {};
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        clone[key] = clone(obj[key]);
      }
    }
    return clone;
  }

  throw new Error("Unable to clone object. Its type is not supported.");
}
ログイン後にコピー

この関数は、Date オブジェクトと Array オブジェクトの特殊なケースを処理し、適切なコピーを保証します。

この手動クローン作成アプローチはより複雑ですが、より優れた柔軟性とサポートを提供します。単純な割り当てと比較して、より多くのデータ型を使用できます。循環参照のないデータ構造を前提としていることに注意することが重要です。そのような構造のクローンを作成すると無限再帰が発生する可能性があります。

以上が異なる環境で JavaScript オブジェクトのクローンを効果的に作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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