پروژه ۲: فیلتر لیست دورههای آموزشی (آرایهها و اشیاء)
۱. طرح مسئله (Problem)
ما مجموعهای از اطلاعات (دیتابیس) داریم که شامل نام دورهها و سطح آنها (مقدماتی یا پیشرفته) است. میخواهیم دکمههایی بسازیم که با کلیک روی آنها، لیست دورهها فیلتر شده و فقط موارد مربوط به آن سطح نمایش داده شود.
۲. راه حل و اجرا (Solution)
۳. توضیح مفصل کد (Analysis)
const db = [
{ title: “جاوااسکریپت”, level: “Beginner” },
{ title: “ریکت”, level: “Advanced” }
];
function filterCourses(level) {
const filtered = db.filter(course => level === ‘All’ || course.level === level);
// نمایش در HTML…
}
{ title: “جاوااسکریپت”, level: “Beginner” },
{ title: “ریکت”, level: “Advanced” }
];
function filterCourses(level) {
const filtered = db.filter(course => level === ‘All’ || course.level === level);
// نمایش در HTML…
}
- ✅ آرایه اشیاء (Array of Objects): دادهها در یک متغیر به نام
dbذخیره شدهاند که ساختار استانداردی در برنامهنویسی است. - ✅ متد filter: این متد قدرتمند، روی تکتک اعضای آرایه میچرخد و بر اساس شرطی که ما تعیین کردیم (یکسان بودن سطح)، یک لیست جدید ایجاد میکند.
- ✅ عملگر OR (||): در شرط فیلتر، ما گفتیم اگر دکمه “همه” انتخاب شد یا سطح برابر بود، نمایش بده.