• Käännös

Useimmat nykyään kehitetyt sovellukset vaativat vuorovaikutusta jonkinlaisen tietojoukon kanssa. Kokoelmien elementtien käsittely on yleinen toiminto, jonka olet todennäköisesti kohdannut. Kun työskentelet esimerkiksi taulukoiden kanssa, voit ajattelematta käyttää säännöllistä for-silmukkaa, joka näyttää suunnilleen tältä: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Oletetaan, että meidän täytyy näyttää luettelo tuotteista ja tarvittaessa jakaa se luokkiin, suodattaa se, suorittaa haku, muokata tätä luetteloa tai sen elementtejä. Ehkä sinun on suoritettava nopeasti joitain laskelmia, jotka sisältävät luettelon elementtejä. Oletetaan, että sinun täytyy lisätä jotain johonkin, kertoa jotain jollakin. Onko JavaScriptistä mahdollista löytää työkaluja, joiden avulla voit ratkaista tällaiset ongelmat nopeammin ja kätevämmin kuin käyttämällä tavallista for-silmukkaa?

Itse asiassa JavaScriptissä on tällaisia ​​toimintoja. Joitakin niistä käsitellään materiaalissa, jonka käännöksen esittelemme huomionne tänään. Erityisesti puhumme leviämisoperaattorista, for...of-silmukasta ja menetelmistä include(), some(), every(), filter(), map() ja vähennys(). Puhumme tässä enimmäkseen taulukoista, mutta tässä käsitellyt tekniikat sopivat yleensä muun tyyppisten objektien kanssa työskentelyyn.

On huomattava, että arvostelut nykyaikaisia ​​lähestymistapoja JS-kehitys sisältää yleensä esimerkkejä, jotka on valmistettu nuolifunktioilla. Ehkä et käytä niitä kovin usein – ehkä siksi, että et pidä niistä, ehkä siksi, että et halua käyttää liikaa aikaa uuden oppimiseen, tai ehkä ne eivät vain ole sinulle sopivia. Siksi täällä useimmissa tilanteissa näytetään kaksi vaihtoehtoa samojen toimintojen suorittamiseen: käyttämällä normaalit toiminnot(ES5) ja käyttämällä nuolitoimintoja (ES6). Niille, jotka eivät ole aiemmin käyttäneet nuolifunktioita, nuolifunktiot eivät ole funktion määrittelyjä ja funktiolausekkeita vastaavia. Sinun ei pitäisi korvata yhtä toisella. Tämä johtuu erityisesti siitä, että tavallisissa ja nuolitoiminnoissa avainsana tämä käyttäytyy eri tavalla.

1. Laajennusoperaattori

Hajautusoperaattorin avulla voit "laajentaa" taulukoita korvaamalla niiden elementit taulukoiden sijaan paikassa, jossa tätä operaattoria käytetään. Samanlaista lähestymistapaa on ehdotettu objektiliteraaaleille.

▍Laajennusoperaattorin vahvuudet

• Se on yksinkertainen ja nopea tapa"vetää ulos" sen yksittäiset elementit taulukosta.
• Tämä operaattori soveltuu taulukko- ja objektiliteraalien työskentelyyn.
• Tämä on nopea ja intuitiivinen tapa työskennellä funktion argumenttien kanssa.
• Laajennusoperaattori ei vie paljon tilaa koodissa - se näyttää kolmelta pisteeltä (...).

▍ Esimerkki

Oletetaan, että sinun tehtäväsi on luetella suosikkiherkkusi ilman silmukkaa. Laajennusoperaattorilla tämä tehdään seuraavasti:

2. Silmukka… of

For… of -lause on suunniteltu kulkemaan iteroitavissa olevien objektien läpi. Se antaa pääsyn yksittäisiä elementtejä sellaisia ​​objekteja (erityisesti taulukon elementteihin), mikä mahdollistaa esimerkiksi niiden muokkaamisen. Sitä voidaan pitää tavallisen korvaajana silmukalle.

▍For…of-silmukan vahvuudet

• Tämä on helppo tapa lisätä tai päivittää kokoelman kohteita.
• For…of-silmukan avulla voit suorittaa erilaisia ​​laskutoimituksia elementtien avulla (summaus, kertolasku ja niin edelleen).
• Se on kätevä käyttää, kun sinun on tarkistettava olosuhteet.
• Sen käyttö johtaa puhtaamman ja luettavamman koodin kirjoittamiseen.

▍ Esimerkki

Oletetaan, että sinulla on tietorakenne, joka kuvaa työkalupakin sisältöä, ja haluat näyttää kyseiset työkalut. Näin teet sen käyttämällä for...of-silmukkaa:

3. include()-menetelmä

include()-menetelmällä tarkistetaan, onko kokoelmassa tietty elementti, erityisesti esim. tietty rivi merkkijonoja sisältävässä taulukossa. Tämä menetelmä palauttaa tosi tai epätosi testin tuloksista riippuen. Sitä käytettäessä kannattaa huomioida, että se on isot ja pienet kirjaimet huomioitava. Jos kokoelma sisältää esimerkiksi merkkijonoelementin SCHOOL ja sisältää() tarkistaa sen olemassaolon käyttämällä merkkijonokoulua, menetelmä palauttaa arvon false .

▍Includes()-menetelmän vahvuudet

• include()-menetelmä on hyödyllinen luotaessa yksinkertaisia ​​tiedonhakumekanismeja.
• Se antaa kehittäjälle intuitiivisen selkeä tapa määritetään tiettyjen tietojen läsnäolo taulukossa.
• Sitä on kätevää käyttää ehdollisissa lausekkeissa elementtien muokkaamiseen, suodattamiseen ja muiden toimintojen suorittamiseen.
• Sen käyttö parantaa koodin luettavuutta.

▍ Esimerkki

Oletetaan, että sinulla on autotalli, jota edustaa joukko autoja, etkä tiedä, onko tietty auto tässä autotallissa vai ei. Tämän ongelman ratkaisemiseksi sinun on kirjoitettava koodi, jonka avulla voit tarkistaa, onko auto tallissa. Käytetään include()-menetelmää:

4. jokin()-menetelmä

Some()-menetelmän avulla voit tarkistaa, onko joitain etsimiäsi elementtejä taulukossa. Testitulosten perusteella se palauttaa tosi tai epätosi . Se on samanlainen kuin yllä oleva include()-menetelmä, paitsi että sen argumentti on funktio eikä esimerkiksi tavallinen merkkijono.

▍ Some()-menetelmän vahvuudet

