Häkid JavaScripti massiivide loomiseks

Mõistlikud näpunäited JavaScripti massiivide loomiseks ja kloonimiseks.

Iga programmeerimiskeele väga oluline aspekt on keeles saadaval olevad andmetüübid ja struktuurid. Enamik programmeerimiskeeli pakub andmetüüpe keerukate andmete esitamiseks ja nendega töötamiseks. Kui olete töötanud selliste keeltega nagu Python või Ruby, oleksite pidanud nägema selliseid andmetüüpe nagu loendid , komplektid , korrektsioonid , räsi , dikteerimine jne.

JavaScriptis pole nii palju keerukaid andmetüüpe - teil on lihtsalt massiivid ja objektid . ES6-s lisati keelele aga paar andmetüüpi ja struktuuri, näiteks sümbolid , komplektid ja kaardid .

JavaScripti massiivid on kõrgetasemelised loendilaadsed objektid, millel on indeksina pikkuse omadus ja täisarvu omadused.

Selles artiklis jagan paari häkkimist uute JavaScripti massiivide loomiseks või juba olemasolevate kloonimiseks.

Massiivide loomine: massiivi konstruktor

Kõige populaarsem meetod massiivide loomiseks on massiivi sõnasõnalise süntaksi kasutamine, mis on väga lihtne. Kui soovite massiive dünaamiliselt luua, ei pruugi massiivi sõnasõnaline süntaks alati olla parim meetod. Alternatiivne meetod on Arraykonstruktori kasutamine.

Siin on lihtne koodijupp, mis näitab Arraykonstruktori kasutamist.

Eelmisest jupist näeme, et Arraykonstruktor loob massiivid erinevalt vastuvõetud argumentidest.

Uued massiivid: määratletud pikkusega

Vaatame lähemalt, mis juhtub Arrayetteantud pikkusega uue loomisel . Konstruktor seab lengthmassiivi atribuudi määratud pikkusele, võtmeid määramata.

Ülaltoodud koodilõigu põhjal võib teil tekkida kiusatus arvata, et massiivi iga võtme väärtuseks määrati undefined. Kuid reaalsus on see, et neid võtmeid ei seatud kunagi (neid pole olemas).

Järgmine joonis muudab selle selgemaks:

See muudab mõttetu püüda kasutada kõiki massiivi iteratsiooni meetodeid nagu map(), filter()või reduce()manipuleerida massiivi. Oletame, et tahame massiivi iga indeksi täita 5väärtusena väärtusega. Püüame järgmist:

Näeme, et map()see siin ei töötanud, kuna indeksi omadusi massiivil pole - lengtheksisteerib ainult omadus.

Vaatame selle probleemi lahendamise erinevaid viise.

1. Kasutades Array.prototype.fill ()

fill()Meetod täidab kõik massiivi elemendid alates algusindeksiga lõpp indeks staatiline väärtus. Lõppindeksit ei kaasata. Siit saate lisateavet fill().

Pange tähele, et see fill()töötab ainult ES6 toega brauserites.

Siin on lihtne illustratsioon:

Siin oleme suutnud täita kõik oma loodud massiivi elemendid 5. fill()Meetodi abil saate massiivi erinevate indeksite jaoks määrata mis tahes staatilise väärtuse .

2. Kasutades Array.from ()

Array.from()Meetod loob uue, madalas kopeerida Arraynäiteks array-like või iterable objekti. Siit saate lisateavet Array.from().

Pange tähele, et see Array.from()töötab ainult ES6 toega brauserites.

Siin on lihtne illustratsioon:

Siin on meil nüüd undefinedmassiivi iga elemendi jaoks määratud tõelised väärtused Array.from(). See tähendab, et saame nüüd edasi minna ja kasutamise meetodeid, nagu .map()ja .filter()array, sest indeks omadused nüüd olemas.

Veel väärib märkimist Array.from()see, et see võib võtta teise argumendi, mis on kaardi funktsioon. Seda kutsutakse massiivi igale elemendile. See muudab üleliigse helistamise .map()pärast üleliigseks Array.from().

Siin on lihtne näide:

3. Spread Operaatori kasutamine

Leviku operaator...ES6-s lisatud ( ) saab kasutada massiivi elementide levitamiseks, seades puuduvate elementide väärtuseks undefined. See annab sama tulemuse kui lihtsalt helistada Array.from()ainult massiiviga kui ainus argument.

Siin on hajutamisoperaatori kasutamise lihtne näide:

Võite jätkata ja kasutada selliseid meetodeid nagu .map()ja .filter()massiivil, kuna indeksi atribuudid on nüüd olemas.

Kasutades massiivi.of ()

