javascript / beginner
Snippet
Interaktive Listen mit Array Filter in Svelte filtern
Die Verwendung der JavaScript-Methode `Array.prototype.filter` innerhalb einer reaktiven Deklaration (`$:`) berechnet automatisch eine gefilterte Teilmenge neu, sobald sich die Suchanfrage oder das Ausgangs-Array ändert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>let items = ['Apple', 'Banana', 'Avocado', 'Cherry', 'Apricot'];let search = 'A';$: matchingItems = items.filter(item =>item.toLowerCase().startsWith(search.toLowerCase()));</script><input bind:value={search} placeholder="Filter fruits..." /><ul>{#each matchingItems as fruit}<li>{fruit}</li>{/each}</ul>
svelte
Erklärung
1
let items = ['Apple', 'Banana', 'Avocado', 'Cherry', 'Apricot'];
Initialisiert eine Liste von Zeichenketten in einem Array.
2
$: matchingItems = items.filter(item =>
Erstellt eine reaktive Variable, die den Filter-Callback bei jeder Änderung der Abhängigkeiten ausführt.
3
item.toLowerCase().startsWith(search.toLowerCase())
Überprüft jedes Array-Element ohne Beachtung der Groß-/Kleinschreibung gegen den Suchbegriff.
4
{#each matchingItems as fruit}
Iteriert über das gefilterte Array, um Listenelemente für jeden Eintrag darzustellen.