• Some()-menetelmän avulla voimme tarkistaa, sisältääkö taulukko vähintään yhden meitä kiinnostavista elementeistä.
• Se suorittaa kuntotestin sille välitetyn toiminnon avulla.
• Tämä menetelmä on kätevä käyttää.

▍ Esimerkki

Oletetaan, että olet seuran omistaja, etkä yleensäkään ole kiinnostunut siitä, kuka tarkalleen ottaen tulee klubisi. Jotkut vierailijat eivät kuitenkaan pääse sisään klubiin, koska he ovat alttiita alkoholijuomien liialliselle kulutukselle. vähintään, jos he löytävät itsensä laitoksestasi yksin, eikä heidän kanssaan ole ketään, joka voisi huolehtia heistä. IN tässä tapauksessa vierailijaryhmä pääsee klubiin vain, jos vähintään yksi heistä on vähintään 18-vuotias. Automatisoidaksemme tällaisen tarkistuksen, käytämme some()-menetelmää. Alla sen sovellus on esitetty kahdessa versiossa.

ES5

ES6

5. Every()-metodi

Every()-menetelmä toistuu taulukon läpi ja testaa jokaisen elementin tiettyä ehtoa vastaan. Palauttaa tosi, jos kaikki taulukon elementit vastaavat ehtoa, ja false muussa tapauksessa. Voit nähdä, että se on samanlainen kuin some()-menetelmä.

▍ Every()-menetelmän vahvuudet

• Every()-metodin avulla voit tarkistaa, täyttävätkö kaikki taulukon elementit ehdon.
• Ehdot voidaan asettaa funktioiden avulla.
• Se edistää deklaratiivista lähestymistapaa ohjelmointiin.

▍ Esimerkki

Palataanpa edelliseen esimerkkiin. Siellä päästit alle 18-vuotiaat vierailijat klubiin, mutta joku kirjoitti poliisille lausunnon, jonka jälkeen jouduit epämiellyttävään tilanteeseen. Kun kaikki oli selvitetty, päätit, että et tarvitse kaikkea tätä, ja tiukensit klubin vierailun sääntöjä. Nyt vierailijaryhmä pääsee kerhoon vain, jos jokainen ryhmän jäsen on vähintään 18-vuotias. Kuten viime kerralla, harkitsemme ongelman ratkaisemista kahdessa versiossa, mutta tällä kertaa käytämme every()-menetelmää.

ES5

ES6

6. filter()-menetelmä

Filter()-menetelmällä voit luoda taulukon perusteella uusi joukko, joka sisältää vain ne lähdetaulukon elementit, jotka täyttävät tietyn ehdon.

▍ Filter()-menetelmän vahvuudet

• Filter()-menetelmä välttää alkuperäisen taulukon muuttamisen.
• Sen avulla voit päästä eroon tarpeettomista elementeistä.
• Se parantaa koodin luettavuutta.

▍ Esimerkki

Oletetaan, että sinun on valittava hintaluettelosta vain ne, jotka ovat suurempia tai yhtä suuria kuin 30. Ratkaisemme tämän ongelman käyttämällä filter()-menetelmää.

ES5

ES6

7. Map()-menetelmä

Map()-menetelmä on samanlainen kuin filter()-menetelmä, koska se palauttaa myös uuden taulukon. Sitä käytetään kuitenkin alkuperäisen taulukon elementtien muokkaamiseen.

▍Map()-menetelmän vahvuudet

• Map()-menetelmä välttää tarpeen muuttaa alkuperäisen taulukon elementtejä.
• Sitä voidaan käyttää kätevästi taulukon elementtien muokkaamiseen.
• Se parantaa koodin luettavuutta.

▍ Esimerkki

Oletetaan, että sinulla on luettelo tuotteista ja hinnat. Esimiehenne tarvitsee uusi lista tavaroita, joiden hintoja on alennettu 25 %. Ratkaistaan ​​tämä ongelma käyttämällä map()-menetelmää.

ES5

ES6

8. vähentää()-menetelmä

Reduce()-menetelmän avulla voit yksinkertaisimmassa muodossaan summata elementtejä numeeriset taulukot. Toisin sanoen se pienentää taulukon yhdeksi arvoksi. Näin voit käyttää sitä erilaisten laskelmien suorittamiseen.

▍Reducents()-menetelmän vahvuudet

• Reduction()-menetelmällä voit laskea taulukon elementtien summan tai keskiarvon.
• Tämä menetelmä nopeuttaa ja yksinkertaistaa laskelmia.

▍ Esimerkki

Oletetaan, että sinun on laskettava viikon kulut, jotka on tallennettu taulukkoon. Ratkaistaan ​​tämä ongelma vähentämismenetelmällä().

ES5

ES6

Lisää tunnisteita

Tässä artikkelissa tarkastellaan JavaScript-taulukkoa ja sen komponentteja. JavaScript on ihanteellinen ohjelmointiin. Itse asiassa se toteuttaa ECMAScript-kielen (ECMA-262-standardi).

Missä JavaScriptiä käytetään? Sitä käytetään määrittelykielenä ohjelmistopolku hakemuksen aiheeseen. Se löytyy selaimista, joissa sitä käytetään komentosarjakielenä, joka tekee verkkosivuista interaktiivisia.

Tämän tuotteen tärkeimmät arkkitehtoniset ominaisuudet ovat dynaaminen ja heikko kirjoitus, automaattinen muistinhallinta, täydellinen ohjelmointi ja ensiluokkaiset objektitoiminnot.

Yleensä JavaScript vaikutti eri syistä, koska kehitystyön aikana haluttiin luoda Javaa muistuttava kieli, mutta ohjelmoijien helppokäyttöinen. Muuten, JavaScript-kieltä ei omista mikään yritys tai organisaatio, mikä tekee siitä toisin kuin monet verkkokehittäjien käyttämät ohjelmointityylit.

On huomattava, että JavaScript on rekisteröity tavaramerkki koskee Oracle Corporationia.

Mikä on array?

Taulukko on sellainen, joka tallentaa numeroituja arvoja. Jokaista tällaista arvoa kutsutaan taulukkokomponentiksi ja numeroa, johon komponentti liittyy, kutsutaan indeksiksi. JavaScript-taulukko on kirjoittamaton. Tämä tarkoittaa, että taulukon osat voivat olla mitä tahansa tyyppiä ja samaan taulukkoon kuuluvilla eri osilla on täysin erilaisia ​​tyyppejä.

Lisäksi JavaScript-taulukko on dynaaminen, mikä tarkoittaa sitä kiinteä koko ei tarvitse ilmoittaa. Loppujen lopuksi voit lisätä uusia tietoja milloin tahansa.

Array tuotanto

