logo

TechCodeview

Kaip klonuoti masyvą „JavaScript“?

Į JavaScript, masyvo klonavimas reiškia naujo masyvo sukūrimą su tais pačiais elementais kaip ir pradinis masyvas. Masyvo klonavimas „JavaScript“ yra naudingas, kai norite sukurti naują masyvą, turintį tuos pačius elementus kaip ir esamą masyvą, nekeičiant pradinio masyvo.

Kada klonuoti masyvą?

Jei norite atlikti kai kurias masyvo operacijas, pvz., rūšiavimą, filtravimą ar atvaizdavimą, bet nenorite keisti pradinio masyvo, galite sukurti pradinio masyvo kloną ir vietoje to atlikti klonu.



  • Perduodant masyvą funkcijai kaip argumentą, galbūt norėsite užtikrinti, kad funkcija nepakeistų pradinio masyvo. Tokiu atveju vietoj to galite perduoti masyvo kloną.
  • Jei norite išsaugoti pradinį masyvą ateityje, galite sukurti pradinio masyvo kloną ir naudoti kloną tolesniam apdorojimui ar manipuliavimui.
  • Jei turite masyvą, kuriame yra objektai arba masyvai kaip elementai, ir norite nekeisti originalių objektų ar masyvų, galite sukurti masyvo kloną, kad galėtumėte dirbti su masyve, kad nepakeistumėte objektų ar masyvų klone. paveikti originalius objektus ar masyvus.

Taigi, masyvo klonavimas JavaScript yra naudingas būdas dirbti su masyvais taip, kad būtų išsaugotas pradinio masyvo ir jo elementų vientisumas.

Štai keli įprasti masyvo klonavimo atvejai:

žiniasklaidos perdavimas

Turinys



Naudojant Array.slice() metodą

Mes naudojame pjaustymo metodas kad būtų sukurta sekli masyvo kopija. Šis metodas sukuria naują masyvą su elementų poaibiu iš pradinio masyvo.

Pavyzdys: Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.

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

Naudojant sklaidos operatorių

Naudojant sklaidos operatorius … yra glaustas ir paprastas būdas klonuoti masyvą „JavaScript“. Sklaidos operatorius leidžia išplėsti masyvą į atskirus elementus, kuriuos vėliau galima naudoti kuriant naują masyvą.



Pavyzdys: Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.

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

Naudojant Array.from() metodą

Naudojant Masyvas.nuo() metodas yra dar vienas būdas klonuoti masyvą „JavaScript“. Šis metodas sukuria naują masyvą iš esamo masyvo, naudojant pasirenkamą susiejimo funkciją, kad pakeistų reikšmes naujame masyve.

Pavyzdys: Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.

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

Naudojant Array.concat() metodą

Naudojant Masyvas.concat() metodas yra dar vienas būdas klonuoti masyvą „JavaScript“. Šis metodas sukuria naują masyvą, sujungdamas du ar daugiau masyvų.

Pavyzdys: Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.

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

Naudojant for kilpą

Šis metodas apima kartojimą per kiekvieną pradinio masyvo elementą ir kiekvieno elemento nukopijavimą į naują masyvą.

Pavyzdys: Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.

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

Naudojant Array.map() metodą

Naudojant Array.map() metodas yra dar vienas būdas klonuoti masyvą „JavaScript“. Šis metodas sukuria naują masyvą, susiejant kiekvieną elementą iš pradinio masyvo į naują reikšmę.

Pavyzdys: Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.

Javascript 
const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>x); console.log(clonedArray);>>  
  Išvestis  
[ 1, 2, 3 ]>
  
Naudojant metodą Array.from() su žemėlapio funkcija
Naudojant      Masyvas.nuo()    metodas su žemėlapio funkcija yra dar vienas būdas klonuoti masyvą „JavaScript“. Šis metodas sukuria naują masyvą, susiejant kiekvieną elementą iš pradinio masyvo į naują reikšmę naudojant pateiktą funkciją.
 
    Pavyzdys:    Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.
Javascript 
const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>x); console.log(clonedArray);>>  
  Išvestis  Naudojant Array.of() metodą
Šis metodas sukuria naują masyvą su tais pačiais elementais kaip ir pradinis masyvas.
 
    Pavyzdys:    Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.
Javascript 
const originalArray = [1, 2, 3]; const clonedArray = Array.of(...originalArray); console.log(clonedArray);>
   
  Išvestis  Naudojant JSON.parse() ir JSON.stringify() metodus
Naudojant      JSON.parse()     ir      JSON.stringify()              metodai yra dar vienas būdas klonuoti masyvą „JavaScript“. Šis metodas apima pradinio masyvo konvertavimą į JSON eilutę ir JSON eilutės analizę, kad būtų sukurtas naujas masyvas.
 
    Pavyzdys:    Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.
Javascript 
const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);>
   
  Išvestis  
[ 1, 2, 3 ]>
 
Naudojant Object.assign() metodą
Naudojant              Object.assign()    metodas  yra dar vienas būdas klonuoti masyvą „JavaScript“. Šis metodas sukuria naują masyvą, nukopijuodamas pradinio masyvo savybes į naują objektą.
 
    Pavyzdys:    Šiame pavyzdyje parodytas aukščiau paaiškinto požiūrio įgyvendinimas.
Javascript 
const originalArray = [1, 2, 3]; const clonedArray = Object.assign([], originalArray); console.log(clonedArray);>
   
  Išvestis  
[ 1, 2, 3 ]>
 
Naudojant Array.reduce() metodą
The  Masyvas.reduce() metodas  kiekviename masyvo elemente vykdo reduktorius, todėl gaunama viena išvesties reikšmė. Mes galime jį naudoti norėdami sukurti naują masyvą su tais pačiais elementais kaip ir pradinis masyvas.
 
    Sintaksė:    
 
array.reduce((accumulator, currentValue, currentIndex, array) =>{ ... }, pradinė vertė);>
    Pavyzdys    : Šiame pavyzdyje masyvo klonui sukurti naudosime metodą Array.reduce().
JavaScript 
// Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(val);  grąžinti acc; }, []); // Rodyti originalius ir klonuotus masyvus console.log('Original Array:', originalArray); // Išvestis: [1, 2, 3, 4] console.log('Cloned Array:', clonedArray); // Išvestis: [1, 2, 3, 4]>>  
  Išvestis      Pastaba:    Taigi, klonuojant masyvą, svarbu atsižvelgti į duomenų sudėtingumą ir programos veikimo reikalavimus.