JavaScript ima mnogo načina da bilo što učini. Napisao sam 10 načina za pisanje pipe / compose u JavaScriptu, a sada radimo nizove.
1. Operater širenja (plitka kopija)
Otkad je pao ES6, ovo je najpopularnija metoda. Kratka je sintaksa i bit će vam nevjerojatno korisna kada koristite knjižnice poput React i Redux.
numbers = [1, 2, 3]; numbersCopy = [...numbers]; Napomena: Ovo ne kopira sigurno višedimenzionalne nizove. Vrijednosti niza / objekta kopiraju se referencom umjesto vrijednošću .
Ovo je u redu
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ovo nije u 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)
Pretpostavljam da je ovaj pristup najmanje popularan s obzirom na to kako je moderno funkcionalno programiranje postalo u našim krugovima.
Čist ili nečist, deklarativni ili imperativ, posao završava!
numbers = [1, 2, 3]; numbersCopy = []; for (i = 0; i < numbers.length; i++) { numbersCopy[i] = numbers[i]; } Napomena: Ovo ne kopira sigurno višedimenzionalne nizove. Budući da upotrebljavate =operator, on će dodijeliti objekte / nizove referencom umjesto vrijednošću .
Ovo je u redu
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ovo nije u 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. Dobro staro dok () Petlja (plitka kopija)
Isto kao - fornečisto, imperativno, bla, bla, bla ... djeluje! ?
numbers = [1, 2, 3]; numbersCopy = []; i = -1; while (++i < numbers.length) { numbersCopy[i] = numbers[i]; } Napomena: Ovo također dodjeljuje objekte / nizove referencom umjesto vrijednošću .
Ovo je u redu
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ovo nije u 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)
Natrag na suvremenom teritoriju pronaći ćemo mapfunkciju. Ukorijenjen u matematici mapkoncept je pretvaranja skupa u drugu vrstu skupa, uz očuvanje strukture.
Na engleskom to znači da Array.mapvraća niz iste dužine svaki put.
Da biste udvostručili popis brojeva, koristite maps doublefunkcijom.
numbers = [1, 2, 3]; double = (x) => x * 2; numbers.map(double); Što je s kloniranjem ??
Istina, ovaj je članak o kloniranju nizova. Da biste duplicirali niz, samo vratite element u mappozivu.
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x); Ako želite biti malo matematičkiji, to (x) => xse naziva identitet . Vraća bilo koji parametar koji je dan.
map(identity) klonira popis.
identity = (x) => x; numbers.map(identity); // [1, 2, 3] Napomena: Ovo također dodjeljuje objekte / nizove referencom umjesto vrijednošću .
5. Array.filter (plitka kopija)
Ova funkcija vraća niz, baš kao map, ali nije zajamčeno da će biti iste duljine.
Što ako filtrirate parne brojeve?
[1, 2, 3].filter((x) => x % 2 === 0); // [2] Duljina ulaznog polja bila je 3, ali rezultirajuća duljina je 1.
If your filter's predicate always returns true, however, you get a duplicate!
numbers = [1, 2, 3]; numbersCopy = numbers.filter(() => true); Every element passes the test, so it gets returned.
Note: This also assigns objects/arrays by reference instead of by value.
6. Array.reduce (Shallow copy)
I almost feel bad using reduce to clone an array, because it’s so much more powerful than that. But here we go…
numbers = [1, 2, 3]; numbersCopy = numbers.reduce((newArray, element) => { newArray.push(element); return newArray; }, []); reduce transforms an initial value as it loops through a list.
Here the initial value is an empty array, and we’re filling it with each element as we go. That array must be returned from the function to be used in the next iteration.
Note: This also assigns objects/arrays by reference instead of by value.
7. Array.slice (Shallow copy)
slice returns a shallow copy of an array based on the provided start/end index you provide.
If we want the first 3 elements:
[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)
This can turn any iterable object into an array. Giving an array returns a shallow copy.
numbers = [1, 2, 3]; numbersCopy = Array.from(numbers); // [1, 2, 3] Note: This also assigns objects/arrays by reference instead of by value.
Conclusion
Well, this was fun ?
I tried to clone using just 1 step. You’ll find many more ways if you employ multiple methods and techniques.