Browser haben vor Kurzem eine neue interoperable Methode erhalten, die Sie für Arrays aufrufen können: Array.prototype.with().
In diesem Artikel wird erläutert, wie diese Methode funktioniert und wie sie zum Aktualisieren eines Arrays verwendet wird, 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 die neue von Ihnen angegebene value festgelegt ist.
Das folgende Beispiel zeigt ein Array mit Altersgruppen. Sie möchten eine neue Kopie des Arrays erstellen und dabei das zweite Alter von 15 in 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 Variable 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.
Auf diese Weise konnten Sie eine neue Kopie des Arrays mit einer Änderung erstellen.
Dies ist sehr nützlich, wenn Sie dafür sorgen möchten, dass das ursprüngliche Array unverändert bleibt. In diesem Artikel werden einige Anwendungsfälle dafür beschrieben. Schauen Sie sich vorerst an, was mit der eckigen Notation passiert wäre:
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 von JavaScript nicht kopiert wird, sondern ein Verweis auf das andere Array erstellt wird. Jede Änderung auf einem Element wirkt sich also auch auf
das andere aus, da beide auf dasselbe Array zeigen.
Array.prototype.with() und Unveränderlichkeit
Unveränderlichkeit steht im Zentrum vieler Front-End-Bibliotheken und -Frameworks, um nur einige zu nennen: React (und redux) und Vue.
Auch andere Bibliotheken und Frameworks erfordern nicht unbedingt Unveränderlichkeit, werden aber empfohlen, um eine bessere Leistung zu erzielen: Angular und Lit.
Daher mussten Entwickler oft andere Methoden verwenden, die Kopien von Arrays zurückgegeben haben, was die Lesbarkeit des Codes beeinträchtigt hat:
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-Codepen, der zeigt, 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 Arraymethoden verketten. Das folgende Beispiel zeigt, wie das zweite und dritte Alter aus dem Array erhöht werden kann:
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)
Andere neue unveränderliche Methoden
Drei weitere Methoden sind seit Kurzem interoperabel:
Array.prototype.toReversed(), die das Array umkehrt, ohne das ursprüngliche Array zu ändern.Array.prototype.toSorted(), bei der das Array sortiert wird, ohne das ursprüngliche Array zu ändern.Array.prototype.toSpliced(), die wie.splice()funktioniert, jedoch ohne das ursprüngliche Array zu ändern.
Diese drei Methoden sind laut MDN die Kopierversion ihrer Entsprechungen. Diese Methoden können auch verwendet werden, wenn Unveränderlichkeit erwartet oder bevorzugt wird.
Zusammenfassend lässt sich sagen, dass unveränderliche Aktualisierungen mit einer der vier in diesem Artikel vorgestellten Methoden einfacher in JavaScript durchgeführt werden können. Insbesondere erleichtert die Methode .with() das Aktualisieren eines einzelnen Elements des Arrays, ohne das ursprüngliche Array zu ändern.