Hvordan kopiere matriseelementer i JavaScript

JavaScript tilbyr forskjellige metoder for Kopiering av arrayelementer. Arrays i JavaScript kan omfatte objekter, referanser og primitive verdier. Når du har den primitive typen data, er oppgaven med å kopiere matriseelementer ganske enkel; Når det gjelder objekter og referanser, må du imidlertid velge mellom Grunt og Dyp kopiering prosedyrer nøye.

Når det finnes referanser i en matrise, kopierer den grunne kopien bare referanseadressene. Så hvis du gjør noen endringer i den ene kopien, vil modifiseringen også gjenspeile i den andre kopien; Når minneplasseringene deles. Du kan klone matriseelementene ved hjelp av dyp kopiering for å unngå denne situasjonen.

Denne oppskrivningen vil diskutere metodene for å kopiere matriseelementer i JavaScript ved hjelp av passende eksempler.

Hvordan kopiere matriseelementer i JavaScript

JavaScript -matriser regnes som referansetyper Noe som betyr at hvis du tildeler en matrise til en annen matrise ved å bruke oppdragsoperatøren "=”, Den vil bare tilordne referansen til den opprinnelige matrisen, og den vil ikke kopiere matriseelementene.

Etter referanseoppgaven, når du legger til eller endrer elementene i den andre matrisen, vil de første matriseelementene også bli berørt. Du kan ha en bedre forståelse ved hjelp av følgende eksempel:

Eksempel

For eksempel har vi opprettet en matrise som heter “fugler”Å ha følgende elementer:

var fugler = ['papegøye', 'kråke'];

I neste trinn vil vi prøve å tildele “fugler" til "Newbirds”Array ved å bruke“=”Oppdragsoperatør:

var newbirds = fugler;
konsoll.Logg (Newbirds);

Etter det vil vi legge til et nytt element til "Newbirds”Array ved hjelp av JavaScript push () -metoden:

Newbirds.Push ('Pigeon')

Til slutt vil vi vise elementene i "fugler”Og“Newbirds”Array -elementer i konsollvinduet:

konsoll.logg (fugler);
konsoll.Logg (Newbirds);

Undergitt utgang betyr at når har kopiert "fugler”Array -elementer ved å bruke oppdragsoperatøren”=”, Endringene som er gjort etterpå brukes på begge matriser:

På dette tidspunktet har du forstått at matriser anses som referanseverdier i JavaScript, så når du bruker oppdragsoperatøren, vil bare referansen til den opprinnelige matrisen bli kopiert, ikke matriseelementene.

I JavaScript kan du bruke "Grunne kopi”Eller“Dyp kopi”Metoder for kopiering av matriseelementer. Høres disse begrepene nye for deg? Ingen bekymringer! Vi vil forklare dem i de neste seksjonene.

Grunt kopi i JavaScript

En bitmessig kopi av et objekt kalles en grunne kopi.

• I grunne kopi opprettes et nytt objekt med en eksakt kopi av de spesifiserte objektverdiene.
• Grunt kopi brukes mest til å kopiere det første nivået, noe som betyr at du bare kan klone elementene i en enimensjonal eller 1D -matrise.
• Hvis det opprinnelige objektet inneholder noen referanser, vil bare referanseadressene bli kopiert.

De Spred operatør […], skive(), og concat () Metoder gjør deg i stand til å være grunne kopieringselementer i JavaScript.

Dyp kopi i JavaScript

Hvis du vil kopiere elementene i en flerdimensjonal matrise, må du utføre den dype kopieringsoperasjonen for å kopiere de originale matriseelementene.

Begrepet “Dyp kopi”Refererer til en rekursiv kopieringsprosedyre. For det første oppretter den en ny objektsamling og kopierer deretter rekursivt de spesifiserte matriseelementene. Så vi kan si at når det gjelder dyp kopi, blir en komplett JavaScript-matrise kopiert eller klonet inn i en annen matrise, og den kopierer det første nivået og alle de nestede elementene i en flerdimensjonal matrise.

JSON.Stringify () og JSON.parse () Metoder brukes til å kopiere flerdimensjonal matrise, der JSON.Stringify () -metode vil konvertere det spesifiserte objektet til streng, som du kan konvertere til matrise ved hjelp av JSON.parse () -metode.

La oss nå sjekke ut noen praktiske eksempler for å kopiere enkelt- og flerdimensjonale matriser med de nevnte grunne og dype kopimetodene.

Hvordan kopiere matriseelementer i JavaScript ved hjelp av spredningsoperatør

I JavaScript, "spre”Operatør kan brukes til å kopiere eller spre matriseelementene. Tre påfølgende prikker “.. ”Representere spredningsoperatøren. Husk at spredningsoperatøren bare vil kopiere matriseelementene på nivå en, og de nestede elementene blir passert som referanser.

Syntaks av spredt operatør for å kopiere arrayelement

var array2 = [... array1];

Her vil spredningsoperatøren kopiere elementene i “Array1" til "Array2”.

Eksempel: Hvordan kopiere matriseelementer i JavaScript ved hjelp av spredningsoperatør

Først av alt vil vi lage en ny matrise som heter “fugler”Å ha to elementer:“Papegøye”Og“Kråke”:

