Unveränderliche Arrayaktualisierungen mit Array.prototype.with

Browser haben vor Kurzem eine neue interoperable Methode erhalten, die Sie für Arrays aufrufen können: Array.prototype.with()

Unterstützte Browser

  • Chrome: 110. <ph type="x-smartling-placeholder">
  • Edge: 110. <ph type="x-smartling-placeholder">
  • Firefox: 115 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Quelle

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:

<ph type="x-smartling-placeholder">

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:

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.