Filter & Sort Lists تصفية القوائم وترتيبها

آخر تحديث: 2026-11-03

Filter & Sort Lists تصفية القوائم وترتيبها

لا تُعدّل تصفية القائمة وترتيبها تعديل المصفوفة الأصلية وقت العرض، بل تشتقّ مصفوفة جديدة بـ filter وsort وما شابه ثم تعرض تلك. فالحفاظ على بيانات المصدر دون مساس، وحساب المشهد وقت العرض، هما الفكرة الأساسية في تعامل React مع القوائم. كما يتجنّب ذلك الخلل الكلاسيكي الذي يفسد فيه ترتيب مصفوفة الحالة بصمت.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

const shown = products
  .filter((p) => p.price < 100)        // التصفية ← مصفوفة جديدة
  .sort((a, b) => a.price - b.price)   // الترتيب (على النسخة الناتجة عن التصفية)
{shown.map((p) => <li key={p.id}>{p.name}</li>)}

القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

قائمة منتجات مع أداتَي تحكم: بتحديد «Under 100 only» لا يبقى سوى الماوس، والضغط على زر السعر يبدّل بين الترتيب التنازلي والتصاعدي بينما تُعاد ترتيب القائمة لحظياً — والمصفوفة الأصلية لا تُعدَّل أبداً.

💡 النقاط الأساسية

🏷️ المزيد من العرض والحالة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن