0 Tage Serie
javascript / beginner
Snippet

Listenindizes bei der Array-Iteration anzeigen

In Svelte ermöglicht der `{#each}`-Block die Iteration über Arrays. Auf den nullbasierten Index jedes Elements kann über einen zweiten Parameter nach dem Komma zugegriffen werden.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
<script>
let fruits = ['Apple', 'Banana', 'Orange'];
</script>
<ul>
{#each fruits as fruit, index}
<li>{index + 1}: {fruit}</li>
{/each}
</ul>
svelte
Erklärung
1
let fruits = ['Apple', 'Banana', 'Orange'];
Definiert ein String-Array mit den anzuzeigenden Elementen.
2
{#each fruits as fruit, index}
Iteriert über das `fruits`-Array und stellt das aktuelle Element sowie dessen numerischen Index bereit.
3
<li>{index + 1}: {fruit}</li>
Rendert ein Listenelement mit 1-basiertem Index und dem Fruchtnamen.