logo

Kuinka kloonata taulukko JavaScriptissä?

Sisään JavaScript, taulukon kloonaus tarkoittaa uuden taulukon luomista samoilla elementeillä kuin alkuperäinen taulukko. Taulukon kloonaaminen JavaScriptissä on hyödyllistä, kun haluat luoda uuden taulukon, jossa on samat elementit kuin olemassa olevassa taulukossa, muuttamatta alkuperäistä taulukkoa.

seleenin perusasiat

Milloin taulukko kloonataan?

Jos haluat suorittaa taulukolle joitain toimintoja, kuten lajittelua, suodatusta tai kartoitusta, mutta et halua muokata alkuperäistä taulukkoa, voit luoda kloonin alkuperäisestä taulukosta ja suorittaa toiminnot kloonille sen sijaan.



  • Kun välität taulukon funktiolle argumenttina, saatat haluta varmistaa, että funktio ei muuta alkuperäistä taulukkoa. Tässä tapauksessa voit välittää sen sijaan taulukon kloonin.
  • Jos haluat säilyttää alkuperäisen taulukon myöhempää käyttöä varten, voit luoda kloonin alkuperäisestä taulukosta ja käyttää kloonia jatkokäsittelyyn tai käsittelyyn.
  • Jos sinulla on taulukko, joka sisältää objekteja tai taulukoita elementteinä, ja haluat välttää alkuperäisten objektien tai taulukoiden muokkaamisen, voit luoda taulukosta kloonin käytettäväksi, jotta kloonin objektien tai taulukoiden muutokset eivät vaikuttaa alkuperäisiin objekteihin tai matriisiin.

Täten, taulukon kloonaus JavaScriptissä on hyödyllinen tekniikka taulukoiden käsittelyyn tavalla, joka säilyttää alkuperäisen taulukon ja sen elementtien eheyden.

Tässä on joitain yleisiä käyttötapauksia taulukon kloonaamiseen:

Sisällysluettelo



Käyttämällä Array.slice() -menetelmää

Käytämme siivumenetelmä luodaksesi matalan kopion taulukosta. Tämä menetelmä luo uuden taulukon, jossa on osa alkuperäisen taulukon elementtejä.

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

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

Lähtö
[ 1, 2, 3 ]>

Käytä levitysoperaattoria

Käyttämällä levitä operaattori on ytimekäs ja helppo tapa kloonata taulukko JavaScriptissä. Hajautusoperaattorin avulla voit laajentaa taulukon yksittäisiksi elementeiksi, joita voidaan sitten käyttää uuden taulukon luomiseen.



Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

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

Lähtö
[ 1, 2, 3 ]>

Käyttämällä Array.from() -menetelmää

Käyttämällä Array.from() menetelmä on toinen tapa kloonata taulukko JavaScriptissä. Tämä menetelmä luo uuden taulukon olemassa olevasta taulukosta käyttämällä valinnaista kartoitusfunktiota uuden taulukon arvojen muuntamiseen.

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

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

Lähtö
[ 1, 2, 3 ]>

Käyttämällä Array.concat()-menetelmää

Käyttämällä Array.concat() menetelmä on toinen tapa kloonata taulukko JavaScriptissä. Tämä menetelmä luo uuden taulukon ketjuttamalla kaksi tai useampia taulukoita yhteen.

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

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

Lähtö
[ 1, 2, 3 ]>

For-silmukan käyttäminen

Tämä menetelmä sisältää iteroinnin alkuperäisen taulukon jokaisen elementin läpi ja jokaisen elementin kopioimisen uuteen taulukkoon.

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

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

Lähtö
[ 1, 2, 3 ]>

Array.map()-menetelmän käyttäminen

Käyttämällä Array.map() menetelmä on toinen tapa kloonata taulukko JavaScriptissä. Tämä menetelmä luo uuden taulukon yhdistämällä kunkin elementin alkuperäisestä taulukosta uuteen arvoon.

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>x); console.log(clonedArray);>>  
Lähtö
[ 1, 2, 3 ]>

Array.from()-metodin käyttäminen karttafunktion kanssa

Käyttämällä Array.from() menetelmä karttafunktiolla on toinen tapa kloonata taulukko JavaScriptissä. Tämä menetelmä luo uuden taulukon yhdistämällä kunkin elementin alkuperäisestä taulukosta uuteen arvoon käyttämällä annettua funktiota.

tojson java

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

Javascript
const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>x); console.log(clonedArray);>>  
Lähtö Käyttämällä Array.of()-menetelmää

Tämä menetelmä luo uuden taulukon, jossa on samat elementit kuin alkuperäinen taulukko.

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

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

Lähtö Käyttämällä JSON.parse()- ja JSON.stringify()-menetelmiä

Käyttämällä JSON.parse() ja JSON.stringify() menetelmät on toinen tapa kloonata taulukko JavaScriptissä. Tämä menetelmä sisältää alkuperäisen taulukon muuntamisen JSON-merkkijonoksi ja sitten JSON-merkkijonon jäsentämisen uuden taulukon luomiseksi.

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

käynnistä mysql ubuntu uudelleen
Javascript
const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);>

Lähtö
[ 1, 2, 3 ]>

Object.assign()-menetelmän käyttäminen

Käyttämällä Object.assign() menetelmä on toinen tapa kloonata taulukko JavaScriptissä. Tämä menetelmä luo uuden taulukon kopioimalla alkuperäisen taulukon ominaisuudet uuteen objektiin.

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

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

Lähtö
[ 1, 2, 3 ]>

Array.reduce()-menetelmän käyttäminen

The Array.reduce() -menetelmä suorittaa pienennystoiminnon jokaiselle taulukon elementille, mikä johtaa yhteen lähtöarvoon. Voimme käyttää sitä uuden taulukon rakentamiseen samoilla elementeillä kuin alkuperäinen taulukko.

Syntaksi:

array.reduce((accumulator, currentValue, currentIndex, array) =>{ ... }, aloitusarvo);>

Esimerkki : Tässä esimerkissä käytämme Array.reduce()-menetelmää taulukon kloonin luomiseen.

JavaScript
// Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(val);  paluu acc; }, []); // Näytä alkuperäinen ja kloonattu taulukko console.log('Original Array:', originalArray); // Tulostus: [1, 2, 3, 4] console.log('Cloned Array:', clonedArray); // Tulostus: [1, 2, 3, 4]>>  
Lähtö Huomautus: Siten taulukkoa kloonattaessa on tärkeää ottaa huomioon datan monimutkaisuus ja sovelluksen suorituskykyvaatimukset.