JavaScriptin avulla taulukon luominen ei ole ollenkaan vaikeaa. Tätä varten on kaksi tapaa. Ensimmäinen sisältää taulukon luomisen kirjaimella - hakasulkeilla, jonka sisällä on luettelo osista pilkuilla erotettuna.

• var tyhjä = ; //tyhjä array;
• var numerot = ; //taulukko viidellä digitaalisella komponentilla;
• var diff = ; //taulukko, jossa on kolme erityyppistä elementtiä.

Tyypillisesti arvojen ei tarvitse olla yksinkertaisia ​​(merkkijonoja ja numeroita). Se voi olla myös mitä tahansa muita lausekkeita, esimerkiksi aiheliteraaleja, muita toimintoja ja taulukoita.

Toinen tapa luoda taulukko on kutsua Array()-suunnittelija. Voit kutsua hänet kolmella tavalla:

• Suunnittelijan kutsuminen ilman argumentteja: var b - new Array(). Tämä mahdollistaa tyhjän taulukon luomisen, joka vastaa tyhjää literaalia.
• Konstruktori määrittää nimenomaisesti taulukon n komponentin arvon: var b = new Array (1, 3, 5, 8, "merkkijono", tosi). Tässä tapauksessa suunnittelijalle esitetään luettelo argumenteista, jotka muutetaan uuden taulukon komponenteiksi. Argumentit kirjoitetaan taulukkoon siinä paikassa, jossa ne on määritetty.
• Alueen määrittäminen myöhempää arvojen määritystä varten. Tämä tehdään määrittämällä taulukkoa tunnistettaessa yksi luku suluissa: var b = new Array(5). Tämä menetelmä tunnistus sisältää tarvittavan määrän komponentteja allokoinnin taulukkoon (joista jokainen on listattu määrittelemättömäksi) ja mahdollisuus antaa arvoja myöhemmin esitysprosessin aikana. Tätä lomaketta käytetään yleensä esiallokoimaan Javascript-taulukko, jonka pituus tiedetään etukäteen.

Kirjoittaminen, lukeminen ja taulukon yksityiskohtien lisääminen

Voit käyttää taulukon komponentteja käyttämällä operaattoria. Muuten, kaikki JavaScriptin komponentit nollasta alkaen on numeroitu. vastaanottaa vaadittu elementti, sen numero on ilmoitettu kohdassa Yksityiskohtia voidaan yleensä muuttaa. Ja jotta voit lisätä JavaScriptin taulukkoon, sinun tarvitsee vain määrittää uusi arvo.

On huomattava, että JavaScript-taulukot voivat tallentaa minkä tahansa määrän kaikenlaisia ​​elementtejä.

Taulukon pituus

Tiedämme siis, että taulukon pituus on yleensä mielenkiintoinen ilmiö. Katsotaanpa sitä tarkemmin. Kaikilla taulukoilla, olipa ne muodostettu Array()-suunnittelijalla tai paljastettu taulukkoliteraalilla, on tietty pituusominaisuus, joka ilmaisee tallennettujen elementtien kokonaismäärän. Koska matriisi voi sisältää määrittelemättömiä osia (merkitty undefined), tarkempi lauseke on: pituus laatu on aina yhtä suurempi kuin suurin. iso huone taulukkokomponentin (indeksi). Pituuden laatu säädetään automaattisesti, pysyen tarkana, kun uusia osia ilmestyy joukkoon.

Voit käyttää pituus-ominaisuutta saadaksesi taulukon viimeisen komponentin näkyviin.

Viimeisen osan indeksi on yhden pienempi kuin taulukon koko. Loppujen lopuksi lähtölaskenta alkaa aina tyhjästä. Voi tätä JavaScriptiä! Taulukon pituus riippuu elementtien tarkasta määrästä. Joten jos et tiedä kuinka monta niitä pitäisi olla, mutta sinun on päästävä taulukon viimeiseen elementtiin, sinun on käytettävä merkintää: v.length - 1.

Iterointi taulukon yksityiskohtien yli

Hyvin usein pituus-ominaisuutta käytetään iteroimaan taulukon yksityiskohtia silmukassa:

• var hedelmät = ["mansikka", "persikka", "omena", "banaani"];
• for(var I = 0; i< fruits.lenght; i++);
• document.write(hedelmät[i] + "...").

Tässä esimerkissä komponentit näyttävät olevan jatkuvasti sijoitettuina ja alkavat ensimmäisestä osasta, jonka indeksi on nolla. Jos näin ei ole, sinun on ennen kunkin taulukon elementin kutsumista tarkistettava, onko se määritetty.

Silmukkaa käytetään joskus myös komponenttien alustamiseen.

Kasvata ja katkaise taulukko

Ihmettelen kuinka kieltä käytetään JavaScript-merkkijono lisätä joukkoon? Kun työskentelemme taulukoiden kanssa, laatupituus paranee automaattisesti, minkä vuoksi meidän on huolehdittava siitä itse. On tarpeen muistaa yksi yksityiskohta - pituusominaisuus ei ole vain luettavissa, vaan myös kirjoitettava. Jos pituuslaadulle on määritetty arvo, joka on kooltaan pienempi kuin nykyinen, taulukko pienennetään määritettyyn kokoon. Kaikki komponentit, jotka eivät ole uudella indeksialueella, hylätään ja niiden arvot menetetään, vaikka pituus palautettaisiin myöhemmin - arvoja ei palauteta.

On melko helppoa tyhjentää taulukko seuraavasti: foo.length = 0.

Jos pituuslaadusta tehdään nykyistä arvoa suurempi, taulukon loppuun ilmestyy uusia tunnistamattomia osia, mikä kasvattaa sen haluttuun kokoon.

Kuvioosien poistaminen

Poista-operaattori määrittää määrittelemättömän arvon taulukkokomponentissa, mutta se on edelleen olemassa. Jos sinun on poistettava JavaScript-taulukon elementti, jotta loput osat siirretään vapaaseen tilaan, sinun on käytettävä jotakin tarjotuista taulukkomenetelmistä. Array.shift() eliminoi ensimmäisen komponentin, pop() eliminoi viimeisen komponentin ja splice() poistaa yhden tai joukon komponentteja missä tahansa taulukossa.

Moniulotteiset taulukot

Näyttää siltä, ​​​​että olemme hieman järjestäneet asioita Kaksiulotteiset taulukot- Sitä on syytä harkita seuraavaksi. Muistatko, että JavaScript-taulukot voivat sisältää muita elementtejä komponentteina? Tätä ominaisuutta käytetään tuotannossa moniulotteisia taulukoita. Voit vierailla taulukoiden osissa käyttämällä hakasulkeita kahdesti.

Assosiatiiviset taulukot

