Kako klonirati matriko v JavaScript

JavaScript ima veliko načinov za kar koli. Napisal sem 10 načinov za pisanje pipe / compose v JavaScript, zdaj pa delamo nize.

1. Operater širjenja (plitva kopija)

Odkar je ES6 padel, je to najbolj priljubljena metoda. Gre za kratko sintakso, ki se vam bo zdela izjemno koristna pri uporabi knjižnic, kot sta React in Redux.

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

Opomba: To ne varno kopira večdimenzionalnih nizov. Vrednosti matrike / predmeta se kopirajo s sklicem namesto z vrednostjo .

To je v redu

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

To ni v redu

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. Dobro staro za () Loop (plitka kopija)

Mislim, da je ta pristop najmanj priljubljen glede na to, kako je v naših krogih postalo trendovsko funkcionalno programiranje.

Čisto ali nečisto, deklarativno ali imperativ, opravi delo!

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

Opomba: To ne varno kopira večdimenzionalnih nizov. Ker uporabljate =operater, bo predmete / polja dodelil po referenci namesto po vrednosti .

To je v redu

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

To ni v redu

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. Dobra stara () zanka (plitka kopija)

Enako kot for—impure, imperativ, bla, bla, bla ... deluje! ?

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

Opomba: To tudi dodeli predmete / polja s sklicem namesto z vrednostjo .

To je v redu

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

To ni v redu

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

Nazaj na sodobnem ozemlju bomo našli mapfunkcijo. V matematiki mapje zasnovan koncept pretvorbe množice v drugo vrsto množice, hkrati pa ohranja strukturo.

V angleščini to pomeni, da Array.mapvsakič vrne polje z enako dolžino.

Če želite podvojiti seznam številk, uporabite maps doublefunkcijo.

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

Kaj pa kloniranje ??

Res je, ta članek govori o kloniranju nizov. Če želite podvojiti matriko, preprosto vrnite element v mapklicu.

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

Če želite biti nekoliko bolj matematični, (x) => xse imenuje identiteta . Vrne kateri koli parameter je bil dan.

map(identity) klonira seznam.

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

Opomba: To tudi dodeli predmete / polja s sklicem namesto z vrednostjo .

5. Array.filter (plitka kopija)

Ta funkcija vrne matriko, tako kot map, vendar ni zagotovljeno, da bo enake dolžine.

Kaj pa, če filtrirate parne številke?

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

Dolžina vhodnega polja je bila 3, dobljena dolžina pa 1.

Če se vaš filterpredikat vedno vrne true, dobite dvojnik!

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

Vsak element prestane preizkus, zato se vrne.

Opomba: To tudi dodeli predmete / polja s sklicem namesto z vrednostjo .

6. Array.reduce (plitka kopija)

Skoraj slabo se počutim, reduceko kloniram matriko, ker je toliko močnejša od tega. Ampak tu smo ...

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

reduce pretvori začetno vrednost, ko se vrti skozi seznam.

Tu je začetna vrednost prazna matrika in jo med vsakim polnjenjem napolnimo z vsakim elementom. To matriko je treba vrniti iz funkcije, ki bo uporabljena v naslednji ponovitvi.

Opomba: To tudi dodeli predmete / polja s sklicem namesto z vrednostjo .

7. Array.slice (plitva kopija)

slicevrne plitvo kopijo matrike na podlagi podanega začetnega / končnega indeksa, ki ga navedete.

Če želimo prve 3 elemente:

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

To lahko kateri koli predmet, ki se lahko ponovi, spremeni v matriko. Dajanje polja vrne plitvo kopijo.

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

Opomba: To tudi dodeli predmete / polja s sklicem namesto z vrednostjo .

Zaključek

No, to je bilo zabavno?

Poskusil sem klonirati z enim korakom. Če uporabite več metod in tehnik, boste našli veliko več načinov.