Nii nagu nägime uute massiivide loomisel Arraykonstruktori või funktsiooni abil, Array.of()käitub see väga sarnaselt. Tegelikult ainus vahe Array.of()ja Arrayon, kuidas nad hakkama üks täisarv argument neile edasi.

Kuigi Array.of(5)loob uue massiivi, millel on üks element, 5ja pikkuse omadus 1, Array(5)loob uue tühja massiivi, millel on 5 tühja pesa ja omadus pikkus 5.

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

Lisaks sellele suurele erinevusele Array.of()käitub täpselt nagu Arraykonstruktor. Siit saate lisateavet Array.of().

Pange tähele, et see Array.of()töötab ainult ES6 toega brauserites.

Konverteerimine massiivideks: massiivi meeldimised ja itteraadid

Kui olete JavaScripti funktsioone kirjutanud piisavalt kaua, peaksite argumentsobjekti kohta juba teadma - see on massiivi tüüpi objekt, mis on saadaval igas funktsioonis, et hoida funktsiooni saadud argumentide loendit. Kuigi argumentsobjekt näeb välja nagu massiiv, pole tal Array.prototypemeetoditele juurdepääsu .

Enne ES6 nägite argumentsobjekti massiiviks teisendamisel tavaliselt järgmist koodilõiku :

Mis Array.from()või leviku operaator saab mugavalt teisendada tahes massiivipõhised nagu objekti massiivi. Seega selle asemel, et seda teha:

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

saate teha ühte järgmistest:

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

Need kehtivad ka korduvvariantide kohta, nagu on näidatud järgmisel joonisel:

Juhtumianalüüs: vahemiku funktsioon

Juhtumiuuringuna loome enne jätkamist lihtsa range()funktsiooni, et rakendada just õpitud uue massiivi häkkimine . Funktsioonil on järgmine allkiri:

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

Siin on koodilõik:

Selles koodilõigus kasutasime Array.from()uue dünaamilise pikkusega vahemiku massiivi loomist ja seejärel asustasime järjestikku kasvanud arvud, pakkudes kaardistamisfunktsiooni.

Pange tähele, et ülaltoodud koodilõik ei tööta brauserites ilma ES6-toeta, välja arvatud juhul, kui kasutate polüfille.

Siin on mõned range()ülaltoodud koodilõigus määratletud funktsiooni kutsumise tulemused :

Reaalajas koodidemo saate, käivitades Codepenis järgmise pliiatsi :

Kloonimismassiivid: väljakutse

JavaScripti puhul on massiivid ja objektid viitetüübid. See tähendab, et kui muutujale määratakse massiiv või objekt, on muutujale omistatud viide mälu asukohale, kuhu massiiv või objekt salvestati.

Massiivid, nagu ka kõik muud JavaScripti objektid, on viitetüübid. See tähendab, et massiive kopeeritakse viitena, mitte väärtuse järgi.

Viidetüüpide sellisel säilitamisel on järgmised tagajärjed:

1. Sarnased massiivid ei ole võrdsed.

Siin näeme, et kuigi array1ja array2sisaldavad näiliselt sama massiivi kirjeldused, nad ei ole võrdsed. Seda seetõttu, et viide igale massiivile osutab mälus erinevale asukohale.

2. Massiive kopeeritakse viitena, mitte väärtuse järgi.

Siin üritame kopeerida array1, et array2, kuid mida me oleme põhimõtteliselt teeme osutab array2sama asukohta mälus, et array1punkte. Seega, mõlemad array1ja array2osutavad mälu samale asukohale ja on võrdsed.

Selle tagajärg on see, et kui muudame array2viimast üksust eemaldades, eemaldatakse ka viimane üksus array1. Seda seetõttu, et muutus oli tegelikult tehtud massiivi mällu salvestatud arvestades array1ja array2on vaid vihjeid, et samas kohas mälus kui massiiv on salvestatud.

Kloonimismassiivid: häkid

1. Kasutades Array.prototype.slice ()

slice()Meetod tekitab madalas koopia osa massiivi muutmata massiivi. Siit saate lisateavet slice().

Trikk on helistada slice()kas 0ainsa argumendina või ilma igasuguste argumentideta:

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

Siin on massiivi kloonimise lihtne näide slice():

Siin näete, et tegemist array2on array1samade esemete ja pikkusega klooniga . Kuid nad osutavad mälu erinevatele kohtadele ja seetõttu pole need võrdsed. Samuti märkate, et kui muudame array2viimast üksust eemaldades, array1jääb see muutumatuks.

2. Kasutades Array.prototype.concat ()

concat()Meetodit kasutatakse ühendada kaks või enam massiivid, mille tulemuseks on uue massiivi, samas kui esialgne massiivid on jäänud samaks. Siit saate lisateavet concat().

Trikk on kutsuda argumendina concat()kas tühja massiiviga ( []) või üldse argumentideta:

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

