Denne vejledning viser dig, hvordan du korrekt kopierer/kloner et array eller objekt i JavaScript – det er ikke så enkelt, som det ser ud til!
Kopiering af et array eller objekt kan virke simpelt – men JavaScript kaster en nøgle i gang – det faktum, at når du tildeler værdien af en variabel til en anden, refererer den den oprindelige variabel. Det betyder, at hvis værdien af den oprindelige variabel ændres, værdien af kopien ændres også!
For at komme uden om dette skal du klone arrayet – sikre, at nye variabler med deres egne værdier oprettes i et nyt array. JavaScript gør ikke indeholder en indbygget måde at gøre dette på, men der er selvfølgelig forskellige måder det kan opnås på.
Sådan gør man det ikke!
Dit første instinkt kan være at gøre følgende:
var pets = ['fish', 'parrot', 'cat']; var petsClone = pets;
DETTE VIRKER IKKE!
kæledyrsKlon bliver blot en reference til variablen kæledyr – ikke en kopi. kæledyr og petsClone vil ikke være kopier af hinanden, de vil begge være navne, der peger på det samme variabel.
Hvis den ene opdateres, ændres den anden, hvilket muligvis ikke er den adfærd, du ønsker, hvis du kopierer et array.
Shallow vs Deep Copy – Sikker kloning af ALLE værdier i en matrix i JavaScript
Når du kloner arrays i JavaScript, vil du se referencer til shallow og dyb kloning eller kopiering.
overfladisk kloning vil kun klone værdierne i det første niveau af arrayet. Eventuelle indlejrede værdier vil IKKE blive klonet, så pas på denne, hvis du arbejder med multidimensionelle arrays! Overfladisk kloning er stadig nyttig, når du arbejder med todimensionelle arrays og ønsker at fokusere på ydeevne og kodeenkelhed.
Shallow Cloning Arrays ved hjælp af ES6 Spread Syntax (…)
Dette er sandsynligvis den enkleste måde at kopiere/klone et array på ved at bruge JavaScripts spredte syntaks:
var pets = ['fish', 'parrot', 'cat']; var petsClone = [...pets];
Den spredte syntaks udvider værdierne i et array, så kalder det inde i et nyligt erklæret array vil indholdet af det andet array klones ind i det nye array.
Brug af JSON-funktioner til at dybe klone et array
Nedenfor er en multidimensional eller indlejret array er erklæret. Arrayet kæledyr indeholder to underarrays, der hver indeholder deres egne værdier. Forsøg på at bruge spredningssyntaksen ovenfor vil ikke klone værdierne i disse underarrays, vil de blive refereret.
Du kunne skriv en kompleks løkke for at dykke ned i hver under-array og klone værdierne, men der er en meget bedre, om end en lille hacket løsning – at konvertere det originale array til JSON og derefter afkode det til et nyt array.
var pets = [['dog', 'cat'], ['fish', 'frog']]; var petsCopy = JSON.parse(JSON.stringify(pets));
Hacky-løsninger er ofte de bedste løsninger. JSON.stringify() bruges til at konvertere det originale array til en JSON-streng og JSON.parse() bruges til at afkode den streng tilbage til et JavaScript-array, en helt separat klon af originalen, som derefter tildeles en ny variabel.
Pas på tilpassede klasser/objekter
Hvis du dybkloner et array, der indeholder brugerdefinerede objektklasser, vil de blive konverteret til generiske objekter, og alle referencer i dem vil gå tabt!
Hvorvidt dette er et problem eller ej, afhænger helt af, hvad du forsøger at opnå. Du skal muligvis gå gennem det klonede array og bruge Object.assign() for at sikre, at klonede objekter er af den rigtige klasse.
Test, Test, Test
Hvis du bygger noget missionskritisk, eller som omhandler penge (som en onlinebutik), og du duplikerer arrays, skal du sørge for at teste din kode og sikre dig, at din kode opfører sig på den måde, du har tænkt dig!
JavaScripts adfærd med at henvise til variabler i stedet for at duplikere dem er en fælles hindring for nye JavaScript-udviklere. At vænne sig til at teste din kode vil sikre, at du opdager eventuelle problemer før de bliver et problem for dine brugere.