JavaScript ist eine der beliebtesten Programmiersprachen der Welt und React ist eine der beliebtesten Bibliotheken für die Entwicklung der Benutzeroberfläche. Manchmal müssen wir während der Arbeit mit React möglicherweise eine Kopie des Arrays erstellen, um das ursprüngliche Array nicht zu ändern. Glücklicherweise bietet uns JavaScript mehrere Möglichkeiten, dies zu tun.
Eine Möglichkeit, ein Array zu kopieren, besteht darin, eine Methode zu verwenden slice(). Es gibt ein neues Array zurück, das eine Kopie der Elemente des ursprünglichen Arrays enthält. Um beispielsweise ein Array zu kopieren myArray in der React-Komponente können wir den folgenden Code verwenden:
const myArray = [1, 2, 3];
const myArrayCopy = myArray.slice();
In diesem Beispiel deklarieren wir eine neue Variable myArrayCopy und weisen Sie ihr das Ergebnis eines Methodenaufrufs zu slice() für ein Array myArray. Jetzt myArrayCopy enthält eine Kopie der Elemente myArray.
Eine andere Möglichkeit, ein Array zu kopieren, besteht darin, den Operator zu verwenden spread. Es ermöglicht Ihnen, ein Array zu erweitern und seine Elemente an ein anderes Array zu übergeben. Hier ist ein Beispiel für die Verwendung des Operators spread um ein Array zu kopieren:
const myArray = [1, 2, 3];
const myArrayCopy = [. myArray];
In diesem Beispiel verwenden wir den Operator spread (. ) zum "Bereitstellen" von Array-Elementen myArray und sie an ein neues Array übergeben myArrayCopy. Jetzt myArrayCopy enthält eine Kopie der Elemente myArray.
In beiden Beispielen erhalten wir eine Kopie des Arrays, beachten Sie jedoch, dass es sich um eine Oberflächenkopie handelt - wenn sich Objekte oder verschachtelte Arrays im ursprünglichen Array befinden, werden sie "als Referenz" übergeben. Um eine tiefe Kopie des Arrays zu erstellen, dh eine Kopie, die Kopien aller verschachtelten Objekte und Arrays enthält, muss andere Methoden verwenden, z. B. eine Methode JSON.parse(JSON.stringify(myArray)). In den meisten Fällen ist jedoch eine oberflächliche Kopie ausreichend.
Kopieren eines JavaScript-Arrays in React
In React ist es sehr wichtig, JavaScript-Arrays korrekt zu kopieren, um unerwünschte Nebenwirkungen zu vermeiden. Im Folgenden sind zwei gängige Methoden zum Kopieren von Arrays aufgeführt:
1. Kopieren mit dem Spread-Operator
const originalArray = [1, 2, 3];const newArray = [. originalArray];Wenn Sie den spread-Operator verwenden, erstellen wir ein neues newArray und kopieren alle Elemente aus dem originalArray. Jetzt haben Änderungen, die am newArray vorgenommen werden, keine Auswirkungen auf das originalArray und umgekehrt.
2. Kopieren mit der slice-Methode
const originalArray = [1, 2, 3];const newArray = originalArray.slice();Die slice-Methode erstellt ein neues Array, das alle originalArray-Elemente enthält. Es ist hilfreich, sich daran zu erinnern, dass slice Argumente (Startindex und Endindex) akzeptieren kann, aber ohne Argumente kopiert es das gesamte ursprüngliche Array.
Beide Methoden stellen sicher, dass das Array vollständig kopiert und nicht nur darauf verwiesen wird. Auf diese Weise können Sie das neue Array sicher ändern, ohne das ursprüngliche Array zu beeinflussen.
Es ist wichtig zu beachten, dass beim Kopieren von Arrays, die komplexe Datenstrukturen enthalten (z. B. Objekte), eine oberflächliche Kopie erstellt wird, dh die Objekte werden zwischen dem ursprünglichen und dem neuen Array aufgeteilt. Wenn Sie ein Array mit allen Elementen tief kopieren möchten, wird empfohlen, spezielle Bibliotheken wie Lodash zu verwenden.cloneDeep.
Methoden zum Kopieren eines Arrays in JavaScript
In JavaScript gibt es mehrere Methoden zum Kopieren eines Arrays. Jede Methode hat ihre eigenen Besonderheiten und eignet sich für bestimmte Anwendungsfälle.
- Methode slice() - Gibt ein neues Array zurück, das eine Kopie von Elementen aus dem angegebenen Bereich enthält. Wenn die Methode ohne Argumente aufgerufen wird, erstellt sie eine vollständige Kopie des ursprünglichen Arrays.
- Concat() -Methode - erstellt ein neues Array, indem das ursprüngliche Array mit anderen Arrays und/oder Werten kombiniert wird.
- Die Array-Methode.from() - erstellt ein neues Array aus einem iterierbaren oder pseudomassive. Ermöglicht das Kopieren von Arrays auch mit der Konvertierung und Filterung von Elementen.
- Die Array-Methode.prototype.slice.call() (oder kurze Aufzeichnung [].slice.call() ) - Ermöglicht das Kopieren von Pseudomassys wie arguments .
- Die Array-Methode.prototype.map() - Erstellt ein neues Array, indem die angegebene Funktion auf jedes Element des ursprünglichen Arrays angewendet wird.
Die Auswahl der Methode zum Kopieren eines Arrays hängt von der jeweiligen Aufgabe und dem verwendeten Kontext ab. Bei der Auswahl einer Methode sollten Faktoren wie Leistung, Wartbarkeit und Lesbarkeit des Codes berücksichtigt werden.
Es wird empfohlen, die offizielle JavaScript-Dokumentation zu konsultieren, um weitere Informationen zu jeder Methode und ihren Funktionen zu erhalten.
Kopieren eines Arrays mit dem Spread-Operator in React
Um ein Array mit dem Spread-Operator zu kopieren, müssen Sie das ursprüngliche Array einfach in eckige Klammern mit der vorangestellten Dreifachfunktion übergeben. Zum Beispiel:
const originalArray = [1, 2, 3];
const copiedArray = [. originalArray];
Durch die Ausführung dieses Codes wird ein neues copiedArray erstellt, das alle originalArray-Elemente enthält.
Es ist jedoch wichtig zu beachten, dass der spread-Operator eine oberflächliche Kopie des Arrays erstellt. Das heißt, wenn das ursprüngliche Array verschachtelte Objekte oder andere Arrays enthält, verweist das neue Array auch auf dieselben Objekte oder Arrays wie das ursprüngliche Array. Wenn Sie eine tiefe Kopie des Arrays erstellen müssen, müssen Sie möglicherweise komplexere Methoden wie Rekursion oder die Verwendung der Lodash-Bibliothek verwenden.
Das Kopieren eines Arrays mit dem Spread-Operator ist eine einfache und unkomplizierte Möglichkeit, ein Array in React zu kopieren. Es vermeidet die Mutation des ursprünglichen Arrays, was bei der Arbeit mit Daten in React eine gute Übung ist.
