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 map
funkciu. Zakorenené v matematike map
je koncept transformácie množiny na iný typ množiny pri zachovaní štruktúry.
V angličtine to znamená, že Array.map
vráti pole rovnakej dĺžky zakaždým.
Zdvojnásobiť zoznam čísel, iba map
s double
funkciou.
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 map
hovore.
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x);
Ak by ste chceli byť trochu matematickejší, (x) => x
volá 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, map
ale 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áš filter
prediká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 reduce
klonovať 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)
slice
vrá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.