Snippet

Sortieren reaktiver Arrays mit sprachspezifischen Kollatoren

Die herkömmliche Array-Sortierung verarbeitet akzentuierte oder sprachspezifische Sonderzeichen (wie deutsche Umlaute) oft fehlerhaft. Die Verwendung des unveränderlichen `Array.prototype.toSorted()` innerhalb einer Computed Property zusammen mit `Intl.Collator` bewahrt den Originalzustand des Arrays und garantiert eine deterministische, lokalisierte Sortierung ohne Mutation.

snippet.js

javascript

import { ref, computed } from 'vue';
 
const products = ref([
  { id: 1, name: 'Äpfel', price: 2.5 },
  { id: 2, name: 'Zitronen', price: 3.0 },
  { id: 3, name: 'Bananen', price: 1.8 }
]);
 
const collator = new Intl.Collator('de', { sensitivity: 'base' });
 
const sortedProducts = computed(() => {
  return products.value.toSorted((a, b) => {
    return collator.compare(a.name, b.name);
  });
});

vue

Erklärung

const collator = new Intl.Collator('de', { sensitivity: 'base' });

Konfiguriert ein wiederverwendbares, performantes Internationalisierungs-Kollatorobjekt für deutsche Sprachregeln.

return products.value.toSorted((a, b) => {

Erzeugt eine neue flache Kopie des sortierten Arrays, ohne das reaktive Quell-Ref direkt zu mutieren.

return collator.compare(a.name, b.name);

Wendet den lokalisierten Zeichenkettenvergleich zwischen zwei Produktnamen an.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Sortieren reaktiver Arrays mit sprachspezifischen Kollatoren

Verwandt