Felfogható tippek a tömbök létrehozásához és klónozásához a JavaScript-ben.

Minden programozási nyelv nagyon fontos szempontja a nyelven elérhető adattípusok és struktúrák. A legtöbb programozási nyelv adattípusokat biztosít az összetett adatok ábrázolásához és kezeléséhez. Ha olyan nyelvekkel dolgozott, mint a Python vagy a Ruby, akkor látnia kellett olyan adattípusokat, mint a listák , halmazok , tömbök , hashek , diktálások stb.

A JavaScript-ben nincs olyan sok összetett adattípus - egyszerűen csak tömbök és objektumok vannak . Az ES6-ban azonban néhány adattípust és struktúrát adtak a nyelvhez, például szimbólumokat , halmazokat és térképeket .

A JavaScript-ben található tömbök magas szintű listaszerű objektumok, hosszúsági tulajdonsággal és egész tulajdonságokkal, mint indexek.

Ebben a cikkben megosztok néhány feltörést új JavaScript tömbök létrehozásához vagy a már meglévők klónozásához.

Tömbök létrehozása: A tömbépítő

A tömbök létrehozásának legnépszerűbb módja a tömb szó szerinti szintaxisának használata, ami nagyon egyszerű. Ha azonban dinamikusan szeretne tömböket létrehozni, akkor a tömb szó szerinti szintaxisa nem mindig lehet a legjobb módszer. Alternatív módszer a Arraykonstruktor használata.

Itt van egy egyszerű kódrészlet, amely bemutatja a Arraykonstruktor használatát.

Az előző részletből láthatjuk, hogy a Arraykonstruktor tömböket a kapott argumentumoktól függően másképp hoz létre.

Új tömbök: meghatározott hosszúsággal

Nézzük meg alaposabban, hogy mi történik Arrayegy adott hosszúságú új létrehozásakor . A konstruktor csak lengtha tömb tulajdonságát állítja be a megadott hosszúságra, a kulcsok beállítása nélkül.

A fenti részletből kiindulhat, hogy azt gondolja, hogy a tömb minden egyes kulcsának értéke értéke undefined. De a valóság az, hogy ezeket a kulcsokat soha nem állították be (nem léteznek).

A következő ábra világosabbá teszi:

Ez feleslegessé teszi a tömb iterációs módszerek, mint például map(), filter()vagy reduce()a tömb manipulálásának megkísérlését . Tegyük fel, hogy a tömb minden indexét a számmal, 5mint értékkel szeretnénk kitölteni . Megpróbáljuk a következőket:

Láthatjuk, hogy map()ez itt nem működött, mert az index tulajdonságai nem léteznek a tömbben - csak a lengthtulajdonság létezik.

Nézzük meg a probléma megoldásának különböző módjait.

1. Az Array.prototype.fill () használata

A fill()módszer egy tömb összes elemét kitölti a kezdő indextől a vég indexig statikus értékkel. A végindexet nem tartalmazza. Itt többet tudhat fill()meg.

Vegye figyelembe, hogy fill()csak az ES6 támogatással rendelkező böngészőkben fog működni.

Itt egy egyszerű illusztráció:

Itt a létrehozott tömb minden elemét kitölthettük 5. A fill()módszer segítségével tetszőleges statikus értéket állíthat be a tömb különböző indexeihez .

2. Az Array.from () használata

A Array.from()módszer új, sekély Arraymásolású példányt hoz létre egy tömbszerű vagy iterálható objektumból. Itt többet tudhat Array.from()meg.

Vegye figyelembe, hogy Array.from()csak az ES6 támogatással rendelkező böngészőkben fog működni.

Itt egy egyszerű illusztráció:

Itt most valódi undefinedértékeket állítottunk be a tömb minden eleméhez Array.from(). Ez azt jelenti, hogy most már haladhatunk és használhatunk olyan metódusokat, mint a .map()és .filter()a tömb, mivel az index tulajdonságok már léteznek.

Még egy figyelemre méltó dolog Array.from(), hogy megkövetelhet egy második argumentumot, amely egy térképfüggvény. A tömb minden elemére meghívásra kerül. Ez teszi redundanciával hívás .map()után Array.from().

Itt van egy egyszerű példa:

3. A Spread Operator használata

A szóráskezelőAz ...ES6-ban hozzáadott ( ) használható a tömb elemeinek terjesztésére, a hiányzó elemek értékének beállítására undefined. Ez ugyanazt az eredményt Array.from()hozza, mint egyszerűen csak a tömb meghívása az egyetlen argumentum.

Itt van egy egyszerű ábra a spread operátor használatáról:

Folytathatja az olyan metódusokat, mint a .map()és .filter()a tömb, mivel az index tulajdonságok már léteznek.

Az Array.of () használata

Ahogyan azt új Arraykonstruktívek létrehozásakor láthattuk a konstruktor vagy a függvény használatával, Array.of()nagyon hasonló módon viselkedik. Sőt, az egyetlen különbség Array.of(), és Arrayvan, hogy hogyan kezelik egységes egész neki átadott nekik.

