Snippet

Dynamisches Filtern von Array-Elementen mit Array Filter

Die Methode Array.prototype.filter prüft jedes Element in einem Array anhand einer booleschen Bedingung und gibt ein neues Array zurück, das nur die passenden Elemente enthält. In Svelte stellt die Kombination von Filterung mit einer reaktiven Deklaration ($:) sicher, dass die Liste bei jeder Änderung des Suchbegriffs automatisch neu berechnet wird, ohne das Original-Array zu verändern.

snippet.js

javascript

<script>
  let searchQuery = '';
  let fruitList = ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Date'];
 
  $: visibleFruits = fruitList.filter(fruit => 
    fruit.toLowerCase().includes(searchQuery.toLowerCase())
  );
</script>
 
<input bind:value={searchQuery} placeholder="Search fruit..." />
<ul>
  {#each visibleFruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

svelte

Erklärung

let fruitList = ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Date'];

Initialisiert das Basis-Array mit Zeichenketten.

$: visibleFruits = fruitList.filter(fruit => ...);

Erstellt ein reaktiv gefiltertes Array, das bei jeder Änderung von searchQuery neu ausgeführt wird.

fruit.toLowerCase().includes(searchQuery.toLowerCase())

Wandelt Element und Suchbegriff in Kleinbuchstaben um für einen case-insensitiven Vergleich.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Dynamisches Filtern von Array-Elementen mit Array Filter

Verwandt