Javascript Kopieer Array

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

In JavaScript is het kopiëren van een array niet zo eenvoudig als het gebruik van de toewijzingsoperator (=) om een duplicaat te maken. Als je dit al eerder hebt geprobeerd, zal het je verbazen dat het alleen naar de originele lijst linkt. Wat is het probleem?

In deze handleiding leggen we uit hoe u een JavaScript-array kopieert. We bekijken de code voor drie kopieerstrategieën voor JavaScript-arrays, zodat u aan de slag kunt met het kopiëren van arrays.

Het probleem met het kopiëren van JavaScript-arrays

Op een bepaald niveau is de " = & Rdquo; De operator maakt een kopie van een array in een nieuwe variabele . dit is meer een aanwijzer dan een kopie. Dit komt omdat de operator "=" een verwijzing naar een originele array maakt. Er wordt geen duplicaat van de bestaande tabel gemaakt.

Laten we proberen maak een kopie van een array met behulp van de toewijzingsoperator zonder enige andere code:

Onze code retourneert:

Ik Het lijkt erop dat onze tabel is gekopieerd. "Fruit" bevat alle waarden ‚Äã‚Äãvan onze "berries" array .

Laten we nu proberen een element toe te voegen aan de "fruits" array map:

We hebben "Melon" toegevoegd aan de fruitreeks. Vervolgens printen we de waarden ‚Äã‚Äãvoor "fruit" en "berries" naar de console:

Zowel "fruit" als "berries" bevatten dezelfde waarden. Dit komt omdat we technisch gezien onze baai niet hebben gekloond. We hebben zojuist een verwijzing naar deze gemaakt.

Elke keer dat we de array "berries" manipuleren, worden de wijzigingen aangebracht in het veld van de array "fruits".

Een JavaScript-array kopiëren

De toewijzingsoperator kopieert geen array. We moeten een andere aanpak gebruiken. Gelukkig voor ons zijn er genoeg manieren om een kopie van een schilderij te maken. De drie belangrijkste benaderingen zijn:

Laten we bespreek het een voor een.

De spread-operator gebruiken

De spread-operator is een functie die is geïntroduceerd in JavaScript ES6. Het biedt toegang tot inhoud van . an iterable Deze operator wordt vaak gebruikt om maak een ondiepe kopie van een array

De operator spread heeft drie punten als een ellips (& hellip;).. Laten we een kopie maken van onze "berries" array van eerder:

We hebben de spread-operator gebruikt om een kopie van onze array te maken. We controleren de waarden ‚Äã‚Äãin onze arrays t o zorg ervoor dat ze correct zijn:

Onze code retourneert:

De waarde " Meloen " Is alleen toegevoegd aan "fruit" Carrier. In feite hebben we de broadcast-operator gebruikt om een dubbele vector "berries" te maken. Nu is de tabel "fruit" zijn eigen tabel. Zijn waarden worden gescheiden door de tabellen "berry" .

een lus gebruiken

het beproefde, het gebruik van een for-lus is een goede manier om een kopie van een schilderij te maken .

Dit methode heeft mogelijk niet de voorkeur als propagatie-operator omdat deze meerdere regels code vereist. Een for-lus kopieert echter wel een object.

We hebben twee lijsten gedeclareerd: berries en fruits. Fruits is in eerste instantie een lege lijst. We hebben dus een for-lus gebruikt om alle elementen van de l iste "berries". Voor elk item in de lijst wordt de waarde gekopieerd naar de map "fruit" array .

Laten we onze test om te zien of onze arrays gescheiden zijn:

Onze code geeft als resultaat:

Succes! "Berries" en "fruit" zijn twee aparte tabellen.

Array.from () gebruiken

De -methode Array.from () verandert elk itereerbaar object in een array via elk element van een iterable en voegt het toe aan een nieuwe array. Dit betekent dat het kan worden gebruikt om een array te kopiëren.

Laten we maak opnieuw een kopie van onze "berries" array:

Deze oplossing vereist, net als de syntaxis van de spread-operator, slechts twee regels code. Het is een efficiënte en beknopte manier om een tabel te kopiëren. Laten we nu een test uitvoeren om onze nieuwe arrays te controleren:

Onze code geeft als resultaat:

Onze tabellen zijn met succes gekopieerd.

Conclusie

Het kopiëren van een array in JavaScript is eenvoudig als u weet hoe u het moet doen.

De toewijzingsoperator is niet voldoende om een array te kopiëren als u een aparte versie van een array. Dit komt omdat de toewijzingsoperator een verwijzing naar een bestaande array maakt; maakt geen nieuwe tabel.

U kunt een kopie van een array maken met behulp van de spread-operator, een for-lus of de methode Array.from () . U bent nu klaar om tabellen in JavaScript te kopiëren als een expert.