javascript / beginner
Snippet
Transformieren von Elementsammlungen mit der Array-Map-Methode
Die Methode `Array.prototype.map()` erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Callback-Funktion für jedes Element des ursprünglichen Arrays. In Svelte-Anwendungen hilft die Transformation von Daten in saubere, abgeleitete Strukturen vor der Übergabe an UI-Komponenten dabei, Datenaufbereitung und Render-Logik sauber zu trennen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
const rawUsers = [{ id: 1, firstName: 'Ada', lastName: 'Lovelace' },{ id: 2, firstName: 'Alan', lastName: 'Turing' }];const formattedNames = rawUsers.map(user => ({id: user.id,fullName: `${user.firstName} ${user.lastName}`}));
svelte
Erklärung
1
const rawUsers = [ ... ];
Definiert ein Ausgangs-Array von Benutzerobjekten mit getrennten Vor- und Nachnamenseigenschaften.
2
const formattedNames = rawUsers.map(user => ({
Iteriert über jedes Benutzerelement, um ein neues, transformiertes Objekt zu erstellen und zurückzugeben.
3
id: user.id,
Behält die eindeutige ID bei, die für die Nachverfolgung von Elementen in UI-Listen erforderlich ist.
4
fullName: `${user.firstName} ${user.lastName}`
Kombiniert Vor- und Nachnamensfelder mithilfe eines Template-Literals zu einer einheitlichen Anzeigezeichenkette.
5
}));
Schließt den Map-Ausdruck ab und erzeugt ein neues, unverändertes Array transformierter Objekte.