javascript / intermediate
Snippet
Effizientes Filtern von Multi-Select-Tags mit JavaScript Sets
Das Speichern von Multi-Select-Filtern in einem JavaScript `Set` statt in einem Array ermöglicht O(1)-Prüfungen mit `.has()`. Beim Umschalten von Elementen im State erzeugt `new Set(prevSet)` eine neue Objektreferenz, damit React die Änderung erkennt und neu rendert. Der Kontrollfluss prüft `selectedTags.size === 0`, um direkt alle Elemente zurückzugeben, wenn kein Filter aktiv ist, was unnötige Iterationen vermeidet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function TagFilterList({ allArticles, availableTags }) {const [selectedTags, setSelectedTags] = React.useState(() => new Set());const toggleTag = (tag) => {setSelectedTags((prevSet) => {const nextSet = new Set(prevSet);if (nextSet.has(tag)) {nextSet.delete(tag);} else {nextSet.add(tag);}return nextSet;});};const filteredArticles = allArticles.filter((article) => {if (selectedTags.size === 0) return true;return article.tags.some((tag) => selectedTags.has(tag));});return (<div><div className="tag-bar">{availableTags.map((tag) => (<buttonkey={tag}onClick={() => toggleTag(tag)}style={{ fontWeight: selectedTags.has(tag) ? 'bold' : 'normal' }}>{tag}</button>))}</div><span>Showing {filteredArticles.length} articles</span></div>);}
react
Erklärung
1
const nextSet = new Set(prevSet);
Erstellt einen neuen Set-Klon, um die Unveränderlichkeit des React-States zu wahren.
2
if (nextSet.has(tag)) { nextSet.delete(tag); } else { nextSet.add(tag); }
Steuert die Umschaltlogik durch Hinzufügen oder Entfernen von Werten in konstanter Laufzeit O(1).
3
return article.tags.some((tag) => selectedTags.has(tag));
Prüft, ob ein Artikel mindestens eines der aktuell ausgewählten Filter-Tags besitzt.