So klonen Sie ein Array in JavaScript

JavaScript bietet viele Möglichkeiten, etwas zu tun. Ich habe über 10 Möglichkeiten geschrieben, Pipe / Compose in JavaScript zu schreiben, und jetzt machen wir Arrays.

1. Spread Operator (flache Kopie)

Seit dem Ausfall von ES6 ist dies die beliebteste Methode. Es ist eine kurze Syntax und Sie werden sie unglaublich nützlich finden, wenn Sie Bibliotheken wie React und Redux verwenden.

numbers = [1, 2, 3]; numbersCopy = [...numbers]; 

Hinweis: Dadurch werden mehrdimensionale Arrays nicht sicher kopiert. Array- / Objektwerte werden als Referenz anstatt als Wert kopiert .

Das ist in Ordnung

numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone 

Das ist nicht gut

nestedNumbers = [[1], [2]]; numbersCopy = [...nestedNumbers]; numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 

2. Gut alt für () Schleife (flache Kopie)

Ich stelle mir vor, dass dieser Ansatz am wenigsten beliebt ist, wenn man bedenkt, wie trendig funktionale Programmierung in unseren Kreisen geworden ist.

Rein oder unrein, deklarativ oder zwingend, es erledigt den Job!

numbers = [1, 2, 3]; numbersCopy = []; for (i = 0; i < numbers.length; i++) { numbersCopy[i] = numbers[i]; } 

Hinweis: Dadurch werden mehrdimensionale Arrays nicht sicher kopiert. Da Sie den =Operator verwenden, werden Objekte / Arrays nach Referenz anstatt nach Wert zugewiesen .

Das ist in Ordnung

numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone 

Das ist nicht gut

nestedNumbers = [[1], [2]]; numbersCopy = []; for (i = 0; i < nestedNumbers.length; i++) { numbersCopy[i] = nestedNumbers[i]; } numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 

3. Good Old while () Schleife (flache Kopie)

Gleich wie - forunrein, Imperativ, bla, bla, bla ... es funktioniert! ?

numbers = [1, 2, 3]; numbersCopy = []; i = -1; while (++i < numbers.length) { numbersCopy[i] = numbers[i]; } 

Hinweis: Dadurch werden Objekte / Arrays auch nach Referenz anstatt nach Wert zugewiesen .

Das ist in Ordnung

numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone 

Das ist nicht gut

nestedNumbers = [[1], [2]]; numbersCopy = []; i = -1; while (++i < nestedNumbers.length) { numbersCopy[i] = nestedNumbers[i]; } numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 

4. Array.map (flache Kopie)

Zurück im modernen Gebiet finden wir die mapFunktion. In der Mathematik verwurzelt mapist das Konzept, eine Menge in eine andere Art von Menge umzuwandeln und dabei die Struktur zu erhalten.

Im Englischen bedeutet dies, dass Array.mapjedes Mal ein Array mit derselben Länge zurückgegeben wird.

Verwenden Sie mapeine doubleFunktion , um eine Liste von Zahlen zu verdoppeln .

numbers = [1, 2, 3]; double = (x) => x * 2; numbers.map(double); 

Was ist mit Klonen?

In diesem Artikel geht es um das Klonen von Arrays. Um ein Array zu duplizieren, geben Sie einfach das Element in Ihrem mapAufruf zurück.

numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x); 

Wenn Sie ein bisschen mathematischer sein möchten, (x) => xheißt das Identität . Es gibt jeden Parameter zurück, den es erhalten hat.

map(identity) klont eine Liste.

identity = (x) => x; numbers.map(identity); // [1, 2, 3] 

Hinweis: Dadurch werden Objekte / Arrays auch nach Referenz anstatt nach Wert zugewiesen .

5. Array.filter (flache Kopie)

Diese Funktion gibt genau wie ein Array zurück, mapes ist jedoch nicht garantiert, dass es dieselbe Länge hat.

Was ist, wenn Sie nach geraden Zahlen filtern?

[1, 2, 3].filter((x) => x % 2 === 0); // [2] 

Die Länge des Eingabearrays betrug 3, aber die resultierende Länge beträgt 1.

Wenn Ihr filterPrädikat jedoch immer zurückkehrt true, erhalten Sie ein Duplikat!

numbers = [1, 2, 3]; numbersCopy = numbers.filter(() => true); 

Jedes Element besteht den Test und wird zurückgegeben.

Hinweis: Dadurch werden Objekte / Arrays auch nach Referenz anstatt nach Wert zugewiesen .

6. Array.reduce (flache Kopie)

Ich fühle mich fast schlecht, reducewenn ich ein Array klone, weil es so viel mächtiger ist. Aber los geht's ...

numbers = [1, 2, 3]; numbersCopy = numbers.reduce((newArray, element) => { newArray.push(element); return newArray; }, []); 

reduce transformiert einen Anfangswert, während er eine Liste durchläuft.

Hier ist der Anfangswert ein leeres Array, und wir füllen es im weiteren Verlauf mit jedem Element. Dieses Array muss von der Funktion zurückgegeben werden, die in der nächsten Iteration verwendet werden soll.

Hinweis: Dadurch werden Objekte / Arrays auch nach Referenz anstatt nach Wert zugewiesen .

7. Array.slice (flache Kopie)

sliceGibt eine flache Kopie eines Arrays zurück, die auf dem von Ihnen angegebenen Start- / Endindex basiert.

Wenn wir die ersten 3 Elemente wollen:

[1, 2, 3, 4, 5].slice(0, 3); // [1, 2, 3] // Starts at index 0, stops at index 3 

If we want all the elements, don’t give any parameters

numbers = [1, 2, 3, 4, 5]; numbersCopy = numbers.slice(); // [1, 2, 3, 4, 5] 

Note: This is a shallow copy, so it also assigns objects/arrays by reference instead of by value.

8. JSON.parse and JSON.stringify (Deep copy)

JSON.stringify turns an object into a string.

JSON.parse turns a string into an object.

Combining them can turn an object into a string, and then reverse the process to create a brand new data structure.

Note: This onesafely copies deeply nested objects/arrays!

nestedNumbers = [[1], [2]]; numbersCopy = JSON.parse(JSON.stringify(nestedNumbers)); numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1], [2]] // [[1, 300], [2]] // These two arrays are completely separate! 

9. Array.concat (Shallow copy)

concat combines arrays with values or other arrays.

[1, 2, 3].concat(4); // [1, 2, 3, 4] [1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5] 

If you give nothing or an empty array, a shallow copy’s returned.

[1, 2, 3].concat(); // [1, 2, 3] [1, 2, 3].concat([]); // [1, 2, 3] 

Note: This also assigns objects/arrays by reference instead of by value.

10. Array.from (Shallow copy)

This can turn any iterable object into an array. Giving an array returns a shallow copy.

numbers = [1, 2, 3]; numbersCopy = Array.from(numbers); // [1, 2, 3] 

Note: This also assigns objects/arrays by reference instead of by value.

Conclusion

Well, this was fun ?

I tried to clone using just 1 step. You’ll find many more ways if you employ multiple methods and techniques.