इंडेक्स और Key के साथ {#each}
ऐरे और ऑब्जेक्ट पर लूप चलाएँ तथा इंडेक्स और key मानों तक पहुँचें।
इंडेक्स और Key के साथ {#each}, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 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) कुंजी दें, ताकि स्वेल्ट अपडेट के दौरान आइटम का मिलान कर सके।
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}कुंजियाँ महत्वपूर्ण क्यों हैं
कुंजियों के बिना क्रम बदलने या फ़िल्टर करने पर स्वेल्ट भ्रमित हो सकता है और चाइल्ड की स्थिति रीसेट कर सकता है। कुंजियाँ DOM नोड को स्थिर रखती हैं।
अन्यथा ब्लॉक
सूची खाली होने पर पुनरावृत्ति के मुख्य भाग के बाद आया {: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}सेट और मैप
चलाने के लिए उन्हें [...set] या [...map] में लपेटें।
नेस्ट किया हुआ each
द्वि-आयामी डेटा के लिए {#each} ब्लॉक को नेस्ट करें।
{#each rows as row}
{#each row as cell}<td>{cell}</td>{/each}
{/each}समापन टैग
हमेशा {/each} से बंद करें। गलत स्थान पर लगाए गए समापन टैग से संकलन त्रुटियाँ आती हैं।
प्रदर्शन सुझाव
बार-बार बदलने वाली सूचियों पर कुंजियों का उपयोग करें। इससे क्रम बदलना O(n) हो जाता है, O(n^2) नहीं।
त्वरित जाँच
each में (item.id) की क्या भूमिका है?
पुनरावलोकन
{#each} ऐरे पर चलता है, इंडेक्स और कुंजी बाइंडिंग का समर्थन करता है और खाली स्थिति के लिए {:else} रेंडर करता है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “इंडेक्स और Key के साथ {#each}” पाठ निःशुल्क है?
हाँ—“इंडेक्स और Key के साथ {#each}” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“इंडेक्स और Key के साथ {#each}” में मैं क्या सीखूँगा?
ऐरे और ऑब्जेक्ट पर लूप चलाएँ तथा इंडेक्स और key मानों तक पहुँचें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“इंडेक्स और Key के साथ {#each}” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- {#if} {#else if} {#else}
- इंडेक्स और Key के साथ {#each}
- री-रेंडर लागू करने के लिए {#key}
- नेस्टेड {#each} और Key-आधारित अपडेट