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

کار با JSON

کار با JSON (JavaScript Object Notation) یکی از مهارت‌های کلیدی در توسعه وب مدرن است و امکان انتقال ساختاریافته داده‌ها بین کلاینت و سرور را فراهم می‌کند. JSON فرمت سبک، متنی و قابل خواندن برای انسان و ماشین است که در برنامه‌هایی مانند فروشگاه آنلاین، وب‌سایت خبری، وبلاگ شخصی و پرتال‌های دولتی کاربرد فراوان دارد. می‌توان JSON را مانند سازماندهی یک کتابخانه تصور کرد: هر کتاب یک شیء داده است و قفسه‌ها و بخش‌ها مجموعه‌های منطقی را نمایش می‌دهند تا دسترسی سریع و مدیریت آسان فراهم شود.
در فروشگاه آنلاین، JSON اطلاعات محصولات، قیمت و موجودی را ذخیره می‌کند. در وب‌سایت خبری، مقالات، دسته‌بندی‌ها و نظرات به کمک JSON سازماندهی می‌شوند. در وبلاگ شخصی، پست‌ها، برچسب‌ها و نویسندگان در قالب JSON مدیریت می‌شوند. در پرتال‌های دولتی، اطلاعات فرم‌ها، پروفایل کاربران و گزارش‌ها به صورت JSON منتقل می‌شوند.
در این آموزش، شما یاد می‌گیرید چگونه ساختارهای JSON بسازید، آن‌ها را با استفاده از JSON.parse و JSON.stringify در JavaScript پردازش کنید، آرایه‌ها و اشیاء تو در تو را مدیریت نمایید و خطاها را به صورت مؤثر هندل کنید. همان‌طور که هنگام ساخت خانه، چیدمان اتاق‌ها، نوشتن نامه یا سازماندهی کتابخانه به دقت عمل می‌کنید، با JSON نیز داده‌ها را به روشی منظم و قابل دسترسی مدیریت خواهید کرد.

مثال پایه

javascript
JAVASCRIPT Code 
// ایجاد یک مثال پایه برای یک پست وبلاگ
const blogPost = {
"title": "تکنیک‌های پیشرفته JavaScript",
"author": "مهدی رضایی",
"date": "2025-08-29",
"tags": \["JavaScript", "JSON", "WebDevelopment"]
};

// تبدیل شیء JavaScript به رشته JSON
const jsonString = JSON.stringify(blogPost);

// تبدیل رشته JSON به شیء JavaScript
const parsedPost = JSON.parse(jsonString);

console.log(parsedPost.title); // نمایش عنوان پست وبلاگ

در این مثال، ابتدا یک شیء JavaScript به نام blogPost تعریف می‌کنیم که شامل ویژگی‌هایی مانند title، author، date و tags است. این شیء نمایانگر اطلاعات یک پست وبلاگ به صورت ساختاریافته است، مشابه کتاب‌هایی که در یک کتابخانه منظم چیده شده‌اند.
سپس از JSON.stringify() استفاده می‌کنیم تا این شیء را به یک رشته JSON تبدیل کنیم. این مرحله برای ارسال داده به سرور، ذخیره‌سازی در localStorage یا انتقال شبکه‌ای ضروری است. JSON فرمت استاندارد و سبک‌وزنی ارائه می‌دهد که در سیستم‌های مختلف قابل خواندن است.
با JSON.parse() رشته JSON را دوباره به یک شیء JavaScript تبدیل می‌کنیم تا بتوانیم به ویژگی‌هایی مانند parsedPost.title دسترسی داشته باشیم. دلیل نیاز به این تبدیل این است که اشیاء JavaScript به‌صورت مستقیم قابل انتقال متنی نیستند، اما JSON چنین نمایش متنی استانداردی فراهم می‌کند. توجه کنید که JSON از توابع و undefined پشتیبانی نمی‌کند، بنابراین پیش از stringify کردن باید آن‌ها را مدیریت کرد.

مثال کاربردی

javascript
JAVASCRIPT Code 
// مثال کاربردی برای فروشگاه آنلاین
const products = \[
{ "id": 1, "name": "لپ‌تاپ", "price": 1200, "stock": 15 },
{ "id": 2, "name": "گوشی هوشمند", "price": 800, "stock": 30 },
{ "id": 3, "name": "هدفون بی‌سیم", "price": 150, "stock": 50 }
];

// تبدیل آرایه محصولات به رشته JSON برای ارتباط با سرور
const productsJSON = JSON.stringify(products);

