A JavaScript számos módon képes bármit megtenni. 10 módszerrel írtam a pipa / zeneszerzés írásához JavaScript-ben, és most tömböket készítünk.
1. Spread Operator (sekély másolat)
Amióta az ES6 esett, ez a legnépszerűbb módszer. Ez egy rövid szintaxis, és hihetetlenül hasznosnak találja, ha olyan könyvtárakat használ, mint a React és a Redux.
numbers = [1, 2, 3]; numbersCopy = [...numbers]; Megjegyzés: Ez nem másolja biztonságosan a többdimenziós tömböket. A tömb / objektum értékeket hivatkozásként másoljuk át érték helyett .
Ez jó
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ez nem jó
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. Jó öreg () hurok (sekély másolat)
Úgy gondolom, hogy ez a megközelítés a legkevésbé népszerű, tekintve, hogy a funkcionális programozás mennyire trendi körökben.
Tiszta vagy tisztátalan, kijelentő vagy elengedhetetlen, elvégzi a munkát!
numbers = [1, 2, 3]; numbersCopy = []; for (i = 0; i < numbers.length; i++) { numbersCopy[i] = numbers[i]; } Megjegyzés: Ez nem másolja biztonságosan a többdimenziós tömböket. Mivel az =operátort használja, az objektumokat / tömböket hivatkozásként, nem pedig érték alapján fogja kijelölni .
Ez jó
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ez nem jó
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. Jó öreg, míg () hurok (sekély másolat)
Ugyanaz, mint for—tisztító, elengedhetetlen, bla, bla, bla ... működik! ?
numbers = [1, 2, 3]; numbersCopy = []; i = -1; while (++i < numbers.length) { numbersCopy[i] = numbers[i]; } Megjegyzés: Ez objektumokat / tömböket is hivatkozásként, nem pedig érték alapján rendel hozzá .
Ez jó
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ez nem jó
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 (sekély másolat)
Visszatérve a modern területekre, megtaláljuk a mapfunkciót. A matematikában gyökerezik mapaz a koncepció, hogy egy halmazt átalakítunk egy másik halmaztípusgá, a struktúra megőrzése mellett.
Magyarul ez azt jelenti, hogy Array.mapminden egyes alkalommal azonos hosszúságú tömböt ad vissza.
A számok listájának duplázásához használja mapa doublefüggvényt.
numbers = [1, 2, 3]; double = (x) => x * 2; numbers.map(double); Mi van a klónozással ??
Igaz, ez a cikk a tömbök klónozásáról szól. Egy tömb lemásolásához egyszerűen adja vissza a maphívás elemét .
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x); Ha egy kicsit matematikusabb szeretne lenni, (x) => xakkor ezt identitásnak hívják . Bármelyik paramétert adja vissza.
map(identity) klónoz egy listát.
identity = (x) => x; numbers.map(identity); // [1, 2, 3] Megjegyzés: Ez objektumokat / tömböket is hivatkozásként, nem pedig érték alapján rendel hozzá .
5. Array.filter (sekély másolat)
Ez a függvény egy tömböt ad vissza, akárcsak map, de nem garantáltan azonos hosszúságú.
Mi van, ha páros számokra szűred?
[1, 2, 3].filter((x) => x % 2 === 0); // [2] A bemeneti tömb hossza 3 volt, de az így kapott hosszúság 1.
Ha az filterállítmányod mindig visszatér true, kapsz egy másolatot!
numbers = [1, 2, 3]; numbersCopy = numbers.filter(() => true); Minden elem megfelel a tesztnek, így visszaküldik.
Megjegyzés: Ez objektumokat / tömböket is hivatkozásként, nem pedig érték alapján rendel hozzá .
6. Array.reduce (sekély másolat)
Szinte rosszul érzem magam reduceegy tömb klónozásával, mert sokkal erősebb ennél. De itt tartunk ...
numbers = [1, 2, 3]; numbersCopy = numbers.reduce((newArray, element) => { newArray.push(element); return newArray; }, []); reduce átalakítja a kezdeti értéket, amikor egy listán keresztül halad.
Itt a kezdeti érték egy üres tömb, amelyet menet közben minden elemgel kitöltünk. Ezt a tömböt vissza kell adni a következő iterációban használandó függvényből.
Megjegyzés: Ez objektumokat / tömböket is hivatkozásként, nem pedig érték alapján rendel hozzá .
7. Array.slice (sekély másolat)
sliceegy tömb sekély másolatát adja vissza a megadott kezdő / befejező index alapján.
Ha az első 3 elemet akarjuk:
[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.