javascript / intermediate
Snippet
Unveränderliches Sortieren und Aufteilen von State-Listen mit Array toSorted
Das standardmäßige `Array.prototype.sort()` mutiert Arrays direkt an Ort und Stelle, was gegen die Unveränderlichkeitsregeln von React verstößt und Rendering-Fehler verursachen kann. Modernes JavaScript bietet `Array.prototype.toSorted()`, welches eine neue flache sortierte Kopie zurückgibt, ohne das ursprüngliche Prop-Array zu verändern. Die Kombination von `toSorted()` mit `Array.prototype.slice()` ermöglicht eine saubere, unmutierte Paginierungs- und Sortier-Pipeline direkt während des Renderns.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function ProductCatalog({ items, sortKey, pageIndex, pageSize }) {const sortedItems = items.toSorted((a, b) => {if (typeof a[sortKey] === 'string') {return a[sortKey].localeCompare(b[sortKey]);}return a[sortKey] - b[sortKey];});const startIndex = pageIndex * pageSize;const currentPageItems = sortedItems.slice(startIndex, startIndex + pageSize);return (<ul>{currentPageItems.map((product) => (<li key={product.id}>{product.title} - ${product.price}</li>))}</ul>);}
react
Erklärung
1
const sortedItems = items.toSorted((a, b) => {
Erstellt eine unveränderlich sortierte Kopie der Sammlung, ohne das übergebene Props-Array zu mutieren.
2
return a[sortKey].localeCompare(b[sortKey]);
Führt einen sprachsensitiven String-Vergleich für eine deterministische alphabetische Sortierung durch.
3
const currentPageItems = sortedItems.slice(startIndex, startIndex + pageSize);
Extrahiert die Teilmenge an Elementen, die für das aktuelle Paginierungsfenster benötigt wird.