Nyt tutkitaan kuinka tavaramerkki JavaScript assosiatiivinen käyttää taulukoita. Tätä varten meidän on tutkittava teoriaa: assosiatiivisia taulukoita kutsutaan joskus hash-taulukoiksi. Niiden ansiosta merkkijonoja käytetään indeksien sijasta. Tällaisten konstruktien käyttäminen on samanlaista kuin ominaisuuden nimen käyttäminen yksinkertainen esine, mutta sisään tämä vaihtoehto kun suoritat työtä taulukkomuodossa. Koska JavaScriptiltä puuttuu tapoja toimia assosiatiivisten taulukoiden kanssa, niitä käytetään paljon harvemmin kuin tavallisia. On syytä huomata, että ne voivat silti olla hyödyllisiä tietojen tallentamisessa ja helpottaa käsiksi tarvittavien yksityiskohtien muistamista.

Array-tulostus

Mitä opimme nyt JavaScriptistä? Matriisin näyttäminen valintaikkunassa (näytöllä) sekä taulukon komponenttien arvojen näyttäminen.

Jos haluat näyttää ohjelman kaikkien komponenttien arvot, on kätevää käyttää for-lausetta. Mielenkiintoista on, että for rule -laskurimuuttujaa käytetään taulukkokomponentin indeksinä.

Puhdistus

Suodattaakseen JavaScript-taulukko, sinun on nollattava sen pituus:

• var myArray = ;
• myArray.length = 0.