Míg Array.of(5)létrehoz egy új tömböt egyetlen elem 5, és a hossza tulajdonsága 1, Array(5)létrehoz egy új, üres tömböt 5 üres réseket, hossza tulajdona 5.

var array1 = Array.of(5); // [5] var array2 = Array(5); // Array(5) {length: 5}

Ezen jelentős különbség mellett Array.of()ugyanúgy viselkedik, mint a Arraykivitelező. Itt többet tudhat Array.of()meg.

Vegye figyelembe, hogy Array.of()csak az ES6 támogatással rendelkező böngészőkben fog működni.

Konvertálás tömbökké: tömb-kedvelések és iterable-k

Ha elég hosszú ideig írt JavaScript-függvényeket, akkor már tudnia kell az argumentsobjektumról - ez egy tömbszerű objektum, amely minden funkcióban elérhető, hogy megtartsa a függvény kapott argumentumlistáját. Bár az argumentsobjektum nagyon hasonlít egy tömbhöz, nem fér hozzá a Array.prototypemetódusokhoz.

Az ES6 előtt általában az alábbihoz hasonló kódrészletet lát, amikor megpróbálja átalakítani az argumentsobjektumot tömbökké:

A Array.from()vagy a spread operátorral kényelmesen átalakíthat bármely tömbszerű objektumot tömbré. Ezért ahelyett, hogy ezt tenné:

var args = Array.prototype.slice.call(arguments);

ezek egyikét megteheti:

// Using Array.from() var args = Array.from(arguments); // Using the Spread operator var args = [...arguments];

Ezek az iterable-kre is vonatkoznak, az alábbi ábra szerint:

Esettanulmány: Tartomány funkció

Esettanulmányként, mielőtt folytatnánk, létrehozunk egy egyszerű range()funkciót az imént tanult új tömbtömeg végrehajtására . A függvény a következő aláírással rendelkezik:

range(start: number, end: number, step: number) => Array

Itt van a kódrészlet:

Ebben a kódrészletben Array.from()az új dinamikus hosszúságú tömböt hoztuk létre, majd feltérképezési függvény biztosításával feltöltöttük egymás után növelt számokat.

Vegye figyelembe, hogy a fenti kódrészlet nem fog működni az ES6 támogatás nélküli böngészőkben, kivéve, ha polyfill-eket használ.

Íme néhány eredmény range()a fenti kódrészletben meghatározott függvény meghívásával kapcsolatban :

Élő kóddemo-t kaphat, ha a következő tollat ​​futtatja a Codepen-en :

Klónozó tömbök: A kihívás

A JavaScript-ben a tömbök és az objektumok referenciatípusok. Ez azt jelenti, hogy ha egy változóhoz tömböt vagy objektumot rendelünk, akkor a változóhoz hozzárendelt hivatkozás a memóriában található helyre, ahol a tömböt vagy az objektumot tárolták.

A tömbök, csakúgy, mint a JavaScript minden más objektuma, referencia típusok. Ez azt jelenti, hogy a tömböket hivatkozás és nem érték alapján másoljuk.

A referencia típusok ilyen módon történő tárolásának a következő következményei vannak:

1. A hasonló tömbök nem egyenlőek.

Itt azt látjuk, hogy bár array1és array2tartalmazzák látszólag azonos tömböt leírások, nem egyenlők. Ennek oka, hogy az egyes tömbökre való hivatkozás a memória különböző helyére mutat.

2. A tömböket hivatkozás és nem érték szerint másoljuk.

Itt megpróbáljuk másolni array1az array2, de mi alapvetően csinál mutat array2ugyanarra a helyre, a memóriában array1pontot. Ezért a két array1és array2pont ugyanazon a helyen a memóriában, és egyenlő.

Ennek az a következménye, hogy amikor array2az utolsó elem eltávolításával változtatunk a (z) oldalon , akkor az utolsó elem array1is eltávolításra kerül. Ez azért van, mert a változtatás valójában a memóriában tárolt tömbön történt, array1és array2csak a memória ugyanarra a pontjára mutatnak, ahol a tömböt tárolják.

Klónozó tömbök: A hackek

1. Az Array.prototype.slice () használata

A slice()módszer egy tömb részének sekély másolatát hozza létre a tömb módosítása nélkül. Itt többet tudhat slice()meg.

A trükk az, hogy slice()vagy 0egyetlen argumentumként, vagy pedig minden érv nélkül hívjuk meg:

// with O as only argument array.slice(0); // without argument array.slice();

Itt van egy egyszerű ábra egy tömb klónozásáról slice():

Itt láthatja, hogy array2ez egy array1azonos elemű és hosszúságú klón . Ugyanakkor a memória különböző helyeire mutatnak, és ennek eredményeként nem egyenlőek. Azt is észreveszi, hogy amikor array2az utolsó elem eltávolításával változtatunk, az array1változatlan marad.

2. Az Array.prototype.concat () használata

A concat()módszert két vagy több tömb egyesítésére használják, ami új tömböt eredményez, miközben az eredeti tömbök változatlanok maradnak. Itt többet tudhat concat()meg.

A trükk az, hogy concat()vagy üres tömböt ( []) hívunk argumentumként, vagy egyáltalán nem tartalmazunk argumentumokat:

// with an empty array array.concat([]); // without argument array.concat();

A tömb klónozása a concat()használatával meglehetősen hasonló slice(). Itt van egy egyszerű ábra egy tömb klónozásáról concat():

3. Az Array.from () használata

Mint korábban láttuk, Array.from()felhasználható egy új tömb létrehozására, amely az eredeti tömb sekély másolata. Itt egy egyszerű illusztráció:

4. A tömbstrukturálás használata

Az ES6 használatával néhány hatékonyabb eszköz van az eszköztárunkban, például roncsolás , terjedésoperátor , nyíl funkciók és így tovább. A szerkezetátalakítás nagyon hatékony eszköz komplex típusokból, például tömbökből és objektumokból származó adatok kinyerésére.

A trükk a rest paraméterek nevű technika használata , amely magában foglalja a tömb destruktúrájának és a spread operátor kombinációját, amint az a következő részletben látható:

let [...arrayClone] = originalArray;

A fenti kódrészlet létrehoz egy változót, arrayCloneamelynek neve a originalArray. Itt található egy egyszerű ábra egy tömb klónozásáról tömb destruktúrával:

Klónozás: Sekély és mély

Az összes tömb klónozási technika, amelyet eddig feltártunk , a tömb sekély másolatát hozza létre . Ez nem jelent problémát, ha a tömb csak primitív értékeket tartalmaz. Ha azonban a tömb beágyazott objektum hivatkozásokat tartalmaz, akkor ezek a hivatkozások épek maradnak akkor is, ha a tömböt klónozzák.

Itt van ennek egy nagyon egyszerű bemutatása:

Vegye figyelembe, hogy a beágyazott tömb módosítása a ben beágyazott tömböt array1is módosította, array2és fordítva.

A probléma megoldása a tömb mély másolatának létrehozása, és erre pár mód van.

1. A JSON technika

A tömb mély másolatának elkészítésének legegyszerűbb módja a JSON.stringify()és a kombináció JSON.parse().

JSON.stringify()a JavaScript-értéket érvényes JSON-karakterláncokká, míg JSON.parse()a JSON-karakterláncot megfelelő JavaScript-értékké vagy objektummá alakítja.

Itt van egy egyszerű példa:

A JSON technikának van néhány hibája, különösen akkor, ha a karakterláncoktól, számoktól és logikai értékektől eltérő értékekről van szó.

A JSON technika ezen hibái elsősorban annak a módnak tulajdoníthatók, ahogyan a JSON.stringify()módszer az értékeket JSON karakterláncokká alakítja.

Itt bemutatjuk ezt a hibát, amikor JSON.stringify()beágyazott függvényt tartalmazó értéket próbálunk elérni .

2. Mély másolás segítő

A JSON technika életképes alternatívája a saját mély másolás segítő funkció megvalósítása a referenciatípusok klónozásához, legyenek azok tömbök vagy objektumok.

Itt van egy nagyon egyszerű és minimalista mély másolás funkció, az úgynevezett deepClone:

Most ez nem a legjobb a mély másolás funkciók között, mint amilyen hamarosan néhány JavaScript könyvtárral is találkozni fog - azonban a mély másolást meglehetősen jó mértékben végrehajtja.

3. A JavaScript könyvtárak használata

Az imént definiált mély másolás segítő funkció nem elég robusztus az összes olyan bonyolult objektumban vagy tömbben beágyazható JavaScript adatok klónozásában.

Az olyan JavaScript könyvtárak, mint a Lodash és a jQuery, robusztusabb mély másolás segédprogram funkciókat kínálnak, támogatva a különféle JavaScript adatokat.

Íme egy példa, amely _.cloneDeep()a Lodash könyvtárból származik:

Itt van ugyanaz a példa, de $.extend()a jQuery könyvtárból használva :

Következtetés

Ebben a cikkben számos technikát fedezhettünk fel az új tömbök dinamikus létrehozására és a már meglévők klónozására, beleértve a tömbszerű objektumok és az iterable tömbekké történő átalakítását.

Láttuk azt is, hogy az ES6-ban bevezetett új funkciók és fejlesztések némelyike ​​lehetővé teheti számunkra, hogy hatékonyan végezzünk bizonyos manipulációkat a tömbökön.

A tömbök klónozásához és terjesztéséhez olyan funkciókat használtunk, mint a szerkezetátalakítás és a spread operátor. Ebben a cikkben többet megtudhat a szerkezetátalakításról.

Taps és követés

Ha ezt a cikket éleslátásnak találta, akkor szabadon tapsolhat, ha nem bánja.

A Mediumon (Örülök Chinda) is követhetsz, ha hasznosabb cikkeket találsz. Kövess engem a Twitteren is (@gladchinda).

Boldog hackelés ...