Massiivi kloonimine rakendusega concat()on üsna sarnane kasutamisega slice(). Siin on massiivi kloonimise lihtne näide concat():

3. Kasutades Array.from ()

Nagu nägime varem, Array.from()saab seda kasutada uue massiivi loomiseks, mis on algse massiivi madal koopia. Siin on lihtne illustratsioon:

4. Massiivi ümberstruktureerimise kasutamine

ES6-ga on meie tööriistakastis mõned võimsamad tööriistad, nagu näiteks restruktureerimine , levitamineoperaator , noole funktsioonid ja nii edasi. Ümberkorraldamine on väga võimas tööriist andmete hankimiseks keerukatest tüüpidest nagu massiivid ja objektid.

Trikk on kasutada tehnikat, mida nimetatakse puhkeparameetriteks, mis hõlmab massiivi hävitamise ja hajutusoperaatori kombinatsiooni, nagu on näidatud järgmises lõigus:

let [...arrayClone] = originalArray;

Ülaltoodud koodilõik loob muutuja nimega, arrayClonemis on selle kloon originalArray. Siin on lihtne näide massiivi kloonimisest massiivi hävitamise abil:

Kloonimine: madal versus sügav

Kõik siiani uuritud massiivi kloonimistehnikad annavad massiivist madala koopia . See ei ole probleem, kui massiiv sisaldab ainult primitiivseid väärtusi. Kui aga massiiv sisaldab pesastatud objektiviiteid, jäävad need viited puutumata ka massiivi kloonimisel.

Siin on selle väga lihtne näide:

Pange tähele, et pesastatud massiivi array1modifitseerimine modifitseeris ka pesastatud massiivi array2ja vastupidi.

Selle probleemi lahenduseks on massiivi sügava koopia loomine ja selleks on paar võimalust.

1. JSON-tehnika

Lihtsaim viis massiivi sügava koopia loomiseks on kombinatsiooni JSON.stringify()ja abil JSON.parse().

JSON.stringify()teisendab JavaScripti väärtuse kehtivaks JSON-stringiks, samal ajal JSON.parse()kui JSON-string vastavaks JavaScripti väärtuseks või objektiks.

Siin on lihtne näide:

JSON-tehnikal on mõningaid vigu, eriti kui on tegemist muude väärtuste kui stringide, arvude ja booleanidega.

Need JSON-i tehnikas esinevad vead on peamiselt tingitud viisist, kuidas JSON.stringify()meetod teisendab väärtused JSON-stringiks.

Siin on selle vea lihtne näide JSON.stringify()pesastatud funktsiooni sisaldava väärtuse proovimisel .

2. Sügava kopeerimise abimees

JSON-tehnikale on elujõuline alternatiiv oma sügava koopia abistaja funktsiooni juurutamine viitetüüpide kloonimiseks, olgu need siis massiivid või objektid.

Siin on väga lihtne ja minimalistlik sügava koopia funktsioon deepClone:

Nüüd pole see sügava koopia funktsioonide parim, nagu näete varsti mõnede JavaScripti teekide puhul - siiski teostab see sügavat kopeerimist üsna hästi.

3. JavaScripti raamatukogude kasutamine

Äsja määratletud sügava koopia abistaja funktsioon ei ole piisavalt kindel igasuguste JavaScripti andmete kloonimisel, mis võivad olla keerukate objektide või massiivide sees.

JavaScripti teegid, nagu Lodash ja jQuery, pakuvad tugevamaid sügava koopia utiliidi funktsioone, toetades erinevat tüüpi JavaScripti andmeid.

Siin on näide, mis kasutab _.cloneDeep()Lodashi teegist:

Siin on sama näide, kuid kasutades $.extend()jQuery teeki:

Järeldus

Selles artiklis oleme suutnud uurida mitut tehnikat uute massiivide dünaamiliseks loomiseks ja juba olemasolevate kloonimiseks, sealhulgas massiivitaoliste objektide ja iterable'i massiivideks teisendamiseks.

Samuti oleme näinud, kuidas mõned ES6-s kasutusele võetud uued funktsioonid ja täiustused võimaldavad meil massiividega teatud manipuleerimisi tõhusalt teostada.

Massiivide kloonimiseks ja levitamiseks kasutasime selliseid funktsioone nagu destruktureerimine ja hajutamise operaator. Sellest artiklist saate lisateavet ümberkorraldamise kohta.

Plaksuta ja jälgi

Kui leiate, et see artikkel on mõistlik, võite vabalt veidi aplausi teha, kui te seda ei pahanda.

Samuti võite mind jälgida lehel Medium (Glad Chinda), et saada ülevaatlikumaid artikleid, mis võivad teile kasulikud olla. Võite mind jälgida ka Twitteris (@gladchinda).

Head häkkimist ...