• clear: function() (;
• this.length = 0;
• palauta tämä;

Komponenttien lisääminen ja poistaminen

No, jatketaan tämän tutkimista. mielenkiintoisin kieli JavaScript. Taulukkoelementti voidaan poistaa tai lisätä samalla tavalla kuin muiden objektien tavalliset ominaisuudet. Mutta tässä on joitain eroja: lisättäessä numeeriset ominaisuudet pituuden laatu voi muuttua, ja pituusominaisuutta muutettaessa numeeriset ominaisuudet voidaan eliminoida. Periaatteessa algoritmi taulukoiden ominaisuuksien asettamiseen on seuraava:

• Kun lisätään tuntematon digitaalinen ominaisuus i, jos pituus on yhtä suuri tai pienempi kuin i, pituudeksi määritetään i+1.
• Kun muutat laatupituutta, seuraavat vaiheet: jos määritetty arvo on pienempi kuin nolla, annetaan RangeError. Kaikki numeeriset ominaisuudet ja indeksit, jotka ovat yhtä suuret kuin uusi pituus ja jotka ovat suurempia, eliminoidaan.

Yleisesti ottaen JavaScript-taulukon elementin poistaminen ei ole vaikeaa. Loppujen lopuksi, jopa pituutta asetettaessa, sinun on poistettava siitä "ylimääräiset" komponentit. Tämä johtaa mahdollisuuteen tyhjentää taulukko. Jos tyhjän uuden taulukon määritetty muuttuja ei jostain syystä sovellu ja nykyinen on tarpeen nollata, riittää, että sen pituuslaadulle annetaan arvo nolla.

unshift, shift, pop ja push menetelmät

Vaikka taulukon komponentteja muokataan manuaalisesti, monet ihmiset suosittelevat sisäänrakennettujen menetelmien käyttöä tähän. Juuri tämä vivahde takaa oikean pituuden laatuarvon ja aukkojen puuttumisen taulukossa. Muuten, oikean pituuden laatu vastaa komponenttien määrää.

Push-menetelmä siirtää välitetyt osat taulukon loppuun. Pop-menetelmä palauttaa perässä olevan komponentin ja poistaa sen.

Yleensä sisään Internet Explorer aikaisempi kuin kahdeksas versio, unshift voi palauttaa muissa selaimissa uuden pituusarvon. Joten on parempi olla luottamatta vaihdon palautuksesta saatuun arvoon.

Osien lisääminen ja poistaminen taulukon keskellä

Jos minun on poistettava JavaScript-taulukko, mitä minun pitäisi tehdä? Liitosmenetelmällä tiedetään olevan allekirjoitus Array.prototype.splice.

Se poistaa deleteCount-komponentit taulukosta aloittaen aloitusilmaisimesta. Jos ohitetaan enemmän kuin kaksi argumenttia, kaikki seuraavat taulukon argumentit sijoitetaan eliminoitujen sijaan. Jos aloitus on negatiivinen, indeksi, josta nosto jatkuu, on yhtä suuri kuin pituus + aloitus. Taulukko palautetaan poistetuista elementeistä.

Itse asiassa käyttämällä liitosmenetelmä, voit poistaa komponentteja taulukon keskeltä tai lisätä minkä tahansa numeron mihin tahansa kohtaan taulukossa.

Yksinkertaisimmassa versiossa, jos haluat poistaa komponentin indeksillä i, sinun on pyydettävä liitosmenetelmä taulukosta parametreilla i ja 1.

Periaatteessa liitosmenetelmän toinen parametri on valinnainen, mutta yhden argumentin funktion käyttäytyminen on erilainen jokaisessa selaimessa.

Esimerkiksi Firefoxissa, Operan uusimmissa muunnelmissa, Safarissa ja Chromessa kaikki tiedot taulukon loppuun asti poistetaan.

Mitään komponenttia ei poisteta IE:ssä. Operan ensimmäisissä muunnelmissa on mahdotonta ennustaa käyttäytymistä - yksi osa indeksialkusta - 1 poistetaan. Siksi se on aina tarpeen tätä menetelmää läpäisevät vähintään kaksi komponenttia.

Avaimet

Tietysti JavaScriptiä oppiessa tulee pitää mielessä myös assosiatiiviset taulukot, kuten aiemmin mainittiin. Tämä on abstrakti tyyppinen tieto (rajapinta tietovarastoon), jonka avulla voit tallentaa muotoa "(avain, arvo)" olevia pareja ja tukea parin lisäämistä sekä parin poistamista ja etsimistä. avaimella:

ETSI (avain).

INSERT (arvo, avain).

POISTA (avain).

Oletetaan, että kahta samankaltaista paria ei voida tallentaa assosiatiiviseen taulukkoon. Parissa k + v v:tä kutsutaan avaimeen k liittyväksi arvoksi. Yllä olevien operaatioiden semantiikka ja nimet voivat olla erilaisia ​​tällaisten taulukoiden eri toteutuksissa.

Näin ollen FIND (avain) -toiminto palauttaa annettuun avaimeen liittyvän arvon tai jonkin tietyn UNDEF-objektin, mikä osoittaa, että annettuun avaimeen ei ole liitetty arvoa. Kaksi muuta toimintoa ei palauta mitään (paitsi onko toiminto onnistunut).

Yleisesti ottaen käyttöliittymän näkökulmasta on kätevää pitää assosiatiivista taulukkoa yksinkertaisena taulukkona, jossa indekseinä voidaan käyttää paitsi kokonaislukuja myös muun tyyppisiä arvoja - esimerkiksi merkkijonoja.

Muuten, tuki tällaisille taulukoille on saatavilla monissa tulkittavissa ohjelmointikielet korkea taso, kuten PHP, Perl, Ruby, Python, Tcl, JavaScript ja muut. Kielille, joilla ei ole sisäänrakennettuja työkaluja assosiatiivisten taulukoiden kanssa työskentelemiseen, on luotu valtava määrä toteutuksia kirjastojen muodossa.

Esimerkki assosiatiivinen matriisi voi palvella puhelinluettelo. Tässä versiossa merkitys on monimutkainen "F. I. O. + osoite”, ja avain on puhelinnumero. Yksi puhelinnumero on yksi omistaja, mutta yksi henkilö voi omistaa useita numeroita.

Assosiatiiviset laajennukset

On huomattava, että eniten tunnetut laajennukset sisältää seuraavat toimet:

• JOKAINEN - "käy läpi" kaikki tallennetut parit.
• CLEAR - poista kaikki tietueet.
• MIN - etsi pari, jolla on pienin avainarvo.
• MAX – etsi pari, jolla on suurin avainarvo.

Kaksi viimeistä vaihtoehtoa edellyttävät, että vertailutoiminto on merkitty näppäimiin.

Assosiatiivisten taulukoiden toteutukset

Niitä on monia erilaisia ​​toteutuksia assosiatiivinen matriisi. Yleisin toteutus saattaa perustua yksinkertainen joukko, jonka komponentit ovat (arvo, avain) pareja. Voit nopeuttaa hakutoimintoja järjestämällä komponentteja tästä joukosta avaimella ja etsi käyttämällä Mutta tämä pidentää uuden parin lisäämiseen tarvittavaa aikaa, koska taulukon komponentit on "siirrettävä" erilleen, jotta uusi tietue voidaan pakata näkyviin tulevaan tyhjään soluun.

Tunnetuimpia toteutuksia ovat erilaisiin hakupuihin perustuvat toteutukset. Esimerkiksi tyypillisessä C++ STL-lukijassa karttasäilö on toteutettu musta-mahonkipuun perusteella. Ruby-, Tcl- ja Python-tyylit käyttävät yhden tyyppistä hash-taulukkoa. On muitakin toteutuksia.

Yleensä jokaisella toteutuksella on omat haittansa ja etunsa. On tärkeää, että kaikki kolme toimintoa suoritetaan sekä keskimäärin että pahimmassa vivahteessa O(log n) -jakson aikana, missä n on nykyinen tallennettavien parien lukumäärä. Vastaavien hakupuiden (mukaan lukien musta-punaiset puut) osalta tämä ehto täyttyy.

Hash-taulukkopohjaisilla toteutuksilla tiedetään olevan keskimääräinen aika O(1), mikä on parempi kuin hakupuupohjaisilla toteutuksilla. Tämä ei tietenkään takaa yksittäisten toimintojen nopeaa suorittamista: pahimman tapauksen INSERT-aika merkitään O(n). INSERT-prosessi käynnissä pitkä aika, kun täyttökerroin saavuttaa korkeimman pisteensä ja on välttämätöntä rekonstruoida hash-taulukon indeksi.

Muuten, nämä hash-luettelot ovat huonoja, koska niitä ei voida käyttää nopeaan suorittamiseen lisätoimia MAX, MIN ja algoritmi kaikkien tallennettujen parien läpikulkua varten laskevassa tai nousevassa näppäinjärjestyksessä.

Taulukot ovat yksi yleisimmin käytetyistä muuttujatyypeistä, joiden avulla voit tallentaa useita peräkkäisiä arvoja "yhteen paikkaan". JavaScriptin suhteen on kuitenkin parantamisen varaa.

Tässä artikkelissa tarkastellaan kolmea vähän tunnettua tekniikkaa, joita voidaan käyttää taulukoiden kanssa työskennellessä.

1. Mukautettujen ominaisuuksien lisääminen taulukoihin

Jos käytät hakua löytääksesi taulukon määritelmän JavaScript-kieli, useimmat lähteet väittävät niin tämä tyyppi Muuttujan arvo esitetään objektina.

Yleisesti ottaen monet asiat, joita kohtaamme JavaScriptissä, ovat objekteja. Olisi kohtuullista huomata, että kieli sisältää myös "primitiivisiä" tietotyyppejä, mutta niiden arvoja käytetään jotenkin objektien sisällä olevissa ominaisuuksissa.

2. Matriisielementtien käyttäminen silmukassa

Koska taulukkoindeksit voivat saada vain positiivisia arvoja, laskenta alkaa nollasta. Voimme myöhemmin käyttää tätä indeksiä päästäksemme taulukon elementtiin tietyssä silmukan iteraatiossa.

ECMAScript6 esitteli tavan selata taulukkoa ilman indeksejä, vaan uuden for…of-silmukan kautta.

For...of-silmukka on suunniteltu iteroimaan taulukon elementtien läpi vaikuttamatta elementin indeksiin.

Var ary = ["oranssi", "omena", "litsi"]; for (let item of ary)( console.log(item); ) // "oranssi", "omena", "litsi" Vertailun vuoksi: tuoteindeksien tulostaminen for-silmukassa. var ary = ["oranssi","omena","litsi"]; for (var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3. Elementtien lukumäärä ei ole taulukon koko

Kun puhumme taulukon koosta, ajattelemme sitä yleensä siihen tallennettujen elementtien lukumääränä. Itse asiassa tämä ei ole täysin totta - pituusominaisuus lasketaan elementin enimmäisindeksin mukaan.

Pituusominaisuus on hyvin epäselvä. Tarkistaaksesi tämän, katso vain seuraavat manipulaatiot:

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

Viimeisessä esimerkissä riitti, että elementti asetettiin viidenneksi, minkä seurauksena taulukon pituudeksi tuli 6. Jos luulet, että indeksit 0-4 luodaan automaattisesti, olet väärässä. Tämä voidaan tarkistaa käyttämällä in-operaattoria.

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // väärin

Tässä tapauksessa olisi reilua kutsua ary-taulukkoa "harvaksi".

Voimme myös muokata pituusominaisuutta taulukoiden leikkaamiseksi. Alla oleva esimerkki osoittaa elementin "menettämisen" indeksissä 5 vähentämällä aaritaulukon pituusominaisuutta.

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // määrittelemätön

• Käännös

• I. Iterointi todellisten taulukoiden yli
  1. jokaiselle menetelmälle ja siihen liittyville menetelmille
  2. silmukalle
  3. Oikea käyttö for...silmukassa
  4. for... of loop (implisiittinen iteraattorin käyttö)
  5. Selkeä iteraattorin käyttö
• 1. Menetelmien käyttö todellisten taulukoiden iterointiin
  2. Muunna todelliseksi taulukoksi
  3. Huomautus ajonaikaisista objekteista

I. Iterointi todellisten taulukoiden yli

Päällä tällä hetkellä On kolme tapaa iteroida todellisen taulukon elementtejä:

1. menetelmä Array.prototype.forEach ;
2. klassikko silmukalle
3. "oikein" rakennettu...silmukalle.

Lisäksi pian, uuden ECMAScript 6 (ES 6) -standardin myötä, odotetaan kahta muuta menetelmää:

1. for...of silmukan (implisiittinen iteraattorin käyttö);
2. iteraattorin eksplisiittinen käyttö.

1. ForEach-menetelmä ja siihen liittyvät menetelmät

Jos projektisi on suunniteltu tukemaan ECMAScript 5 (ES5) -standardin ominaisuuksia, voit käyttää yhtä sen innovaatioista - forEach-menetelmää.

Käyttöesimerkki:
var a = ["a", "b", "c"]; a.forEach(funktio(merkintä) ( console.log(merkintä); ));
Yleensä forEachin käyttö edellyttää es5-shim-emulointikirjaston yhdistämistä sellaisille selaimille, joilla ei ole natiivi tuki tätä menetelmää. Näitä ovat IE 8 ja uudemmat varhaiset versiot, jotka ovat edelleen käytössä siellä täällä.

ForEachin etuna on, että paikallisia muuttujia ei tarvitse ilmoittaa nykyisen taulukkoelementin indeksin ja arvon tallentamiseksi, koska ne välitetään automaattisesti takaisinsoittofunktiolle argumentteina.

Jos olet huolissasi takaisinsoittojen mahdollisista kustannuksista jokaisessa elementissä, älä huoli ja lue tämä.

ForEach on suunniteltu iteroimaan kaikkia taulukon elementtejä, mutta sen lisäksi ES5 tarjoaa useita hyödyllisiä menetelmiä kaikkien tai joidenkin elementtien iterointiin sekä joidenkin toimien suorittamiseen niille:

• every - palauttaa tosi , jos jokaiselle taulukon elementille takaisinkutsu palauttaa arvon , joka voidaan muuntaa tosi .
• jotkut - palauttaa tosi, jos vähintään yhdelle taulukon elementille takaisinkutsu palauttaa arvon, joka voidaan muuntaa tosiksi.
• suodatin – luo uuden taulukon, joka sisältää ne alkuperäisen taulukon elementit, joille takaisinsoitto palauttaa tosi.
• kartta - luo uuden taulukon, joka koostuu takaisinkutsun palauttamista arvoista.
• vähentää - pienentää taulukon yhdeksi arvoksi ja soveltaa takaisinkutsua jokaiseen taulukon elementtiin vuorotellen alkaen ensimmäisestä (voi olla hyödyllinen taulukon elementtien ja muiden yhteenvetofunktioiden summan laskemisessa).
• vähentääRight - toimii samalla tavalla kuin pelkistys, mutta toistuu elementtien läpi käänteisessä järjestyksessä.

2. Silmukalle

Vanha hyvä säännöille:

Var a = ["a", "b", "c"]; var-indeksi; for (indeksi = 0; indeksi< a.length; ++index) { console.log(a); }
Jos taulukon pituus on vakio koko silmukan ajan ja silmukka itse kuuluu koodin suorituskykykriittiseen osaan (mikä on epätodennäköistä), voit käyttää "optimaalisempaa" versio varten tallentamalla taulukon pituuden:

Var a = ["a", "b", "c"]; var indeksi, len; for (indeksi = 0, len = a.length; indeksi< len; ++index) { console.log(a); }
Teoriassa tämän koodin pitäisi toimia hieman nopeammin kuin edellinen.

Jos elementtien järjestys ei ole tärkeä, voit mennä vielä pidemmälle optimoinnin suhteen ja päästä eroon muuttujasta taulukon pituuden tallentamiseksi muuttamalla haun järjestystä päinvastaiseksi:

Var a = ["a", "b", "c"]; var-indeksi; for (indeksi = a.length - 1; index >= 0; --index) ( console.log(a); )
Nykyaikaisissa JavaScript-moottoreissa tällaiset optimointipelit eivät kuitenkaan yleensä tarkoita mitään.

3. For...in silmukan oikea käyttö

Jos sinua kehotetaan käyttämään for...in-silmukkaa, muista, että taulukoiden iterointi ei ole sitä, mihin se on tarkoitettu. Vastoin yleistä väärinkäsitystä, for...in -silmukka ei iteroi taulukkoindeksien, vaan objektin lukuisten ominaisuuksien kautta.

Joissakin tapauksissa, kuten iterointi harvassa taulukossa, for...in voi kuitenkin olla hyödyllistä, kunhan noudatat varotoimia, kuten alla olevassa esimerkissä näkyy:

// a - harva matriisi var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) ( if (a.hasOwnProperty(avain) && /^0$|^\d*$/.test(avain) && avain<= 4294967294) { console.log(a); } }
Tässä esimerkissä silmukan jokaisessa iteraatiossa suoritetaan kaksi tarkistusta:

1. että taulukolla on oma ominaisuus nimeltä avain (ei peritty sen prototyypistä).
2. tämä avain on merkkijono, joka sisältää desimaaliesityksen kokonaisluvusta, jonka arvo on pienempi kuin 4294967294. Mistä viimeinen numero tulee? ES5:n taulukkoindeksin määritelmästä, joka osoittaa, että korkein indeksi, joka taulukon elementillä voi olla, on: (2^32 - 2) = 4294967294 .

Tietenkin tällaiset tarkistukset vievät turhaa aikaa silmukkaa suoritettaessa. Mutta harvan taulukon tapauksessa tämä menetelmä on tehokkaampi kuin for-silmukka, koska tässä tapauksessa vain ne elementit, jotka on määritelty taulukossa, iteroidaan. Joten yllä olevassa esimerkissä suoritetaan vain 3 iteraatiota (indekseille 0, 10 ja 10000) verrattuna 10001:een for-silmukassa.

Jotta et kirjoita niin hankalaa tarkistuskoodia joka kerta, kun sinun on iteroitava taulukon läpi, voit kirjoittaa sen erillisenä funktiona:

Funktio arrayHasOwnIndex(taulukko, avain) ( return array.hasOwnProperty(avain) && /^0$|^\d*$/.test(avain) && avain<= 4294967294; }
Sitten esimerkin silmukan runko pienenee merkittävästi:

For (näppäin a) ( if (arrayHasOwnIndex(a, avain)) ( console.log(a); ) )
Yllä käsitelty tarkistuskoodi on universaali, sopii kaikkiin tapauksiin. Mutta sen sijaan voit käyttää lyhyempää versiota, vaikkakaan ei muodollisesti täysin oikeaa, mutta joka kuitenkin sopii useimpiin tapauksiin:

For (key in a) ( if (a.hasOwnProperty(avain) && String(parseInt(avain, 10)) === avain) ( console.log(a); ) )

4. For...of silmukan (iteraattorin implisiittinen käyttö)

ES6, joka on edelleen luonnostilassa, tuo iteraattorit JavaScriptiin.

Iteraattori on objektin toteuttama protokolla, joka määrittää vakiotavan arvojonon (äärellisen tai äärettömän) saamiseksi.
Iteraattori on objekti, joka määrittää next()-metodin – argumenttittoman funktion, joka palauttaa objektin, jolla on kaksi ominaisuutta:

1. tehty (boolean) - tosi, jos iteraattori on saavuttanut iteroitavan sekvenssin lopun. Muuten arvo on väärä.
2. arvo - määrittää iteraattorin palauttaman arvon. Voi olla määrittelemätön (puuttuu), jos tehty ominaisuus on tosi .

Monet sisäänrakennetut esineet, mm. todellisissa taulukoissa on oletuksena iteraattorit. Yksinkertaisin tapa käyttää iteraattoria todellisissa taulukoissa on käyttää uutta for...of -konstruktiota.

Esimerkki käytöstä:

Varval; var a = ["a", "b", "c"]; for (arvo of a) ( console.log(val); )
Yllä olevassa esimerkissä for...of-silmukka kutsuu implisiittisesti Array-objektin iteraattoria saadakseen taulukon jokaisen arvon.

5. Iteraattorin eksplisiittinen käyttö

Iteraattoreita voidaan käyttää myös eksplisiittisesti, mutta tässä tapauksessa koodista tulee paljon monimutkaisempi verrattuna for...of-silmukkaan. Se näyttää jotakuinkin tältä:

Var a = ["a", "b", "c"]; var it = a.entries(); var pääsy; while (!(merkintä = se.seuraava()).tehty) ( console.log(entry.value); )
Tässä esimerkissä Array.prototype.entries-menetelmä palauttaa iteraattorin, jota käytetään taulukon arvojen näyttämiseen. Jokaisessa iteraatiossa entry.value sisältää taulukon muodossa [avain, arvo] .

II. Iterointi taulukon kaltaisten objektien yli

Oikeiden taulukoiden lisäksi JavaScriptissä on myös taulukon kaltaisia ​​objekteja . Niillä on yhteistä todellisten taulukoiden kanssa, että niillä on pituusominaisuus ja ominaisuudet, jotka on nimetty numeroiksi, jotka vastaavat taulukon elementtejä. Esimerkkejä ovat NodeList-kokoelman DOM ja argumentit pseudo-array, jotka ovat käytettävissä missä tahansa funktiossa/menetelmässä.

1. Menetelmien käyttö todellisten taulukoiden iterointiin

Vähintään useimpia, ellei kaikkia, todellisten taulukoiden iterointimenetelmiä voidaan käyttää taulukon kaltaisten objektien iterointiin.

For ja for...in -konstrukteja voidaan soveltaa taulukon kaltaisiin objekteihin täsmälleen samalla tavalla kuin niitä sovelletaan todellisiin taulukoihin.

ForEach ja muut Array.prototype-menetelmät koskevat myös taulukon kaltaisia ​​objekteja. Tätä varten sinun on käytettävä Function.call tai Function.apply .

Jos esimerkiksi haluat soveltaa forEach-komentoa Node-objektin childNodes-ominaisuuteen, teet sen seuraavasti:

Array.prototype.forEach.call(node.childNodes, function(child) ( // tee jotain aliobjektilla));
Tämän tempun uudelleenkäytön helpottamiseksi voit ilmoittaa viittauksen Array.prototype.forEach-metodiin erillisessä muuttujassa ja käyttää sitä pikakuvakkeena:

// (olettaen, että kaikki alla oleva koodi on samassa laajuudessa) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // tee jotain aliobjektilla));
Jos taulukon kaltaisella objektilla on iteraattori, sitä voidaan käyttää eksplisiittisesti tai implisiittisesti iteroimaan objektin yli samalla tavalla kuin todellisissa taulukoissa.

2. Muunna todelliseksi taulukoksi

On myös toinen, hyvin yksinkertainen tapa iteroida taulukon kaltaisen objektin yli: muuntaa se todelliseksi taulukoksi ja käyttää mitä tahansa edellä käsitellyistä menetelmistä iteroitaessa todellisia taulukoita. Muuntamiseen voit käyttää yleistä Array.prototype.slice-menetelmää, jota voidaan soveltaa mihin tahansa taulukon kaltaiseen objektiin. Tämä tehdään hyvin yksinkertaisesti, kuten alla olevassa esimerkissä näkyy:

Muutt trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Jos esimerkiksi haluat muuntaa NodeList-kokoelman varsinaiseksi taulukoksi, tarvitset seuraavanlaisen koodin:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Päivittää: Kuten kommenteissa todettiin

Opitaan indeksoimaan taulukoita js:ssä, poistamaan ja lisäämään niiden elementtejä.

JavaScript-taulukko on globaali objekti, joka on suunniteltu tallentamaan arvoluettelo.

Se on samanlainen kuin muut muuttujat siinä mielessä, että se voi tallentaa kaikentyyppisiä tietoja. Mutta taulukolla on yksi tärkeä ero muuttujaan: se voi tallentaa useamman kuin yhden elementin kerrallaan.

Taulukko on järjestys arvojen kokoelma. Jokaista arvoa kutsutaan elementiksi ja sillä on oma numeronsa, jota kutsutaan indeksiksi.

Matriisin sisällä oleva elementti voi olla mitä tahansa tyyppiä. Lisäksi yhden taulukon elementit voivat olla erityyppisiä: numeroita, merkkijonoja, loogisia elementtejä ja jopa objekteja tai muita taulukoita.

Taulukon elementtien järjestys alkaa 0:sta. Osoittautuu, että taulukossa on aina indeksisiirtymä yhdellä: ensimmäisellä elementillä on indeksi 0, toisella 1 jne.

Tässä on esimerkki taulukosta, jossa on erityyppisiä elementtejä:

Taulukon luominen (ilmoittaminen).

Taulukot ovat erittäin käteviä, koska ne voivat tallentaa niin paljon tietoa kuin tarvitset. js-taulukon suurin mahdollinen koko on 2 32 elementtiä.

Meidän on kerrottava JavaScriptille, että haluamme luoda taulukon. Tähän on kaksi vaihtoehtoa: arvo hakasulkeissa tai uusi avainsana.

Lyhyt merkintä: hakasulkeilla

Pilkuilla eroteltu luettelo arvoista hakasulkeissa.

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

Taulukon sisältö määräytyy sen mukaan, mitä hakasulkeissa on. Jokainen arvo erotetaan pilkulla.

Arvot määritetään samalla tavalla kuin yksinkertaiset muuttujat, eli merkkijonot on ilmoitettava lainausmerkkien sisällä jne.

Jos haluat ilmoittaa tyhjän taulukon, jätä sulut tyhjiksi:

var myArray = ;

Pitkä merkintä: Array()-konstruktorin avulla

var lostArray = new Array("Jack", "Sawyer", "John", "Desmond"); var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

Uusi avainsana käskee JavaScriptiä luomaan uuden taulukon, jonka arvot välitetään parametreina.

Jos tiedät etukäteen kuinka monta elementtiä taulukossasi on, voit välittää tämän arvon välittömästi rakentajassa.

var myArray = uusi Array(80);

Yllä oleva lauseke luo tyhjän taulukon, joka koostuu 80 paikasta määrittelemättömillä arvoilla.

Tyhjän taulukon ilmoittaminen:

var myArray = new Array();

Array Elementtien käyttäminen

Kunkin elementin indeksin avulla voit työskennellä minkä tahansa taulukon tietojen kanssa ja käyttää sitä operaattorilla:

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; console.log(myArray); // Tulostaa "Jack" console.log(myArray); // Tulostaa "Desmond"

Taulukossa voi olla useita tasoja, eli jokainen elementti voi itse olla taulukko. Tuloksena on kaksiulotteinen js-taulukko. Kuinka voimme käyttää näitä taulukoita, jotka sijaitsevat muiden sisällä - " moniulotteisia taulukoita»?

Tarkastellaan esimerkkinä perhettä edustavaa taulukkoa. Tämän perheen lapset kirjataan erilliseen taulukkoon pääryhmän sisällä:

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Voit kuvitella sen näin:

Arvoon "Lisa" viittaaminen:

var lisa = perheArray; console.log(lisa); // näyttää "Lisa"

Tätä voidaan jatkaa lähes loputtomiin, jolloin voit tallentaa sisäkkäisiä tietojoukkoja taulukoihin ja käyttää niitä indeksien avulla.

Elementtien lisääminen taulukkoon

Selvitimme, kuinka päästään taulukon elementteihin käyttämällä niitä vastaavia indeksejä. Samalla tavalla voit lisätä (tai muuttaa) elementtejä ilmoittamalla esimerkiksi:

var myArray = ["Kate", "Aurinko"]; myArray = "Julia"; console.log(myArray); // Tulostaa "Kate, Sun, Juliet"

Mitä tapahtuu, jos ilmoitan elementin indeksillä, jonka edessä ei ole muita elementtejä? Taulukko itse luo kaikki puuttuvat elementit ja antaa niille arvon undefined:

var myArray = ["Kate", "Aurinko"]; myArray = "Julia"; console.log(myArray.length); // Tulostaa "6" console.log(myArray); // Tulostaa ["Kate", "Sung", undefined, undefined, undefined, "Juliet"]

Voit selvittää js-taulukon pituuden käyttämällä pituus-ominaisuutta. Yllä olevassa esimerkissä taulukossa on kuusi elementtiä, joista kolmelle ei ole annettu arvoa - ne on merkitty määrittelemättömiksi .

push() -menetelmä

Push()-menetelmällä voit lisätä yhden tai useamman elementin js-taulukkoon. Push() hyväksyy rajattoman määrän parametreja, jotka kaikki lisätään taulukon loppuun.

var myArray = ["Kate", "Sut"]; myArray.push("Julia"); // Lisää elementin "Juliet" taulukon loppuun myArray.push("Libby", "Shannon" // Lisää elementit "Libby" ja "Shannon" taulukon loppuun console.log(myaArray); ); // Tulostaa ["Kate", "Soon", "Juliet", "Libby", "Shannon"]

unshift()-menetelmä

Unshift()-menetelmä toimii samalla tavalla kuin push(), paitsi että se lisää elementtejä taulukon alkuun.

var myArray = ["Kate", "Aurinko"]; myArray.unshift("Julia"); // Lisää elementin "Juliet" taulukon alkuun myArray.unshift("Libby", "Shannon"); // Lisää elementit "Libby" ja "Shannon" taulukon alkuun console.log(myArray); // Tulosteet ["Libby", "Shannon", "Juliet", "Kate", "Pian"]

Array Elementtien poistaminen

pop()- ja shift()-menetelmiä

Pop()- ja shift()-menetelmät poistavat taulukon viimeisen ja ensimmäisen elementin, vastaavasti:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; myArray.pop(); // Poistaa "Kate"-elementin myArray.shift(); // Poistaa "Jack"-elementin console.log(myArray); // Tulostaa ["Sawyer", "John", "Desmond"]

splice() -menetelmä

Splice()-menetelmällä voit poistaa tai lisätä elementtejä taulukkoon määrittäen samalla tarkasti elementtien indeksin.

Seuraavassa esimerkissä splice()-menetelmä lisää kaksi elementtiä alkaen indeksistä 2 ( eli kolmannesta elementistä):

var fruitArray = ["omena", "persikka", "appelsiini", "sitruuna", "lime", "kirsikka"]; hedelmäArray.splice(2, 0, "meloni", "banaani"); console.log(fruitArray); // Tulokset ["omena", "persikka", "meloni", "banaani", "appelsiini", "sitruuna", "lime", "kirsikka"]

Splice()-menetelmän ensimmäinen parametri on indeksi. Se osoittaa, mihin kohtaan elementtejä tulee lisätä/poistaa. Esimerkissämme valitsimme indeksin 2 ( tarkoittaa "oranssia").

Toinen parametri on poistettavien elementtien määrä. Määritimme arvon 0, joten mitään ei poisteta.

Seuraavat parametrit ovat valinnaisia. Ne lisäävät taulukkoon uusia arvoja. Meidän tapauksessamme meidän on lisättävä "meloni" ja "banaani" alkaen indeksistä 2.