JavaScript
Spread (nesneler)
... ile bir nesnenin özelliklerini başka nesneye yaymayı öğrenirsin.
Spread (nesneler)
Spread nesnelerde de çalışır. Bir nesnenin önüne ... koyup süslü parantez içine yazarsan özellikleri tek tek açılır. const merged = { ...defaults, fontSize: 14 } yazdığında defaults'un tüm özellikleri yanına fontSize eklenir.
Bu, Object.assign({}, defaults, { fontSize: 14 }) yazmakla aynıdır; ama daha kısa ve nettir. Yeni bir nesne üretir; kaynak nesneler değişmez.
Üzerine yazma
İki nesnede aynı anahtar varsa, sondanaki kazanır. const settings = { ...defaults, ...userPrefs } yazdığında userPrefs'teki anahtarlar defaults'takilerin üzerine yazar.
Bu davranış kasıtlıdır: varsayılanları önce, kullanıcı tercihlerini sonra koyarsın. Böylece kullanıcı boş bıraktığı alanlarda varsayılanı alır, kendi verdiği değer ise kazanır.
Uygulama Yapılandırmayı birleştir
defaultConfig adında bir nesne oluştur; theme ve lang özellikleri tutsun. userConfig adında ikinci bir nesne oluştur; yalnızca lang özelliği olsun. settings adında üçüncü bir nesneyi spread ile birleştirerek oluştur; defaultConfig önce, userConfig sonra gelsin. settings'i console.log ile yazdır.
Örnek çözümü göster
const defaultConfig = { theme: "dark", lang: "tr" };
const userConfig = { lang: "en" };
const settings = { ...defaultConfig, ...userConfig };
console.log(settings);
Kendini test et
-
`{ ...a, ...b }` ne üretir?
const a = { x: 1 };
const b = { y: 2 };
const c = { ...a, ...b };
- `a` nesnesini siler
- Yalnızca `a`'nın özelliklerini içeren nesne
- `a` ve `b`'nin özelliklerini birleştiren yeni nesne
- İki elemanlı bir dizi
Cevabı göster
`a` ve `b`'nin özelliklerini birleştiren yeni nesne — Doğru. Her iki nesnenin özellikleri yeni bir nesnede toplanır.
-
Varsayılanları geçersiz kıl
const defaults = { theme: "light", volume: 50 };
const userPrefs = { volume: 80 };
const settings = ____;
console.log(settings);
Cevabı göster
const defaults = { theme: "light", volume: 50 };
const userPrefs = { volume: 80 };
const settings = {...defaults, ...userPrefs};
console.log(settings);
-
Kavramları eşleştir
- nesne spread
- Özellikleri yeni nesneye açar
- dizi spread
- Elemanları yeni diziye açar
- sondaki kazanır
- Aynı anahtar çakışması
Sıradaki ders: Rest ile esnek parametreler
