Unveränderliche Arrayaktualisierungen mit Array.prototype.with

Jad Joubran

Grund zur Freude : Diese Webfunktion ist jetzt in allen drei wichtigen Browser-Engines verfügbar.

In Browsern ist vor Kurzem eine neue interoperable Methode hinzugekommen, die Sie für Arrays aufrufen können: Array.prototype.with().

Browser Support

• 110
• 110
• 115
• 16

Source

In diesem Artikel wird erläutert, wie diese Methode funktioniert und wie Sie damit ein Array aktualisieren können, ohne das ursprüngliche Array zu ändern.

Einführung in Array.prototype.with(index, value)

Die Methode Array.prototype.with(index, value) gibt eine Kopie des Arrays zurück, für das sie aufgerufen wird, wobei index auf den neuen value-Wert gesetzt ist, den Sie angeben.

Das folgende Beispiel zeigt ein Array mit Altersangaben. Sie möchten eine neue Kopie des Arrays erstellen und dabei das zweite Alter von 15 auf 16 ändern:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

Aufschlüsselung des Codes: ages.with(...) gibt eine Kopie der Variablen ages zurück, ohne das ursprüngliche Array zu ändern. ages.with(1, …) ersetzt das zweite Element (index = 1). ages.with(1, 16) weist das zweite Element 16 zu.

So konnten Sie eine neue Kopie des Arrays mit einer Änderung erstellen.

Das ist sehr nützlich, wenn Sie sichergehen möchten, dass das ursprüngliche Array unverändert bleibt. In diesem Artikel werden einige Anwendungsfälle dafür beschrieben. Sehen Sie sich aber erst einmal an, was passiert wäre, wenn Sie die Bracket-Notation verwendet hätten:

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

Wie Sie sehen, wurde in diesem Beispiel auch die Variable ages geändert. Das liegt daran, dass beim Zuweisen von ages = newAges das Array nicht kopiert, sondern ein Verweis auf das andere Array erstellt wird. Jede Änderung an einem der beiden wirkt sich auch auf den anderen aus, da beide auf dasselbe Array verweisen.

Array.prototype.with() und Unveränderlichkeit

Unveränderlichkeit ist das Herzstück vieler Frontend-Bibliotheken und ‑Frameworks, darunter React (und Redux) und Vue.

Auch für andere Bibliotheken und Frameworks ist Unveränderlichkeit nicht unbedingt erforderlich, aber sie wird für eine bessere Leistung empfohlen: Angular und Lit

Daher mussten Entwickler häufig andere Methoden verwenden, die Kopien von Arrays zurückgegeben haben, was die Lesbarkeit des Codes beeinträchtigte:

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

Hier ist ein Beispiel für Codepen, in dem gezeigt wird, wie .with() in React in Kombination mit useState verwendet werden kann, um ein Array von Elementen unveränderlich zu aktualisieren:

Da die Methode .with() eine Kopie des Arrays zurückgibt, können Sie mehrere .with()-Aufrufe oder sogar andere Array-Methoden verketten. Im folgenden Beispiel werden das zweite und dritte Alter aus dem Array inkrementiert:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

Weitere neue unveränderliche Methoden

Drei weitere Methoden sind seit Kurzem interoperabel:

• Array.prototype.toReversed() kehrt das Array um, ohne das ursprüngliche Array zu ändern.
• Array.prototype.toSorted() sortiert das Array, ohne das ursprüngliche Array zu ändern.
• Array.prototype.toSpliced() funktioniert wie .splice(), ändert das ursprüngliche Array aber nicht.

Laut MDN sind diese drei Methoden die Kopierversionen ihrer Gegenstücke. Diese Methoden können auch verwendet werden, wenn Unveränderlichkeit erwartet oder bevorzugt wird.

Zusammenfassend lässt sich sagen, dass unveränderliche Updates in JavaScript mit einer der vier in diesem Artikel vorgestellten Methoden einfacher erreicht werden können. Insbesondere die Methode .with() erleichtert das Aktualisieren eines einzelnen Elements des Arrays, ohne das ursprüngliche Array zu ändern.