// تبدیل رشته JSON به آرایه JavaScript
const parsedProducts = JSON.parse(productsJSON);

// نمایش محصولات موجود
parsedProducts.forEach(product => {
if (product.stock > 0) {
console.log(`محصول: ${product.name}, قیمت: ${product.price}`);
}
});

در این مثال عملی، یک آرایه از محصولات فروشگاه آنلاین ایجاد می‌کنیم. هر محصول شامل ویژگی‌های id، name، price و stock است که مانند کالاهایی بر روی قفسه‌های فروشگاه به صورت منظم چیده شده‌اند.
با استفاده از JSON.stringify() آرایه را به رشته JSON تبدیل می‌کنیم تا بتوانیم آن را به سرور ارسال یا در localStorage ذخیره کنیم. سپس با JSON.parse() رشته را دوباره به آرایه JavaScript تبدیل می‌کنیم تا بتوانیم عملیات مختلفی روی آن انجام دهیم، مانند فیلتر کردن محصولات موجود.
با استفاده از حلقه forEach فقط محصولاتی که موجود هستند در کنسول نمایش داده می‌شوند. این مثال نشان می‌دهد چگونه JSON امکان تبادل داده ساختاریافته بین کلاینت و سرور را فراهم کرده و سازگاری و پایداری داده‌ها را تضمین می‌کند.

Best Practices و اشتباهات رایج:

  1. اعتبارسنجی داده‌ها: قبل از stringify کردن، داده‌ها را اعتبارسنجی کنید تا از بروز خطا جلوگیری شود.
  2. مدیریت خطاها: JSON.parse() را در try...catch قرار دهید تا رشته‌های نامعتبر باعث کرش نشوند.
  3. نام‌گذاری شفاف: از نام‌های descriptive برای ویژگی‌ها استفاده کنید تا maintainability افزایش یابد.

  4. بهینه‌سازی عملکرد: از stringify/parse مکرر برای داده‌های بزرگ خودداری کنید تا حافظه و CPU بهینه بماند.
    اشتباهات رایج:

  5. ذخیره توابع یا undefined در JSON که باعث خطا می‌شود.

  6. پردازش داده‌های سرور بدون اعتبارسنجی که باعث مشکلات امنیتی یا ناسازگاری می‌شود.
  7. stringify/parse غیرضروری که باعث کاهش عملکرد می‌شود.
  8. نادیده گرفتن خطاهای parsing که ممکن است منجر به کرش برنامه شود.
    نکات Debugging: از console.log() برای بررسی داده‌ها استفاده کنید یا از ابزارهایی مانند JSONLint بهره ببرید. تست منظم برای داده‌های پیچیده از بروز memory leak و inconsistencies جلوگیری می‌کند.

📊 مرجع سریع

Property/Method Description Example
JSON.stringify() تبدیل شیء JavaScript به رشته JSON JSON.stringify({name:"سارا"})
JSON.parse() تبدیل رشته JSON به شیء JavaScript JSON.parse('{"name":"سارا"}')
Array.forEach() تکرار روی عناصر آرایه arr.forEach(item=>console.log(item))
try...catch مدیریت خطا هنگام parsing JSON try{JSON.parse(str)}catch(e){console.log(e)}
Object.keys() دریافت نام ویژگی‌های یک شیء Object.keys({a:1,b:2}) // \["a","b"]

خلاصه و گام‌های بعدی: تسلط بر JSON برای توسعه وب مدرن حیاتی است، زیرا امکان تبادل داده قابل اعتماد بین فرانت‌اند و بک‌اند را فراهم می‌کند. در این آموزش، شما یاد گرفتید چگونه JSON بسازید، parse و stringify کنید، آرایه‌ها و اشیاء تو در تو را مدیریت نمایید و خطاها را هندل کنید.
JSON ارتباط مستقیم با HTML DOM و ارتباط با سرور دارد و امکان به‌روزرسانی پویا محتوا مانند لیست محصولات، پست‌های وبلاگ یا فیدهای اجتماعی از طریق API فراهم می‌کند. گام‌های بعدی شامل یادگیری Fetch API، استفاده از AJAX و بهینه‌سازی عملکرد برای داده‌های بزرگ است. انجام پروژه‌های عملی مانند وبلاگ‌ها، فروشگاه‌های آنلاین و پرتال‌های اجتماعی مهارت شما در استفاده از JSON را تقویت می‌کند.

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

آماده شروع

آزمون دانش شما

درک خود از این موضوع را با سوالات کاربردی بسنجید.

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

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

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