Browser haben vor Kurzem eine neue interoperable Methode erhalten, die Sie für Arrays aufrufen können:
Array.prototype.with()
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
In diesem Artikel wird erläutert, wie diese Methode funktioniert und 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
wird aufgerufen, wobei index
auf die von Ihnen angegebene neue value
festgelegt ist.
Das folgende Beispiel zeigt ein Array von Altersgruppen. Sie möchten eine neue Kopie von erstellen: das Array aus und ändern das zweite Alter von 15 in 16:
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 sicherstellen möchten, dass das ursprüngliche Array unverändert. In diesem Artikel werden einige Anwendungsfälle dafür behandelt. Aber vorerst sehen wir uns an, was passiert wäre, wenn Sie die Klammer-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 sind
denn wenn Sie ages = newAges
zuweisen, kopiert JavaScript nicht das Array, sondern
erstellt vielmehr einen Verweis auf das andere Array. Jede Änderung in einem
Projekt wirkt sich also auch auf
beeinflussen, da beide auf dasselbe Array verweisen.
Array.prototype.with() und Unveränderlichkeit
Unveränderlichkeit ist das Herzstück vieler Front-End-Bibliotheken und -Frameworks. ein paar: React (und redux) und Vue
Andere Bibliotheken und Frameworks müssen nicht unbedingt unveränderlich sein, für eine bessere Leistung: Angular und Lit
Daher mussten Entwickler oft andere Methoden verwenden, um Kopien von Arrays Dadurch wurde die Lesbarkeit des Codes beeinträchtigt:
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 Beispielcodepen, der zeigt, wie .with()
in Kombination mit React verwendet werden kann
mit useState , 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. Im folgenden Beispiel sehen Sie,
Erhöhung des zweiten und dritten Alters aus dem Array:
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()
das das Array umkehrt, ohne den Parameter Original-Array.Array.prototype.toSorted()
womit das Array sortiert wird, das ursprüngliche Array mutieren.Array.prototype.toSpliced()
Das funktioniert wie.splice()
, aber ohne das ursprüngliche Array zu ändern.
Diese drei Methoden sind laut MDN die Kopierversion ihrer die entsprechenden Entsprechungen. Diese Methoden können auch verwendet werden, wenn Unveränderlichkeit erwartet oder bevorzugt werden.
Zusammenfassend lässt sich sagen, dass unveränderliche Aktualisierungen einfacher in
JavaScript mit einer der vier in diesem Artikel vorgestellten Methoden verwenden. Genauer gesagt:
Die Methode .with()
erleichtert das Aktualisieren eines einzelnen Elements des Arrays
ohne das ursprüngliche Array zu ändern.