javascript / beginner
Snippet
Dynamisches Filtern von Array-Elementen vor dem Rendern in Svelte
Die Verwendung der integrierten JavaScript-Methode Array.prototype.filter innerhalb einer reaktiven Svelte-Deklaration ($:) erzeugt eine abgeleitete Teilmenge von Elementen bei Datenänderungen, ohne das ursprüngliche Ausgangs-Array zu mutieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>let items = [{ id: 1, name: "Milk", completed: true },{ id: 2, name: "Bread", completed: false },{ id: 3, name: "Coffee", completed: false }];$: remainingItems = items.filter(item => !item.completed);</script><h2>Open Tasks ({remainingItems.length})</h2><ul>{#each remainingItems as item (item.id)}<li>{item.name}</li>{/each}</ul>
svelte
Erklärung
1
let items = [
Definiert ein Array von Aufgabenobjekten mit eindeutigen IDs und Fertigstellungsstatus.
2
$: remainingItems = items.filter(item => !item.completed);
Erstellt über die filter-Methode ein reaktives Array, das nur unerledigte Einträge enthält.
3
{#each remainingItems as item (item.id)}
Iteriert über die gefilterten Array-Elemente und verwendet item.id als eindeutigen Schlüssel.