var fugler = ['papegøye', 'kråke'];

Deretter vil vi kopiere “fugler”Array -elementer til“Newbirds”Array:

var newbirds = [… fugler];
konsoll.Logg (Newbirds);

I tillegg kan du bekrefte hvis du legger til et nytt element i "Newbirds”Array vil endre“fugler”Array eller ikke:

Newbirds.Push ('Pigeon')
konsoll.Logg (Newbirds);
konsoll.logg (fugler);

Som du kan se av utgangen, har vi med hell kopiert "fugler”Array -elementer til“Newbirds”Array, og skyve nye elementer til“Newbirds”Har ikke brukt noen endringer i“fugler”Array:

Hvordan kopiere matriseelementer i JavaScript ved hjelp av skive () -metode

JavaScript -skive () -metoden brukes til å kopiere matriseelementer til et annet objekt eller matrise. Den opprinnelige matrisen vil ikke bli endret i tilfelle bruk av skive ().

Syntaks av skive () -metode for å kopiere matriseelementer

var array2 = array1.skive();

I henhold til syntaksen vil skive () -metoden kopiere elementene i "Array1”I“Array2”.

Eksempel: Hvordan kopiere matriseelementer i JavaScript ved hjelp av skive () -metode

I det undergitte eksemplet vil vi bruke "skive()”Metode for å kopiere“fugler”Array -elementer til“Newbirds”Array:

var fugler = ['papegøye', 'kråke'];
var newbirds = fugler.skive();
konsoll.Logg (Newbirds);

Nå, skyver nye elementer i “Newbirds”Array vil ikke endre“fugler”Array:

Newbirds.Push ('Pigeon')
konsoll.Logg (Newbirds);
konsoll.logg (fugler);

Her er utdataene vi fikk fra å utføre det ovennevnte programmet:

Fra ovennevnte utgang kan det sees tydelig at å legge til elementer i "Newbirds”Array har ikke påvirket elementene i“fugler”Array.

Hvordan kopiere matriseelementer i JavaScript ved hjelp av concat () -metode

“concat ()”Er en annen nyttig JavaScript -metode som kan hjelpe deg med å kopiere matriseelementer. I concat () -metoden kan du ta en tom matrise og kopiere de originale matriseelementene til den. Den vil lage en ny kopi av den spesifiserte matrisen.

Syntaks av concat () -metode for å kopiere matriseelementer

var array2 = [].concat (array1);

I den ovennevnte syntaks vil concat () -metoden kopiere “Array1”Elementer i et tomt utvalg [], og da blir resultatet lagret i“Array2”.

Eksempel: Hvordan kopiere matriseelementer i JavaScript ved hjelp av concat () -metode

Nå vil vi bruke JavaScript “concat ()”Metode for å kopiere elementene i“fugler”Array til“Newbirds”:

var fugler = ['papegøye', 'kråke'];
var newbirds = [].konkat (fugler);
konsoll.Logg (Newbirds);

Neste, vil vi trykk et nytt elementer til “Newbirds”Array og sjekk om den oppdaterer“fugler”Array også:

Newbirds.Push ('Pigeon')
konsoll.Logg (Newbirds);
konsoll.logg (fugler);

Ta en titt på den undergitte utgangen:

Som du kan se i den ovennevnte utgangen, skyver nye elementer i “Newbirds”Array har ikke endret“fugler”Array.

Hvordan kopiere flerdimensjonale matriseelementer i JavaScript

Hvis du vil kopiere elementer fra en flerdimensjonal matrise, kan du bruke JSON.Stringify () og JSON.parse () metoder. JSON.Stringify () -metode vil konvertere det spesifiserte objektet til en streng, som deretter kan konverteres til en matrise ved hjelp av JSON.parse () -metode.

Syntaks for å kopiere flerdimensjonale matriseelementer

var array2 = json.Parse (JSON.Stringify (Array1));

For det første “JSON.Stringify ()”Metoden vil konvertere“Array1”For å strenge og så vil den analysere det til en matrise (objekt) ved hjelp av“JSON.parse ()”Metode. De returnerte matriseelementene vil deretter bli kopiert til "Array2”.

Eksempel: Hvordan kopiere flerdimensjonale matriseelementer i JavaScript

I dette eksemplet har vi brukt JSON.Stringify () og JSON.parse () metoder for å kopiere elementene i flerdimensjonalt “fugler”Array til“Newbirds”:

var fugler = [navn: 'papegøye', navn: 'kråke'];
var newbirds = json.Parse (JSON.Stringify (fugler));
konsoll.Logg (Newbirds);

Den ovennevnte utgangen betyr at vi med hell har kopiert elementene i "fugler”Array til“Newbirds”.

Konklusjon

Spred operatør “[…]”, skive(), og concat () Metoder tillater deg å grunt kopiere 1d matriseelementer i JavaScript og for dyp Kopiering av flerdimensjonale matriser, JSON.Stringify () og JSON.parse () Metoder brukes, der JSON.Stringify () -metoden vil konvertere det spesifiserte objektet til streng, som deretter kan analyseres til Array med JSON.parse () -metode. Denne oppskrivningen diskuterte metodene for å kopiere matriseelementer i JavaScript.