Kaip klonuoti masyvą „JavaScript“

„JavaScript“ turi daug būdų ką nors padaryti. Aš parašiau 10 būdų, kaip rašyti pypkę / kurti „JavaScript“, ir dabar mes darome masyvus.

1. Sklaidos operatorius (sekli kopija)

Nuo tada, kai ES6 sumažėjo, tai buvo populiariausias metodas. Tai trumpa sintaksė ir jums ji bus nepaprastai naudinga naudojant tokias bibliotekas kaip „React“ ir „Redux“.

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

Pastaba: tai saugiai nekopijuoja daugialypių masyvų. Masyvo / objekto reikšmės nukopijuojamos pagal nuorodą, o ne pagal vertę .

Tai yra gerai

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

Tai nėra gerai

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. Senas geras () kilpa (sekli kopija)

Įsivaizduoju, kad šis požiūris yra mažiausiai populiarus, atsižvelgiant į tai, kaip madingas funkcinis programavimas tampa mūsų ratuose.

Grynas ar nešvarus, deklaratyvus ar imperatyvus, tai padaro darbą!

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

Pastaba: tai saugiai nekopijuoja daugialypių masyvų. Kadangi naudojate =operatorių, jis objektus / masyvus priskiria pagal nuorodą, o ne pagal vertę .

Tai yra gerai

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

Tai nėra gerai

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. Senas, o () ciklas (sekli kopija)

Tas pats, kas - fornepaprasta, būtina, bla, bla, bla ... tai veikia! ?

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

Pastaba: taip pat objektai / masyvai priskiriami pagal nuorodą, o ne pagal vertę .

Tai yra gerai

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

Tai nėra gerai

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 (sekli kopija)

Grįžę į šiuolaikinę teritoriją, rasime šią mapfunkciją. Įsišaknijęs matematikoje mapyra aibės transformavimo į kitą aibės tipą, išsaugant struktūrą, samprata.

Anglų kalba tai reiškia, kad Array.mapkiekvieną kartą pateikia vienodo ilgio masyvą.

Norėdami padvigubinti skaičių sąrašą, naudokite mapsu doublefunkcija.

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

O klonavimas ??

Tiesa, šiame straipsnyje kalbama apie masyvų klonavimą. Norėdami kopijuoti masyvą, tiesiog grąžinkite mapskambučio elementą .

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

Jei norite būti šiek tiek daugiau matematikos, (x) => xtai vadinama tapatybe . Jis grąžina bet kokį jam suteiktą parametrą.

map(identity) klonuoja sąrašą.

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

Pastaba: taip pat objektai / masyvai priskiriami pagal nuorodą, o ne pagal vertę .

5. Array.filter (sekli kopija)

Ši funkcija pateikia masyvą, kaip ir map, bet negarantuojama, kad jis bus vienodo ilgio.

Ką daryti, jei filtruojate lyginius skaičius?

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

Įvesties masyvo ilgis buvo 3, bet gautas ilgis yra 1.

Jei jūsų filterpredikatas visada grįžta true, gausite dublikatą!

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

Kiekvienas elementas išlaikė testą, todėl jis grąžinamas.

Pastaba: taip pat objektai / masyvai priskiriami pagal nuorodą, o ne pagal vertę .

6. Array.reduce (sekli kopija)

Beveik jaučiuosi blogai naudodamas reducemasyvo klonavimą, nes jis yra daug galingesnis už tai. Bet čia mes einame ...

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

reduce transformuoja pradinę vertę, kai ji sukasi per sąrašą.

Čia pradinė vertė yra tuščias masyvas, ir mes jį užpildome kiekvienu elementu. Tą masyvą reikia grąžinti iš funkcijos, kuri bus naudojama kitoje iteracijoje.

Pastaba: taip pat objektai / masyvai priskiriami pagal nuorodą, o ne pagal vertę .

7. „Array.slice“ (sekli kopija)

slicegrąžina seklią masyvo kopiją pagal pateiktą pradžios / pabaigos indeksą.

Jei norime pirmųjų 3 elementų:

[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)

Tai gali bet kurį kartojamą objektą paversti masyvu. Pateikus masyvą, pateikiama negiliai kopija.

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

Pastaba: taip pat objektai / masyvai priskiriami pagal nuorodą, o ne pagal vertę .

Išvada

Na, tai buvo smagu?

Aš bandžiau klonuoti naudodamas tik vieną žingsnį. Rasite daug daugiau būdų, jei naudosite kelis metodus ir metodus.