Kā klonēt masīvu JavaScript

JavaScript ir daudz veidu, kā kaut ko darīt. Esmu rakstījis 10 veidos, kā rakstīt pīpi / komponēt JavaScript, un tagad mēs darām masīvus.

1. Spread Operator (sekla kopija)

Kopš ES6 krituma šī ir vispopulārākā metode. Tā ir īsa sintakse, un jūs atradīsiet to neticami noderīgu, izmantojot tādas bibliotēkas kā React un Redux.

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

Piezīme. Tas droši nekopē daudzdimensiju masīvus. Masīva / objekta vērtības tiek kopētas ar atsauci, nevis pēc vērtības .

Tas ir labi

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

Tas nav labi

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. Labi vecs () cilpa (sekla kopija)

Es domāju, ka šī pieeja ir vismazāk populāra, ņemot vērā to, cik modernas funkcionālās programmēšanas iespējas ir mūsu aprindās.

Tīrs vai netīrs, deklaratīvs vai obligāts, tas paveic darbu!

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

Piezīme. Tas droši nekopē daudzdimensiju masīvus. Tā kā jūs izmantojat =operatoru, tas objektus / masīvus piešķirs ar atsauci, nevis pēc vērtības .

Tas ir labi

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

Tas nav labi

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. Vecais vecais, kamēr

Tas pats, kas - fornepārspējams, obligāts, blā, blā, blā ... tas darbojas! ?

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

Piezīme. Tas arī objektus / masīvus piešķir pēc atsauces, nevis pēc vērtības .

Tas ir labi

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

Tas nav labi

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

Mūsdienu teritorijā mēs atradīsim šo mapfunkciju. Saknes matemātikā mapir kopas pārveidošanas par cita veida kopumu koncepcija, vienlaikus saglabājot struktūru.

Angļu valodā tas nozīmē, ka Array.mapkatru reizi tiek atgriezts tāda paša garuma masīvs.

Lai dubultotu numuru sarakstu, izmantojiet mapkopā ar doublefunkciju.

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

Kā ar klonēšanu ??

Tiesa, šis raksts ir par masīvu klonēšanu. Lai dublētu masīvu, vienkārši atgrieziet mapzvana elementu .

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

Ja vēlaties būt mazliet matemātiskāks, (x) => xto sauc par identitāti . Tas atgriež jebkuru norādīto parametru.

map(identity) klonē sarakstu.

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

Piezīme. Tas arī objektus / masīvus piešķir pēc atsauces, nevis pēc vērtības .

5. Array.filter (sekla kopija)

Šī funkcija atgriež masīvu, tāpat kā map, bet tas netiek garantēts vienāda garuma.

Ko darīt, ja filtrējat pāra skaitļus?

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

Ievades masīva garums bija 3, bet iegūtais garums ir 1.

Ja jūsu filterpredikāts vienmēr atgriežas true, jūs saņemat dublikātu!

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

Katrs elements iztur pārbaudi, tāpēc tas tiek atgriezts.

Piezīme. Tas arī objektus / masīvus piešķir pēc atsauces, nevis pēc vērtības .

6. Array.reduce (sekla kopija)

Es gandrīz jūtos slikti, izmantojot reduceklonu klonu, jo tas ir daudz jaudīgāks par to. Bet šeit mēs ejam ...

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

reduce pārveido sākotnējo vērtību, kad tā pārvietojas pa sarakstu.

Sākotnējā vērtība ir tukšs masīvs, un mēs to aizpildām ar katru elementu. Šis masīvs ir jāatgriež no funkcijas, kas jāizmanto nākamajā atkārtojumā.

Piezīme. Tas arī objektus / masīvus piešķir pēc atsauces, nevis pēc vērtības .

7. Array.slice (sekla kopija)

sliceatgriež seklu masīva kopiju, pamatojoties uz jūsu sniegto sākuma / beigu indeksu.

Ja mēs vēlamies pirmos 3 elementus:

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

Tas var pārvērst jebkuru atkārtojamu objektu masīvā. Piešķirot masīvu, tiek atgriezta sekla kopija.

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

Piezīme. Tas arī objektus / masīvus piešķir pēc atsauces, nevis pēc vērtības .

Secinājums

Nu, tas bija jautri?

Es mēģināju klonēt, izmantojot tikai vienu soli. Ja izmantojat vairākas metodes un paņēmienus, jūs atradīsit daudz vairāk veidu.