Kuidas kloonida massiivi JavaScripti

JavaScripti abil on mitmel viisil võimalik midagi teha. Olen kirjutanud kümnel viisil, kuidas kirjutada JavaScripti abil toru / komponeerida, ja nüüd teeme massiive.

1. Spread Operaator (madal koopia)

Alates ES6 langusest on see olnud kõige populaarsem meetod. See on lühike süntaks ja leiate, et teekide nagu React ja Redux kasutamisel on see uskumatult kasulik.

numbers = [1, 2, 3]; numbersCopy = [...numbers]; 

Märkus. See ei kopeeri mitmemõõtmelisi massiive ohutult. Array / objekti väärtused kopeeritakse viide asemel poolt väärtus .

See sobib

numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone 

See pole hea

nestedNumbers = [[1], [2]]; numbersCopy = [...nestedNumbers]; numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 

2. Vana hea () silmuse jaoks (madal koopia)

Kujutan ette, et see lähenemisviis on kõige vähem populaarne, kui arvestada, kuidas trendikad funktsionaalsed programmeerimised meie ringkondades muutuvad.

Puhas või ebapuhas, deklaratiivne või hädavajalik, see saab töö tehtud!

numbers = [1, 2, 3]; numbersCopy = []; for (i = 0; i < numbers.length; i++) { numbersCopy[i] = numbers[i]; } 

Märkus. See ei kopeeri mitmemõõtmelisi massiive ohutult. Kuna kasutate =operaatorit, määrab see objektid / massiivid viite, mitte väärtuse järgi .

See sobib

numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone 

See pole hea

nestedNumbers = [[1], [2]]; numbersCopy = []; for (i = 0; i < nestedNumbers.length; i++) { numbersCopy[i] = nestedNumbers[i]; } numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 

3. Vana hea, samas () Loop (madal koopia)

Sama mis - forebatäiuslik, hädavajalik, bla, bla, bla ... see töötab! ?

numbers = [1, 2, 3]; numbersCopy = []; i = -1; while (++i < numbers.length) { numbersCopy[i] = numbers[i]; } 

Märkus. See määrab objektid / massiivid ka väärtuse asemel viitena .

See sobib

numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone 

See pole hea

nestedNumbers = [[1], [2]]; numbersCopy = []; i = -1; while (++i < nestedNumbers.length) { numbersCopy[i] = nestedNumbers[i]; } numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 

4. Array.map (madal koopia)

Tagasi kaasaegsele territooriumile leiame selle mapfunktsiooni. Matemaatikas mapon juurdunud kontseptsioon, mis muudab hulga teist tüüpi komplektiks, säilitades samas struktuuri.

Inglise keeles tähendab Array.mapsee, et iga kord tagastatakse sama pikkusega massiiv.

Kahekordistada telefoninumbrite loendi, kasutada mapkoos doublefunktsiooni.

numbers = [1, 2, 3]; double = (x) => x * 2; numbers.map(double); 

Aga kloonimine ??

Tõsi, see artikkel räägib massiivide kloonimisest. Massiivi kopeerimiseks tagastage lihtsalt element mapkõnes.

numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x); 

Kui soovite olla natuke matemaatilisem, (x) => xnimetatakse seda identiteediks . See tagastab mis tahes parameetri, mis see on antud.

map(identity) kloonib loendi.

identity = (x) => x; numbers.map(identity); // [1, 2, 3] 

Märkus. See määrab objektid / massiivid ka väärtuse asemel viitena .

5. Array.filter (madal koopia)

See funktsioon tagastab massiivi, nagu ka map, kuid pole garanteeritud, et see oleks sama pikk.

Mis siis, kui filtreerite paarisarvu?

[1, 2, 3].filter((x) => x % 2 === 0); // [2] 

Sisendi massiivi pikkus oli 3, kuid saadud pikkus on 1.

Kui teie filterpredikaat alati naaseb true, saate siiski duplikaadi!

numbers = [1, 2, 3]; numbersCopy = numbers.filter(() => true); 

Iga element läbib testi, nii et see tagastatakse.

Märkus. See määrab objektid / massiivid ka väärtuse asemel viitena .

6. Array.reduce (madal koopia)

reduceMassiivi kloonimisel on mul peaaegu halb olla, sest see on sellest palju võimsam. Aga siin me läheme ...

numbers = [1, 2, 3]; numbersCopy = numbers.reduce((newArray, element) => { newArray.push(element); return newArray; }, []); 

reduce teisendab algväärtuse loendisse liikumisel.

Siin on algväärtuseks tühi massiiv ja me täidame selle iga elemendiga. See massiiv tuleb tagastada järgmises iteratsioonis kasutatavast funktsioonist.

Märkus. See määrab objektid / massiivid ka väärtuse asemel viitena .

7. Array.slice (madal koopia)

slicetagastab massiivi madala koopia teie pakutava alguse / lõpu indeksi põhjal.

Kui soovime kolme esimest elementi:

[1, 2, 3, 4, 5].slice(0, 3); // [1, 2, 3] // Starts at index 0, stops at index 3 

If we want all the elements, don’t give any parameters

numbers = [1, 2, 3, 4, 5]; numbersCopy = numbers.slice(); // [1, 2, 3, 4, 5] 

Note: This is a shallow copy, so it also assigns objects/arrays by reference instead of by value.

8. JSON.parse and JSON.stringify (Deep copy)

JSON.stringify turns an object into a string.

JSON.parse turns a string into an object.

Combining them can turn an object into a string, and then reverse the process to create a brand new data structure.

Note: This onesafely copies deeply nested objects/arrays!

nestedNumbers = [[1], [2]]; numbersCopy = JSON.parse(JSON.stringify(nestedNumbers)); numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1], [2]] // [[1, 300], [2]] // These two arrays are completely separate! 

9. Array.concat (Shallow copy)

concat combines arrays with values or other arrays.

[1, 2, 3].concat(4); // [1, 2, 3, 4] [1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5] 

If you give nothing or an empty array, a shallow copy’s returned.

[1, 2, 3].concat(); // [1, 2, 3] [1, 2, 3].concat([]); // [1, 2, 3] 

Note: This also assigns objects/arrays by reference instead of by value.

10. Array.from (Shallow copy)

See võib muuta iga korduva objekti massiiviks. Massiivi andmine tagastab madala koopia.

numbers = [1, 2, 3]; numbersCopy = Array.from(numbers); // [1, 2, 3] 

Märkus. See määrab objektid / massiivid ka väärtuse asemel viitena .

Järeldus

Noh, see oli lõbus?

Proovisin kloonida vaid ühe sammu abil. Kui kasutate mitut meetodit ja tehnikat, leiate veel palju võimalusi.