در حال بارگذاری...

کار با JSON

در درس قبل فقط شکل صدا زدن عوض می‌شد و this دنبال همان صدا می‌رفت. این صفحه آن بحث را کنار می‌گذارد. کالا هنوز در حافظه است؛ اسم و قیمت روی خود آبجکت نشسته‌اند. اگر بخواهید همین واقعیت‌ها را به یک فایل، یک برنامهٔ دیگر، یا صفحهٔ بعدی بسپارید، به یک متنِ قراردادی نیاز دارید. اسم آن متن JSON است.

آبجکت زنده با این یادداشت یکی نیست

تا وقتی اسکریپت دارد کار می‌کند، لیترال آبجکت همان‌جاست و می‌توانید متد هم رویش بگذارید؛ this هنوز به شکل صدا زدن بستگی دارد، درست مثل درس قبل. JSON فقط یک رشته است: نه متد دارد، نه خودش this را انتخاب می‌کند.

متن اجازه دارد چه چیزی را نگه دارد

📊 آبجکت زنده در برابر متن JSON

جزء لیترال آبجکت متن JSON
نقل‌قول کلید اختیاری نقل‌قول دوتایی اجباری
نقل‌قول رشته تکی یا دوتایی فقط دوتایی
ویرگول آخر مجاز ممنوع
تابع می‌تواند متد باشد با stringify حذف می‌شود؛ اگر در متن تایپ شود غیرمجاز است
فیلد undefined یک مقدار واقعی وقتی stringify روی آبجکت راه می‌رود حذف می‌شود

عادتِ لیترال را وارد این متن نکنید. هر کلید و هر رشته باید نقل‌قول دوتایی داشته باشد. ویرگولِ اضافهٔ آخر خط، توضیح داخل متن، و تابعِ لخت، هیچ‌کدام JSON درست نیستند. جدول می‌گوید کدام عادت حذف می‌شود و کدام‌یک اصلاً parse نمی‌شود.

stringify یادداشت را می‌نویسد

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

stringify یادداشت را می‌نویسد

JSON.stringify روی فیلدهای ساده راه می‌رود و یک رشته برمی‌گرداند؛ کنسول {"name":"Mug","price":12} را نشان می‌دهد و خودِ product دست نمی‌خورد. اسم را هنوز از آبجکت زنده می‌خوانید و Mug می‌گیرید. رشته یک مقدار جداست که می‌توانید ذخیره یا ارسال کنید.

parse از یادداشت مقدار می‌سازد

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

parse از روی یادداشت یک مقدار می‌سازد

text هنوز رشته است، با نقل‌قول‌ها و آکولادها. JSON.parse از همان متن یک آبجکت تازه می‌سازد. بعد از آن product.name برابر Mug است. اینجا نه متدی صدا زده می‌شود و نه this در کار است.

فهرست داخل یادداشت

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

فهرست هم می‌تواند داخل یادداشت باشد

متن JSON می‌تواند آرایه نگه دارد؛ بعد از parse، product.tags یک آرایهٔ واقعی است و خانهٔ اولش ceramic است. آرایه به‌عنوان موضوع مستقل درس بعدی است و اینجا فقط بارِ داخل متن است.

یادداشت رفتار را جا می‌گذارد

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

یادداشت داده را نگه می‌دارد، رفتار را نه

price برابر undefined بود. tag یک تابع بود. هر دو از متن حذف می‌شوند. چیزی که چاپ می‌شود فقط {"name":"Mug"} است. رفتار روی آبجکت زنده می‌ماند و وارد یادداشت نمی‌شود.

نقل‌قول شلخته parse نمی‌شود

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

یادداشت شلخته parse نمی‌شود

نقل‌قول تکی و کلیدِ بدون نقل‌قول در لیترال آبجکت مجازند، ولی در JSON نه؛ برای همین JSON.parse خطا می‌دهد و شاخهٔ catch به‌جای توقف صفحه عبارت bad text را چاپ می‌کند. متن را با نقل‌قول دوتایی روی کلید و روی رشته درست کنید. این هنوز درس خطاها نیست و فقط نشان می‌دهد JSON خراب، parse را متوقف می‌کند.

جهت را که بدانید، ابزار معلوم است

از حافظه به متن می‌روید با stringify، و از متن به مقدار برمی‌گردید با parse. اگر بعداً به تابع روی کالا نیاز دارید، آن را بعد از parse اضافه کنید چون یادداشت تابع را با خودش نیاورده. this هنوز به شکل صدا زدن وابسته است نه به JSON، و درس بعدی آرایه است: یک فهرست زنده در اسکریپت، نه یک قاعدهٔ تازه برای JSON.

یک فیلد از یادداشت را روی صفحه بگذارید

یک رشتهٔ کوچکِ کالا را parse کنید. اسم را در پاراگراف بنویسید. خودِ آبجکت را با آکولاد در اسکریپت نسازید.

نمونهٔ صفحه — اسم از روی یادداشت

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>

پاراگراف Mug را نشان می‌دهد، چون اسکریپت به‌جای لیترال فقط متن را parse کرده است. اسم را داخل رشته عوض کنید و صفحه را تازه کنید تا همان خط عوض شود.

قدم‌های تمرین

  1. لیوان را stringify کنید و متنِ نقل‌قول‌دار را بخوانید؛ بعد همان شکل را parse کنید و Mug را ببینید.
  2. یادداشتی را که tags دارد parse کنید و ceramic را بخوانید.
  3. آبجکتی با متد و قیمت undefined را stringify کنید تا در متن فقط name بماند، و یادداشت با کلیدِ بدون نقل‌قول را داخل try / catch بگذارید تا bad text چاپ شود.
  4. در نمونهٔ HTML فقط اسم داخل رشته را عوض کنید، تازه کنید، و پاراگراف را بخوانید.

لغزش‌های رایج

  • JSON را با لیترال آبجکت یکی گرفتن، و نقل‌قول تکی یا کلیدِ لخت را به parse دادن
  • انتظار اینکه متد یا undefined از stringify جان سالم به در ببرد
  • parse را وقتی صدا زدن که متن می‌خواستید، یا stringify را وقتی که متن از قبل آماده بود؛ و خواندن اسم روی خودِ رشته به‌جای مقداری که parse ساخته
  • فرض کردن اینکه صفحهٔ بعد باز هم JSON است، در حالی که آرایه یک فهرست زنده است

جمع‌بندی

  • JSON متنی است که داده را وصف می‌کند و stringify آبجکت ساده را به همان متن تبدیل می‌کند
  • parse متن را دوباره به یک مقدار برمی‌گرداند
  • کلید و رشته نقل‌قول دوتایی می‌خواهند؛ ویرگول اضافه یا نقل‌قول تکی parse را می‌اندازد
  • متد و فیلد undefined از متن حذف می‌شوند
  • یک فیلدِ parse‌شده می‌تواند یک خط از صفحه را پر کند و درس بعد آرایه است، فهرست زنده داخل اسکریپت

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 37 از 38
Javascript آموزش