In JavaScript, Het klonen van een array betekent het maken van een nieuwe array met dezelfde elementen als de originele array. Het klonen van een array in JavaScript is handig als u een nieuwe array wilt maken die dezelfde elementen bevat als een bestaande array, zonder de oorspronkelijke array te wijzigen.

Wanneer array klonen?

Als u bepaalde bewerkingen op een array wilt uitvoeren, zoals sorteren, filteren of toewijzen, maar u de oorspronkelijke array niet wilt wijzigen, kunt u een kloon van de originele array maken en in plaats daarvan de bewerkingen op de kloon uitvoeren.

• Wanneer u een array als argument aan een functie doorgeeft, wilt u er wellicht voor zorgen dat de functie de oorspronkelijke array niet wijzigt. In dit geval kunt u in plaats daarvan een kloon van de array doorgeven.
• Als u de originele array wilt behouden voor toekomstig gebruik, kunt u een kloon van de originele array maken en de kloon gebruiken voor verdere verwerking of manipulatie.
• Als u een array hebt die objecten of arrays als elementen bevat, en u wilt voorkomen dat de oorspronkelijke objecten of arrays worden gewijzigd, kunt u een kloon van de array maken om mee te werken, zodat wijzigingen aan de objecten of arrays in de kloon niet worden doorgevoerd. invloed hebben op de originele objecten of arrays.

Dus, een array klonen in JavaScript is een nuttige techniek om met arrays te werken op een manier die de integriteit van de originele array en zijn elementen behoudt.

Hier volgen enkele veelvoorkomende gebruiksscenario's voor het klonen van een array:

Inhoudsopgave

• Wanneer array klonen?
• De methode Array.slice() gebruiken
• Met behulp van de spread-operator
• De methode Array.from() gebruiken
• De methode Array.concat() gebruiken
• Een for-lus gebruiken
• De methode Array.map() gebruiken
• De methode Array.from() gebruiken met een kaartfunctie
• De methode Array.of() gebruiken
• Met behulp van de methoden JSON.parse() en JSON.stringify().
• De Object.assign()-methode gebruiken
• Met behulp van de Array.reduce()-methode

De methode Array.slice() gebruiken

Wij gebruiken de slice-methode om een ​​ondiepe kopie van een array te maken. Met deze methode wordt een nieuwe array gemaakt met een subset van de elementen uit de oorspronkelijke array.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = originalArray.slice(); console.log(clonedArray);>

[ 1, 2, 3 ]>

De spread-operator gebruiken

De ... gebruiken verspreider … is een beknopte en gemakkelijke manier om een ​​array in JavaScript te klonen. Met de spread-operator kunt u een array uitbreiden in afzonderlijke elementen, die vervolgens kunnen worden gebruikt om een ​​nieuwe array te maken.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = [...originalArray]; console.log(clonedArray);>

[ 1, 2, 3 ]>

De methode Array.from() gebruiken

De ... gebruiken Array.from() methode is een andere manier om een ​​array in JavaScript te klonen. Deze methode maakt een nieuwe array van een bestaande array, met behulp van een optionele toewijzingsfunctie om de waarden in de nieuwe array te transformeren.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray); console.log(clonedArray);>

[ 1, 2, 3 ]>

De methode Array.concat() gebruiken

De ... gebruiken Array.concat() methode is een andere manier om een ​​array in JavaScript te klonen. Met deze methode wordt een nieuwe array gemaakt door twee of meer arrays samen te voegen.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = [].concat(originalArray); console.log(clonedArray);>

[ 1, 2, 3 ]>

Een for-lus gebruiken

Deze methode omvat het doorlopen van elk element in de oorspronkelijke array en het kopiëren van elk element naar een nieuwe array.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = []; for (let i = 0; i < originalArray.length; i++) {  clonedArray.push(originalArray[i]); } console.log(clonedArray);>

[ 1, 2, 3 ]>

De methode Array.map() gebruiken

De ... gebruiken Array.map() methode is een andere manier om een ​​array in JavaScript te klonen. Deze methode creëert een nieuwe array door elk element uit de originele array aan een nieuwe waarde toe te wijzen.

voor elk typoscript

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>X); console.log(gekloondeArray);>

[ 1, 2, 3 ]>

De methode Array.from() gebruiken met een kaartfunctie

De ... gebruiken Array.from() methode met een kaartfunctie is een andere manier om een ​​array in JavaScript te klonen. Deze methode creëert een nieuwe array door elk element uit de originele array toe te wijzen aan een nieuwe waarde met behulp van een opgegeven functie.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>X); console.log(gekloondeArray);>

[ 1, 2, 3 ]>

De methode Array.of() gebruiken

Met deze methode wordt een nieuwe array gemaakt met dezelfde elementen als de oorspronkelijke array.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = Array.of(...originalArray); console.log(clonedArray);>

[ 1, 2, 3 ]>

Met behulp van de methoden JSON.parse() en JSON.stringify().

De ... gebruiken JSON.parse() En JSON.stringify() methoden is een andere manier om een ​​array in JavaScript te klonen. Deze methode omvat het converteren van de originele array naar een JSON-tekenreeks en het vervolgens parseren van de JSON-tekenreeks om een ​​nieuwe array te maken.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);>

[ 1, 2, 3 ]>

De Object.assign()-methode gebruiken

De ... gebruiken Object.assign() methode is een andere manier om een ​​array in JavaScript te klonen. Deze methode maakt een nieuwe array door de eigenschappen van de originele array naar een nieuw object te kopiëren.

Voorbeeld: Dit voorbeeld toont de implementatie van de hierboven uiteengezette aanpak.

const originalArray = [1, 2, 3]; const clonedArray = Object.assign([], originalArray); console.log(clonedArray);>

[ 1, 2, 3 ]>

Met behulp van de Array.reduce()-methode

De Array.reduce()-methode voert een reducerfunctie uit op elk element van de array, wat resulteert in een enkele uitvoerwaarde. We kunnen het gebruiken om een ​​nieuwe array te construeren met dezelfde elementen als de originele array.

Syntaxis:

array.reduce((accumulator, currentValue, currentIndex, array) =>{ ... }, initiëleWaarde);>

Voorbeeld : In dit voorbeeld gebruiken we de methode Array.reduce() om een ​​kloon van een array te maken.

// Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(val);  retourzending; }, []); // Geef de originele en gekloonde arrays weer console.log('Original Array:', originalArray); // Uitvoer: [1, 2, 3, 4] console.log('Cloned Array:', clonedArray); // Uitvoer: [1, 2, 3, 4]>

Original Array: [ 1, 2, 3, 4 ] Cloned Array: [ 1, 2, 3, 4 ]>

Opmerking: Bij het klonen van een array is het dus belangrijk om rekening te houden met de complexiteit van de gegevens en de prestatievereisten van de applicatie.