落とし穴🕳️ JS内のオブジェクトのクローン化(Object . Assign & Objectスプレッド)

それで、どのように、あなたはJSでオブジェクトをクローン化するか、コピーしますか?…オブジェクトを使用します.代入またはオブジェクト展開演算子.の両方を見ましょう.

const dog = { name: "Doggo" }
const clonedDogAssign = Object.assign({}, dog)
const clonedDogSpread = { ...dog }

それは完全にうまく動作します.あなたはそれが実際に同じオブジェクトではないことを確認することができますが、それはまだ同じプロパティを持って

console.log(dog === clonedDogAssign) // false
console.log(clonedDogAssign) // {name: "Doggo"}
console.log(dog === clonedDogSpread) // false
console.log(clonedDogSpread) // {name: "Doggo"}

よろしい.今、クローン犬の名前を変えて、何が元の犬に起こるかを見ましょう.

clonedDogAssign.name = "Dolly"
// let's check the clone
console.log(clonedDogAssign) // {name: "Dolly"}
// and the original
console.log(dog) // {name: "Doggo"}

クローンが変更されるとき、何も元に起こりません.パーフェクト!あなたがネストしたオブジェクトを扱っていない限り!
それをチェックしましょう!

const dog = { name: "Doggo", owner: { name: "Ben" } }
// clone the dog
const clonedDog = { ...dog }
// change the name
clonedDog.name = "Dolly"
// and change the name of the owner
clonedDog.owner.name = "Louis"

console.log(clonedDog) // {name: "Dolly", owner: {name: "Louis"}}
console.log(dog) // {name: "Doggo", owner: {name: "Louis"}}

何?それで、我々がクローンの所有者を変えたので、オリジナル犬の所有者は変わりました?これはオブジェクトがオブジェクトを広げているからです.代入するとネストされたオブジェクトの値をクローン化しませんが、ネストされたオブジェクトへの参照をコピーします.これは浅いコピーと呼ばれます.
では、どのように深いクローン/深いオブジェクトをコピーすることができますので、ネストされたオブジェクトの値もクローン化されますか?

深いクローン/深いコピーJSオブジェクトへの方法
私が日々学んだのはJSON連載です.オブジェクトはJSONに変換され、再び新しいオブジェクトを取得するために解析されます.そのトリックは、プリミティブ型またはオブジェクトを扱うだけで動作します.他のすべてのために、それは動作しません!注意してこれを使用してください!

const dog = { name: "Doggo", owner: { name: "Ben" } }
const clonedJsonDog = JSON.parse(JSON.stringify(dog))
clonedJsonDog.name = "Dolly"
clonedJsonDog.owner.name = "Louis"
console.log(clonedJsonDog) // {name: "Dolly", owner: {name: "Louis"}}
console.log(dog) // {name: "Doggo", owner: {name: "Ben"}}

パーフェクト!オリジナルは無意識に保たれている!それで、それは働く解決です.あなたがオブジェクトの中で機能またはシンボルを扱うならば、この解決は十分でありません.これらに対する参照を保つより他の方法はありません.JSONトリックはこれらのタイプを扱うことができません.このような場合には、LodDash Clondeepメソッドはおそらく最善の方法です.

// npm i lodash
const clonedeep = require('lodash.clonedeep')

const dog = { name: "Doggo", owner: { name: "Ben" } }
const deepClone = clonedeep(dog)
deepClone.name = "Dolly"
deepClone.owner.name = "Louis"
console.log(deepClone) // {name: "Dolly", owner: {name: "Louis"}}
console.log(dog) // {name: "Doggo", owner: {name: "Ben"}}

深いクローニング/コピーのあなたの解決は、何ですか?コメントの行をドロップ!好奇心旺盛!
Web開発でより良い取得したいですか?
🚀🚀🚀subscribe to my weekly ✉️newsletter