JavaScript の StructuredClone() を使用してディープ オブジェクトのクローンを作成する方法

目次

• はじめに
• StructuredClone の理解と使用
• 結論

導入

JavaScript でスプレッド演算子 (...) を使用してオブジェクトをコピーしようとした結果、元のオブジェクトに加えた変更が依然としてコピーに影響していることに気付いたことがありますか?オリジナルから独立したコピーを期待していたのに、結果的にオリジナルにリンクされたコピーが存在する場合、イライラすることがあります。これは深いオブジェクトを扱うときによくある問題であり、予期しないバグにつながる可能性があります。ありがたいことに、JavaScript にはこの問題を解決する StructuredClone() メソッドがあります

StructuredClone() の理解と使用

まず、JavaScript の StructuredClone() メソッドは、配列、オブジェクト、その他の複雑なデータ型などのネストされた構造を持つオブジェクトを含む、オブジェクトのディープ コピーを作成するために使用されます。

あなたは疑問に思っているかもしれません: コピー とは正確には何ですか? JavaScript には何種類のコピーがあるのでしょうか? 浅いコピーと深いコピーがあります。 StructuredClone() が後者を作成することはわかっていますが、スプレッド演算子を使用すると前者が作成されます。

浅いコピーは、オブジェクトのトップレベルのプロパティのみをコピーします。つまり、ネストされたオブジェクトまたは配列は、引き続き元のオブジェクトから参照されます。一方、ディープコピーは、ネストされた構造を含むすべてを複製し、クローンがオリジナルから完全に独立していることを保証します。

JavaScript での浅いコピーと深いコピーの例をいくつか見てみましょう

浅いコピーの例

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

上記のコードから次のことが言えます:

• name プロパティはプリミティブ値であるため、浅いコピー(personClone.name = "Jane Doe";) で変更しても、元の (person.name) には影響しません
• langages 配列は非プリミティブであるため、オリジナル (person) とクローン (personClone) の両方が同じ参照を共有します。 personClone 配列を変更すると、元の person 配列に影響します

ディープコピーの例

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

上記のコードから、次のように結論付けることができます:

• person === deepClonedperson は、structuraldClone() が新しい独立したオブジェクトを作成することを確認します。
• person.langers === deepClonedperson.langers は、ネストされた配列も個別にコピーされることを示しています。
• person.name === deepClonedperson.name をチェックすると、ディープ クローンへの変更が元のオブジェクトに影響を与えないことが検証されます。
• 言語の値は、ディープ クローン (deepClonedperson) への変更がオリジナル (person) に反映されないことを示しています

結論

この記事では、structuredClone() メソッドがオブジェクトのディープ コピーを作成する信頼性の高い方法を提供し、ネストされた構造が元の構造から完全に独立していることを確認する方法について説明しました。

この記事を最後まで読んでいただきありがとうございます。この記事が役に立ったと思われた場合は、JavaScript のディープ コピーについて学習することで恩恵を受ける可能性がある他の人とこの記事を「いいね！」して共有してください

このトピックについてどう思いますか? JavaScript でオブジェクトをコピーするための他のテクニックを見つけたことがありますか?以下のコメントセクションでお気軽にあなたの洞察を共有してください。

追伸 私は現在、フロントエンド開発者の機会を探しています。見込み客をお持ちの場合、または採用を検討している場合は、お気軽に私の履歴書をチェックするか、LinkedIn で私と連絡を取ってください。ぜひご意見をお待ちしております!

以上がJavaScript の StructuredClone() を使用してディープ オブジェクトのクローンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。