Javascript Kopieren Array

| | | | | | | | | | | | | | | | | | | | | |

In JavaScript ist das Kopieren eines Arrays nicht so einfach wie die Verwendung des Zuweisungsoperators (=), um ein Duplikat zu erstellen. Wenn Sie dies schon einmal ausprobiert haben, werden Sie uberrascht sein, dass nur ein Link zur ursprunglichen Liste erstellt wird. Was ist der Deal?

In diesem Leitfaden werden wir daruber sprechen, wie ein JavaScript-Array kopiert wird. Wir gehen den Code fur drei Strategien zum Kopieren von JavaScript-Arrays durch, damit Sie mit dem Kopieren von Arrays beginnen können.

Das Problem beim Kopieren von JavaScript-Arrays

Auf einer gewissen Ebene ist das "=&rdquo ; Operator erstellt eine Kopie eines Arrays in eine neue Variable. Es ist jedoch eher ein Zeiger als eine Kopie. Dies liegt daran, dass "=‚" Operator erstellt eine Referenz auf ein ursprungliches Array. Es wird kein Duplikat des vorhandenen Arrays erstellt.

Versuchen wir, mit dem Zuweisungsoperator eine Kopie eines Arrays zu erstellen ohne anderen Code:

Unser Code gibt zuruck:

Anscheinend wurde unser Array kopiert. ‚ÄûFruchte‚" enth√§lt alle Werte unserer "Beeren‚"

Jetzt versuchen wir, ein Element zum "Obst‚" Array:

Wir haben "Melone‚" zum Obstsortiment. Anschlie√üend drucken wir die Werte von "Fruchte‚" und ‚ÄûBeeren‚" zur Konsole:

Beide "Fruchte‚" und ‚ÄûBeeren‚" enthalten die gleichen Werte. Das liegt daran, dass wir unser Array technisch nicht geklont haben. Wir haben gerade einen Verweis darauf erstellt.

Jedes Mal, wenn wir die "Beeren‚" -Array werden die √Ñnderungen im "Fruchte‚" array.

So kopieren Sie ein JavaScript-Array

Der Zuweisungsoperator kopiert kein Array. Wir mussen einen anderen Ansatz wählen. Zum Gluck fur uns gibt es viele Möglichkeiten, eine Kopie eines Arrays zu erstellen. Die drei wichtigsten Ansätze sind:

  • Verwendung des Spread-Operators
  • Verwendung einer for-Schleife
  • Array.from verwenden

Lassen Sie uns diese einzeln besprechen.

Verwenden des Spread-Operators

Der Spread-Operator ist eine in JavaScript ES6 eingefuhrte Funktion Er ermöglicht Ihnen den Zugriff auf den Inhalt eines iterierbaren Objekts. Dieser Operator wird häufig verwendet, um eine flache Kopie eines Arrays zu erstellen.

Der Spread-Operator besteht aus drei Punkten, wie eine Ellipse (&hellip ;). Versuchen wir, eine Kopie unseres "berries‚"-Arrays von vorhin zu erstellen:

Wir haben verwendet den Spread-Operator, um eine Kopie unseres Arrays zu erstellen. Lassen Sie uns die Werte unserer Arrays uberprufen, um sicherzustellen, dass sie korrekt sind:

Unser Code gibt Folgendes zuruck:

Der Wert &ldquo ;Melone‚" wurde nur zu den "Fruchten‚" Array. Dies liegt daran, dass wir den Spread-Operator verwendet haben, um ein Duplikat der "Beeren‚" Array. Jetzt sind die "Fruchte‚" Array ist ein eigenes Array. Seine Werte sind getrennt von den "Beeren‚" Array.

Verwenden einer for-Schleife

Die bewährte Methode, eine for-Schleife zu verwenden, ist eine gute Möglichkeit, eine Kopie eines Arrays zu erstellen.

Diese Methode ist möglicherweise nicht so beliebt wie der Spread-Operator, da sie mehr Codezeilen erfordert. Trotzdem kopiert eine for-Schleife ein Objekt gut.

Wir haben zwei Listen deklariert: Beeren und Fruchte. Fruits ist zun√§chst eine leere Liste. Dann haben wir eine for-Schleife verwendet, um jedes Element in den "Beeren‚" auffuhren. Fur jedes Element in der Liste wird der Wert in das Feld "Fruchte‚" array.

Lassen Sie unseren Test ausfuhren, um zu sehen, ob unsere Arrays getrennt sind:

Unser Code gibt Folgendes zuruck:

Erfolg! ‚ÄûBeeren‚" und ‚ÄûFruchte‚" sind zwei separate Arrays.

Verwenden von Array.from()

Die Methode Array.from() verwandelt jedes iterierbare Objekt in ein Array durch jedes Element in einem Iterable und hängt es an ein neues Array an. Das bedeutet, dass es zum Kopieren eines Arrays verwendet werden kann.

Erstellen wir erneut eine Kopie unseres "Beeren‚"-Arrays:

Diese Lösung benötigt wie die Spread-Operator-Syntax nur zwei Codezeilen. Es ist eine effiziente und prägnante Methode zum Kopieren eines Arrays ;s fuhren einen Test durch, um unsere neuen Arrays zu uberprufen:

Unser Code gibt Folgendes zuruck:

Unsere Arrays wurden erfolgreich kopiert.

Schlussfolgerung

Das Kopieren eines Arrays in JavaScript ist einfach, wenn Sie wissen, wie es geht.

Der Zuweisungsoperator reicht nicht aus, um ein Array zu kopieren, wenn Sie möchten Erstellen Sie eine separate Version eines Arrays. Dies liegt daran, dass der Zuweisungsoperator einen Zeiger auf ein vorhandenes Array erstellt; es wird kein neues Array erstellt.

Sie können eine Kopie eines Arrays erstellen, indem Sie den Spread-Operator, eine for-Schleife oder die Methode Array.from() verwenden . Jetzt sind Sie bereit, Arrays in JavaScript wie ein Experte zu kopieren.