JavaScript Academy · Ders

Derin Kopyalar için structuredClone

Karmaşık nesneleri güvenli şekilde kopyalayın.

Derin Kopyalar için structuredClone, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

deep Kopya Sorunu

Yayma ve Object.assign shallow kopyalar oluşturur: iç içe nesneler referans yoluyla paylaşılır. İç içe bir yapıyı tamamen çoğaltmak için deep bir kopyaya ihtiyacınız vardır.

structuredClone yerleşik çözümdür.

Yayma Neden Yeterli Değil

Yayma ile oluşturulan bir kopya, iç içe nesneleri paylaşır. Kopyanın iç içe bölümünü değiştirmek, aslı da etkiler.

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone İmdada Yetişiyor

structuredClone yapının tamamını özyinelemeli olarak kopyalar. Klonda yapılan değişiklikler asla aslı etkilemez.

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

Bağımsız İç İçe Nesneler

Klonlama sonrasında her iç içe nesne farklı bir referanstır; bu nedenle kimlik karşılaştırması her düzeyde false olur.

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

Dizileri Klonlama

İç içe diziler de dahil olmak üzere diziler de derinlemesine klonlanır. Klonun iç içe dizisine öğe eklemek, kaynak diziyi değiştirmez.

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Map ve Set'leri Destekler

JSON.parse(JSON.stringify(...)) yönteminin aksine structuredClone, Map, Set ve Date dahil olmak üzere birçok yerleşik türü destekler.

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

Döngüsel Referansları İşler

Kendisine referans veren bir nesne, JSON yöntemini bozar; ancak structuredClone ile sorunsuzca klonlanır.

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

Klonlayamadığı Şeyler

structuredClone, işlevleri veya DOM düğümlerini kopyalayamaz; bir DataCloneError fırlatır. Ayrıca prototip zincirlerini kaldırır ve düz nesneler döndürür.

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

Prototipler Korunmaz

Klonlanan bir sınıf örneği düz bir nesneye dönüşür: veriler kopyalanır, ancak yöntemler ve prototip kaybolur.

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone ve JSON Yöntemi

Eski JSON.parse(JSON.stringify(x)) yöntemi undefined değerlerini kaybeder, tarihleri dizelere dönüştürür ve döngülerde başarısız olur. structuredClone, serileştirilebilir veriler için bu sorunları önler.

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

Neden Önemli

structuredClone, düz veriler için güvenilir ve yerleşik bir deep kopya sağlar; böylece kırılgan, elle yazılmış klonların yerini alır. İç içe state'in tamamen bağımsız bir kopyasına ihtiyaç duyduğunuzda bunu kullanın ve işlevleri ile prototipleri kaldırdığını unutmayın.

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

Kısa Kontrol

İç içe veriler için yayma işleci yerine neden structuredClone kullanılır?

Özet: structuredClone

Güvenilir deep kopyalama yöntemini öğrendiniz:

Yayma işlemi shallow'dur; structuredClone derinlemesine kopyalar.
Map, Set, Date ve döngüsel referansları destekler.
İşlevleri veya DOM düğümlerini klonlayamaz ve prototipleri kaldırır.
JSON.parse(JSON.stringify()) yöntemine göre daha güvenli bir alternatiftir.

Sıkça Sorulan Sorular

“Derin Kopyalar için structuredClone” dersi ücretsiz mi?

Evet — “Derin Kopyalar için structuredClone” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Derin Kopyalar için structuredClone” dersinde ne öğreneceğim?

Karmaşık nesneleri güvenli şekilde kopyalayın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Derin Kopyalar için structuredClone” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön