StructuredClone kullanarak JavaScript'te Bir Nesnenin Derin Kopyası

Feb 21 2023
Buradaysanız, eminim JSON.parse() + JSON kullanıyorsunuzdur.
Unsplash'ta Daniel K Cheung'un fotoğrafı

Buradaysanız , JavaScript'te bir nesnenin derin bir kopyasını oluşturmak için + trick'i yüzlerce kez kullandığınıza bahse girerim . Artık buna ihtiyacınız yok, yerli size yardım etmek için burada.JSON.parse()JSON.stringify()structuredClone()

Sığ Kopya ve Derin Kopya

Her şeyden önce, Sığ Kopya ile Derin Kopya arasındaki farkın ne olduğunu hatırlayalım:

  • Sığ kopya: nesnenin yalnızca ilk seviyesinin kopyalandığı anlamına gelir . Daha derin seviyelere başvurulur. Bunu JavaScript'te Spread operatörünü ( …) veya Object.assign().
  • Derin kopya: nesnenin tüm seviyelerinin kopyalandığı anlamına gelir . Bu, nesnenin gerçek bir kopyasıdır. JSON.parse()Bunu + kullanarak yapabilirsiniz JSON.stringify()ve şimdi yerel ile de yapabilirsiniz structuredClone().

StructuredClone kullanarak Derin Kopyalama

Global yöntem, yapılandırılmış klon algoritmasınıstructuredClone() kullanarak belirli bir değerin derin bir kopyasını oluşturur .

Bu kod parçacığında görebileceğiniz gibi:

  • Klonlanan nesnelerin birinci seviyesindeki bir özellik güncellendikten sonra orijinal özellik güncellenmiyor .
  • Bir özelliği daha derin bir düzeyde güncelledikten sonra orijinal özellik de güncellenmez . Bunun nedeni, bu durumda daha derin seviyelerin de kopyalanmasıdır.

Mutlu Kodlama!