Ako klonovať pole v JavaScripte

JavaScript má mnoho spôsobov, ako robiť čokoľvek. Napísal som 10 spôsobov, ako napísať slovo / komponovať v JavaScripte, a teraz robíme polia.

1. Operátor šírenia (plytká kópia)

Odkedy klesla ES6, je to najpopulárnejšia metóda. Je to krátka syntax a zistíte, že je neuveriteľne užitočná pri používaní knižníc ako React a Redux.

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

Poznámka: Toto bezpečne nekopíruje viacrozmerné polia. Hodnoty poľa / objektu sa kopírujú podľa referencie namiesto podľa hodnoty .

Toto je fajn

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

To nie je v poriadku

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. Good Old for () Loop (plytká kópia)

Myslím si, že tento prístup je najmenej populárny vzhľadom na to, ako sa v našich kruhoch stalo trendy funkčné programovanie.

Čistý alebo nečistý, deklaratívny alebo imperatívny, ide o prácu!

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

Poznámka: Toto bezpečne nekopíruje viacrozmerné polia. Pretože používate =operátor, bude priraďovať objekty / polia podľa referencie namiesto podľa hodnoty .

Toto je fajn

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

To nie je v poriadku

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. Good Old while () Loop (plytká kópia)

Rovnako ako - forčistý, imperatívny, bla, bla, bla ... funguje to! ?

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

Poznámka: Týmto sa tiež priradia objekty / polia podľa referencie namiesto podľa hodnoty .

Toto je fajn

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

To nie je v poriadku

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 (plytká kópia)

Späť na modernom území nájdeme mapfunkciu. Zakorenené v matematike mapje koncept transformácie množiny na iný typ množiny pri zachovaní štruktúry.

V angličtine to znamená, že Array.mapvráti pole rovnakej dĺžky zakaždým.

Zdvojnásobiť zoznam čísel, iba maps doublefunkciou.

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

A čo klonovanie ??

Je pravda, že tento článok pojednáva o klonovaní polí. Ak chcete duplikovať pole, stačí vrátiť prvok vo vašom maphovore.

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

Ak by ste chceli byť trochu matematickejší, (x) => xvolá sa identita . Vráti akýkoľvek parameter, ktorý dostal.

map(identity) klonuje zoznam.

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

Poznámka: Týmto sa tiež priradia objekty / polia podľa referencie namiesto podľa hodnoty .

5. Array.filter (plytká kópia)

Táto funkcia rovnako vracia pole, mapale nie je zaručené, že bude mať rovnakú dĺžku.

Čo ak filtrujete párne čísla?

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

Dĺžka vstupného poľa bola 3, ale výsledná dĺžka je 1.

Ak sa však váš filterpredikát vždy vráti true, dostanete duplikát!

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

Každý prvok prejde testom, takže sa vráti.

Poznámka: Týmto sa tiež priradia objekty / polia podľa referencie namiesto podľa hodnoty .

6. Array.reduce (plytká kópia)

Skoro mi je zle reduceklonovať pole, pretože je omnoho výkonnejšie. Ale tu to máme ...

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

reduce transformuje počiatočnú hodnotu, keď prechádza zoznamom.

Tu je počiatočnou hodnotou prázdne pole a postupne ho vypĺňame každým prvkom. Toto pole musí byť vrátené z funkcie, ktorá sa má použiť v nasledujúcej iterácii.

Poznámka: Týmto sa tiež priradia objekty / polia podľa referencie namiesto podľa hodnoty .

7. Array.slice (plytká kópia)

slicevráti plytkú kópiu poľa na základe poskytnutého počiatočného a koncového indexu, ktorý zadáte.

Ak chceme prvé 3 prvky:

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

Toto môže zmeniť akýkoľvek opakovateľný objekt na pole. Ak dáte pole, vráti sa plytká kópia.

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

Poznámka: Týmto sa tiež priradia objekty / polia podľa referencie namiesto podľa hodnoty .

Záver

No, toto bola zábava?

Pokúsil som sa klonovať pomocou iba 1 kroku. Nájdete mnoho ďalších spôsobov, ak použijete viac metód a techník.