it-swarm.com.de

Ein Array von Objekten in ein anderes Array in Javascript kopieren

Wie kann ich jedes Element eines Arrays (in dem die Elemente Objekte sind) in ein anderes Array kopieren, sodass sie völlig unabhängig sind? Ich möchte nicht, dass ein Element in einem Array geändert wird, um das andere zu beeinflussen.

41
hAlE

Wenn das Zielarray noch nicht existiert ...

... können Sie slice() oder concat() verwenden. slice() ist wahrscheinlich idiomatischer (Sie sehen auch slice(0), aber der Standardwert ist 0, also ...):

var destinationArray = sourceArray.slice(); // Probably more idiomatic
// or
var destinationArray = sourceArray.concat();

Ab ES2015 (auch bekannt als ES6) gibt es auch Array.from, mit dem aus einem Array-ähnlichen Objekt (einschließlich eines tatsächlichen Arrays) ein neues Array erstellt wird:

var destinationArray = Array.from(sourceArray);

(Array.from kann für ältere JavaScript-Engines angepasst werden.)

Ab ES2015 können Sie die iterierbare Spread-Notation und ein Array-Literal mit einem beliebigen iterierbaren Element (einschließlich eines Arrays) verwenden:

var destinationArray = [...sourceArray];

Danach haben beide Arrays den gleichen Inhalt. Das Ändern eines Arrays ändert das andere nicht. Wenn ein Array-Eintrag ein Objekt ist, zeigt der Eintrag für dieses Objekt in beiden Arrays natürlich auf dasselbe Objekt. Dies ist keine "tiefe" Kopie.

Wenn das Zielarray vorhanden ist ...

... und Sie möchten den Inhalt des Quellarrays daran anhängen, können Sie Push verwenden:

destinationArray.Push.apply(destinationArray, sourceArray);

Dies funktioniert durch Aufrufen von Push für das Zielarray mithilfe der apply-Funktion von JavaScript-Funktionen, mit der Sie die Argumente für den Funktionsaufruf als Array angeben können. Push wird so viele Elemente pushen, wie Argumente vorhanden sind, sodass die Elemente aus dem Quellarray in das Zielarray kopiert werden.

In ES2015 und höher können Sie den Cleaner mit der iterierbaren Spread-Notation (...) erstellen:

destinationArray.Push(...sourceArray);

Beachten Sie, dass der Aufruf in beiden Fällen durch die maximale Anzahl von Funktionsargumenten der JavaScript-Engine begrenzt ist (zum jetzigen Zeitpunkt sind dies bei allen großen Engines mindestens Tausende und nicht Hunderttausende, zumindest nicht für Chrome V8) ]).

Hier ist eine ES5-Version:

var source1, dest1, source2, dest2;

snippet.log("If dest doesn't exist yet:");
source1 = [1, 2, 3, 4];
dest1 = source1.slice(0);
snippet.log("[before change] source1 = " + source1.join(", "));
snippet.log("[before change] dest1 = " + dest1.join(", "));
source1[2] = "three";
dest1[3] = "four";
snippet.log("[after change] source1 = " + source1.join(", "));
snippet.log("[after change] dest1 = " + dest1.join(", "));

snippet.log("If dest already exists and we're just appending:");
source2 = [1, 2, 3, 4];
dest2 = ['a', 'b', 'c', 'd'];
snippet.log("[before append] source2 = " + source2.join(", "));
snippet.log("[before append] dest2 = " + dest2.join(", "));
dest2.Push.apply(dest2, source2);
snippet.log("[before change] source2 = " + source2.join(", "));
snippet.log("[before change] dest2 = " + dest2.join(", "));
source2[2] = "three";
dest2[7] = "four";
snippet.log("[after change] source2 = " + source2.join(", "));
snippet.log("[after change] dest2 = " + dest2.join(", "));
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

84
T.J. Crowder

Ein einfacher Weg, um dieses Funktionieren zu erreichen, verwendet:

var cloneArray = JSON.parse(JSON.stringify(originalArray));

Ich habe Probleme mit arr.concat() oder arr.splice(0), um eine tiefe Kopie zu erhalten. Das obige Snippet funktioniert einwandfrei.

20
jsbisht

Ein guter Weg, um ein Array zu klonen, ist ein Array-Literal und der Spread-Operator . Dies wird durch ES2015 ermöglicht.

let objArray = [{name:'first'}, {name:'second'}, {name:'third'}, {name:'fourth'}];

let clonedArr = [...objArray];

console.log(clonedArr) // [Object, Object, Object, Object]

Sie finden diese Kopieroption in der MDN-Dokumentation für Spread-Operatorenhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) #Copy_an_array

Es ist auch eine bewährte Methode von Airbnb . https://github.com/airbnb/javascript#es6-array-spreads

Hinweis : In der Regel gehen die Spread-Operatoren in ES2015 beim Kopieren eines Arrays eine Ebene tiefer. Sie sind daher nicht zum Kopieren mehrdimensionaler Arrays geeignet.

4
MauricioLeal
var clonedArray = array.concat();
3
Ilya

Es gibt zwei wichtige Hinweise.

  1. Die Verwendung von array.concat() funktioniert nicht mit Angular 1.4.4 und jQuery 3.2.1 (dies ist meine Umgebung).
  2. Die array.slice(0) ist ein Objekt. Wenn Sie also etwas wie newArray1 = oldArray.slice(0); newArray2 = oldArray.slice(0) tun, beziehen sich die beiden neuen Arrays auf nur ein Array und das Ändern eines Arrays wirkt sich auf das andere aus.

Bei Verwendung von newArray1 = JSON.parse(JSON.stringify(old array)) wird der Wert alternativ kopiert, sodass jedes Mal ein neues Array erstellt wird.

1

Wenn Sie die Referenz behalten möchten:

Array.prototype.Push.apply(destinationArray, sourceArray);

1
Veikko Karsikko

Ich empfehle die Verwendung von concat(), wenn Sie nodeJS verwenden. In allen anderen Fällen habe ich festgestellt, dass slice(0) gut funktioniert.

0
bean5