Yükleniyor...

JavaScript’te JSON

Önceki sayfa yalnızca çağrının biçimini değiştiriyordu ve this o çağrıyı izliyordu. Bu sayfa o konuyu bir kenara bırakır. Ürün hâlâ bellektedir; ad ve fiyat nesnenin üzerindedir. Aynı bilgileri bir dosyaya, başka bir programa veya sonraki sayfaya vermek istiyorsan sabit biçimli bir metin gerekir. Bu metnin adı JSON’dur.

Canlı nesne bu not değildir

Betik çalıştığı sürece literal yerinde durur ve üzerine bir metot konabilir; this hâlâ çağrının biçimine bağlıdır, önceki dersteki gibi. JSON yalnızca bir dizgedir: metodu yoktur ve this seçmez.

Metnin tutmasına izin verilen şey

📊 Canlı nesne ile JSON metni

Parça Nesne literali JSON metni
Anahtar tırnakları isteğe bağlı çift tırnak zorunlu
Dizge tırnakları tek veya çift yalnız çift
Sondaki virgül serbest yasak
İşlev metot olabilir stringify atlar; metnin içine yazılırsa geçersizdir
undefined alan gerçek bir değer stringify nesneyi gezerken düşer

Literal alışkanlığını bu metne taşıma. Her anahtar ve her dizge çift tırnak ister. Sondaki fazla virgül, metnin içindeki yorum ve çıplak işlev geçerli JSON değildir. Tablo hangi alışkanlığın düştüğünü ve hangisini parse hiç kabul etmediğini söyler.

stringify notu yazar

javascript 
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));

stringify notu yazar

JSON.stringify yalın alanların üzerinde yürür ve bir dizge döndürür; konsol {"name":"Mug","price":12} gösterir ve product olduğu gibi kalır. Adı hâlâ canlı nesneden okursun ve Mug alırsın. Dizge ayrı bir değerdir, kaydedilebilir veya gönderilebilir.

parse bir değer kurar

javascript 
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);

parse nottan bir değer kurar

text hâlâ bir dizgedir, tırnaklar ve süslü parantezler durur. JSON.parse bu metinden yeni bir nesne kurar. Ardından product.name değeri Mug olur. Burada metot çağrılmaz ve this işe karışmaz.

Notun içindeki liste

javascript 
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);

Liste notun içinde durabilir

JSON metni bir dizi taşıyabilir; parse sonrasında product.tags gerçek bir dizidir ve ilk göz ceramic olur. Dizi kendi konusu olarak sırada bekler, burada yalnızca metnin yüküdür.

Not davranışı bırakır

javascript 
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));

Not veriyi tutar, davranışı değil

price değeri undefined idi. tag bir işlevdi. İkisi de metinden çıkar. Basılan yalnızca {"name":"Mug"} olur. Davranış canlı nesnede kalır ve nota girmez.

Gevşek tırnaklar okunmaz

javascript 
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}

Dağınık not parse edilmez

Tek tırnak ve tırnaksız anahtar literalde serbesttir, JSON’da değildir; bu yüzden JSON.parse hata fırlatır ve catch dalı bu demoyu düşürmek yerine bad text basar. Anahtara ve dizgeye çift tırnak koyarak metni düzelt. Bu henüz hatalar dersi değil, yalnızca bozuk JSON’un parse durdurduğunu gösterir.

Yön belli olunca araç da belli olur

Bellekten metne stringify ile gidersin, metinden değere parse ile dönersin. Sonradan üründe bir işlev gerekirse onu parse sonrasına eklersin, çünkü not işlevi yanında getirmemiştir. this hâlâ çağrının biçimine bağlıdır, JSON’a değil, ve sonraki ders dizidir: betikte canlı bir liste, yeni bir JSON kuralı değil.

Nottan bir alanı sayfada göster

Küçük bir ürün dizgesini parse et. Adı paragrafa yaz. Nesneyi betiğin içinde süslü parantezle kurma.

Sayfa demosu — nottan ad

html 
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>

Paragraf Mug gösterir, çünkü betik literal kurmamış, yalnızca metni okumuştur. Dizgenin içindeki adı değiştir ve sayfayı yenile, satır onu izlesin.

Alıştırma adımları

  1. Fincana stringify uygula ve tırnaklı metni oku; sonra aynı biçimi parse edip Mug gör.
  2. tags içeren notu parse et ve ceramic oku.
  3. Metotlu ve fiyatı undefined olan nesneye stringify uygula ki metinde yalnız name kalsın, tırnaksız anahtarlı notu try / catch içine koyup bad text gör.
  4. HTML demosunda yalnızca dizgenin içindeki adı değiştir, yenile ve paragrafı oku.

Sık kaymalar

  • JSON metnini nesne literali sanmak ve parse içine tek tırnak ya da çıplak anahtar vermek
  • Bir metot veya undefined değerinin stringify sonrasında kalacağını sanmak
  • Metin isterken parse çağırmak ya da metin hazırken stringify çağırmak; adı dizgenin kendisinde okumak, parse sonucundaki değerde değil
  • Sonraki sayfayı yine JSON sanmak, oysa diziler canlı bir listedir

Özet

  • JSON veriyi anlatan metindir ve stringify yalın nesneyi o metne çevirir
  • parse metni yeniden bir değere döndürür
  • Anahtar ve dizge çift tırnak ister; fazla virgül veya tek tırnak parse işlemini düşürür
  • Metotlar ve undefined alanlar metinden düşer
  • Okunmuş bir alan sayfada bir satırı doldurabilir ve sonraki ders dizidir, betikteki canlı liste

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 37 / 38
Javascript Ders