{#each} مع الفهرس والمفتاح
كرّر على المصفوفات والكائنات مع الوصول إلى قيم الفهرس والمفتاح
{#each} مع الفهرس والمفتاح درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
كتلة each
تكرّر {#each list as item} على مصفوفة وتصيّر الشيفرة مرة واحدة لكل عنصر.
{#each colors as color}
<li>{color}</li>
{/each}التفكيك
فككوا بنية العنصر ضمن القالب مباشرةً للحصول على قوالب أوضح.
{#each users as { id, name }}
<li>{name}</li>
{/each}متغير الفهرس
أضيفوا ربطًا ثانيًا للفهرس الذي يبدأ من الصفر.
{#each items as item, i}
<li>{i + 1}. {item}</li>
{/each}each بالمفتاح
وفّروا مفتاحًا بعد العنصر باستخدام (item.id) كي تتمكن Svelte من مطابقة العناصر عبر التحديثات.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}لماذا تهم المفاتيح
من دون مفاتيح، قد يؤدي إعادة الترتيب أو التصفية إلى إرباك Svelte وإعادة ضبط حالة المكوّن الابن. وتحافظ المفاتيح على استقرار عقد DOM.
كتلة else
يصيّر {:else} الموضوع بعد جسم التكرار عندما تكون القائمة فارغة.
{#each items as item}
<li>{item}</li>
{:else}
<li>No items yet.</li>
{/each}التكرار على الكائنات
للتكرار على كائن، حوّلوه أولًا إلى entries.
{#each Object.entries(map) as [key, value]}
<li>{key}: {value}</li>
{/each}المجموعات وخرائط Map
غلّفوا هذه القيم في [...set] أو [...map] للتكرار عليها.
each متداخل
يمكنكم تداخل كتل {#each} للتعامل مع البيانات ثنائية الأبعاد.
{#each rows as row}
{#each row as cell}<td>{cell}</td>{/each}
{/each}وسم الإغلاق
أغلقوا دائمًا باستخدام {/each}. وتؤدي مواضع الإغلاق الخاطئة إلى أخطاء في الترجمة.
نصيحة لتحسين الأداء
استخدموا المفاتيح في القوائم التي تتغير كثيرًا. فهي تجعل إعادة الترتيب بتعقيد O(n) بدلًا من O(n^2).
تحقق سريع
ما دور (item.id) في each؟
مراجعة
تكرّر {#each} على المصفوفات، وتدعم ربط الفهرس والمفتاح، وتصيّر حالة القائمة الفارغة باستخدام {:else}.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «{#each} مع الفهرس والمفتاح» مجاني؟
نعم — نص درس «{#each} مع الفهرس والمفتاح» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «{#each} مع الفهرس والمفتاح»؟
كرّر على المصفوفات والكائنات مع الوصول إلى قيم الفهرس والمفتاح تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «{#each} مع الفهرس والمفتاح»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- {#if} و{#else if} و{#else}
- {#each} مع الفهرس والمفتاح
- {#key} لفرض إعادة التصيير
- {#each} المتداخلة والتحديثات المعتمدة على المفتاح