Silmukka js-jälkiehdon kanssa. Kuinka for-silmukka toimii
Kierto on ohjausohje, jonka avulla voit toistaa ohjelmakoodin suorituksen tietyn määrän kertoja. Jokaista yksittäistä käskyjen suorittamista silmukan rungossa kutsutaan iteraatioksi.
kun silmukka
Vaikka silmukan syntaksi:
Suluissa olevaa lauseketta kutsutaan täyttymisen ehto sykli tai lyhytaikainen kunto. Ensin lasketaan lausekkeen arvo. Tuloksena oleva arvo muunnetaan implisiittisesti Boolen tyypiksi tarvittaessa. Jos lausekkeen arvioinnin tulos on tosi, suoritetaan silmukan rungossa oleva käsky, jonka jälkeen ohjaus siirretään silmukan alkuun ja ehto arvioidaan uudelleen. Jos lausekkeen arvioinnin tulos on arvo väärä, tulkki päättää silmukan ja jatkaa silmukkaa seuraavan käskyn suorittamista. Siten tulkki suorittaa silmukan rungossa olevan koodin yhä uudelleen ja uudelleen niin kauan kuin ehto pysyy tosi:
Var i = 0; sillä aikaa kun minä< 3) { // Выполнять код, пока значение переменной i меньше 3 alert("i: " + i); i++; // Увеличиваем значение переменной i }
do-while -silmukka
Syntaksi do-while -silmukka:
Do-while-silmukka on samanlainen kuin kun silmukka, paitsi että silmukan suoritusehto tarkistetaan ensimmäisen iteraation jälkeen eikä ennen sitä, ja silmukka päättyy puolipisteeseen. Koska ehto tarkistetaan iteroinnin jälkeen, do-while-silmukan rungossa oleva koodi suoritetaan aina vähintään kerran:
Muuttujien määrä = 0; do ( document.write(count + " "); count++; ) while(count< 5); Попробовать »
Tämä sykli voi olla hyödyllinen, kun silmukan rungossa oleva koodi on suoritettava vähintään kerran suoritusehdoista riippumatta.
silmukalle
Silmukan syntaksi:
For-silmukka sisältää kolme puolipisteillä erotettua lauseketta. Näillä kolmella lausekkeella on seuraava suoritusjärjestys:
- Ensimmäinen lauseke arvioidaan aina vain kerran - ennen ensimmäistä iteraatiota. Siksi yleensä ensimmäinen lauseke on sellaisen muuttujan määritelmä, jota käytetään silmukan suoritusehdoissa laskurina.
- Toinen lauseke määrittelee ehdon silmukan suorittamiselle. Se lasketaan ennen jokaista iteraatiota ja määrittää, suoritetaanko silmukan runko. Jos lausekkeen arvioinnin tulos on tosi, ohjelmakoodi suoritetaan silmukan rungossa. Jos palautetaan false, silmukka päättyy ja ohjaus siirtyy silmukan jälkeiseen käskyyn. Jos ehto tarkistetaan ensimmäisen kerran, se osoittautuu epätosi, silmukan rungossa olevaa koodia ei suoriteta edes kerran.
- Jokaisen iteraation jälkeen kolmas lauseke arvioidaan. Tyypillisesti sitä käytetään muuttujan arvon muuttamiseksi, jota käytetään silmukan tilan testaamiseen.
Esimerkki silmukalle:
For (muut count = 0; count< 5; count++) document.write(count + " "); Попробовать »
Kuten esimerkistä näkyy, for-silmukka, toisin kuin muut silmukat, mahdollistaa silmukkaan liittyvän koodin ryhmittelyn yhteen paikkaan.
Mikä tahansa for-silmukan lausekkeista voi puuttua, mutta itse puolipisteiden on oltava läsnä, muuten tulee syntaksivirhe. Jos toinen lauseke puuttuu, silmukka jatkuu ikuisesti.
Var i = 0; for(;i< 4; i++) ... var i = 0; for (; i < 4;) ... for (var i = 1; /* нет условия */ ; i++) ... // Это эквивалентно следующему коду for (var i = 1; true; i++) ...
Yhden lausekkeen sijasta voit määrittää useita lausekkeita erottamalla ne pilkulla.
// ei suoriteta, koska ehdontarkistuksen viimeinen lauseke on epätosi arvolle (i = 1; i< 4, false; i++) ...
for (var i = 1, j = 5; i <= 5; i++, j--)
document.write(i + " " + j +"
"); Yrittää "
for-in silmukka
For-in-silmukkaa käytetään objektin lueteltujen ominaisuuksien iterointiin satunnaisessa järjestyksessä, ja sillä on seuraava syntaksi:
For (muuttuja objektissa) -lause;
Avainsanan vasemmalla puolella on muuttujan nimi, jolle annetaan merkkijonona objektin yhden ominaisuuden nimi ennen silmukan jokaisen iteraation alkua. In-avainsanan oikealla puolella on objekti, jonka ominaisuuksia iteroidaan silmukan läpi. Silmukka jatkuu, kunnes kaikki käytettävissä olevat ominaisuudet on iteroitu. Jos objektia edustava muuttuja on nolla tai määrittelemätön, silmukkaa ei suoriteta edes kerran:
Var obj = (x: 5, y: 10); for (var prop in obj) ( alert(prop); )
Jos haluat pitää silmukkaan liittyvän koodin yhdessä paikassa, voit ilmoittaa muuttujan for-in-silmukassa. Siksi ilmaisuna ennen avainsana in on yleensä ilmoitus muuttujasta, jolle ominaisuuksien nimet annetaan.
JavaScriptin päätarkoitus on ajaa toistuvasti tietty koodinpätkä, yhä uudelleen ja uudelleen. Se on hyvin samanlainen kuin for-silmukka yhdellä tärkeällä erolla. Anna minun käyttää vähän aikaasi selittääkseni näiden kahden syklin välisen eron.
Mitä eroa on while- ja for-silmukoilla?
Ero näiden silmukoiden välillä on se, kuinka ne lopettavat koodinpalan suorittamisen.
For-silmukka suorittaa tietyn määrän iteraatioita. Tiedämme tarkalleen kuinka monta kertaa silmukka suorittaa sen rungossa olevan koodinpätkän.
Sillä välin kaikki tapahtuu toisin. JavaScript while -silmukka toimii niin kauan kuin tietty ehto on tosi. Kun ehdon arvo on epätosi, while-silmukka päättyy.
Syy, miksi nämä syklit ovat erilaisia, on se, että emme välttämättä tiedä etukäteen, milloin annettu ehto lopettaa suorittamisen. Siksi emme voi ennustaa, kuinka monta iteraatiota while-silmukassa suoritetaan ennen kuin se katkeaa.
While-silmukan plussat ja miinukset
Aloitan tarkastelemalla while-silmukan ainoaa merkittävää haittapuolta. Se voi toimia ikuisesti!
Jos huomaat olevasi tilanteessa, jossa while-silmukka jatkaa suorittamista loputtomiin, ohjelmasi juuttuu (tai jumittuu). Sitten sinun on suljettava selain keskeyttääksesi JavaScript-koodin suorittamisen.
Huomaa, että JavaScript on hallitsematon while-silmukka ei yleensä toimi ikuisesti. Koska ohjelmoijana meillä on aina velvollisuus varmistaa, että jossain vaiheessa while-silmukamme tila muuttuu vääräksi.
Nyt mitä tulee "etuihin" - ne ovat hyvin ilmeisiä. While toimii jatkuvasti niin kauan kuin ehto täyttyy. Esimerkki while-silmukan käytöstä on pyytää käyttäjää syöttämään tietoja. Silmukka kehottaa syöttämään tietoja uudestaan ja uudestaan, kunnes käyttäjä syöttää oikeat tiedot.
Vaikka silmukan syntaksi
For- ja while-silmukoiden syntaksi on hyvin samanlainen.
Sinun on käytettävä while-avainsanaa ja määritettävä myös ehto, jossa silmukka suoritetaan. Kuten muutkin ohjausrakenteet, while-silmukka määrittää sen laajuuden.
Tältä koodin pitäisi näyttää:
while () ( // lisää tähän koodi, joka tulee suorittaa silmukassa)
Vaikein osa on määrittää, mitkä olosuhteet tai olosuhteet on asetettava silmukalle, jotta se toimisi kunnolla.
Muista, että niin kauan kuin ehto on totta, silmukka jatkuu. Katsotaanpa esimerkkiä JavaScriptin käyttämisestä.
Esimerkki while-silmukasta
Oletetaan, että haluamme pyytää käyttäjää syöttämään numeron väliltä 1–10. Mutta mitä tapahtuu, jos hän syöttää väärän numeron?
Tässä tapauksessa meidän on pyydettävä häntä syöttämään arvo uudelleen ja tarkistamaan, täyttyykö ehto ( syötetäänkö numero väliltä 1-10).
Tämä on tapaus, jossa for-silmukka epäonnistuu surkeasti. Koska emme voi tietää etukäteen, kuinka monta kertaa meidän on pyydettävä käyttäjää syöttämään oikea numero. Tässä tapauksessa while-silmukka tulee avuksemme.
Tältä koodimme saattaa näyttää:
var theNumber = prompt("Anna numero väliltä 1-10."); while (TheNumber< 1 || theNumber >10 || isNaN(theNumber)) ( theNumber = prompt("Virheellinen arvo, syötä numero väliltä 1 - 10!"); ) alert("Erinomainen! Annoit numeron: " + theNumber);
On syytä huomata, että yllä olevassa esimerkissä käytämme kolmea yksilölliset olosuhteet JavaScript while -silmukassa.
Nämä kolme ehtoa ovat: numero 10 || isNaN(luku). Ne osoittavat seuraavaa:
- JOS Numero on pienempi kuin 1, TAI;
- JOS Luku on suurempi kuin 10, TAI;
- JOS numero EI ole numero, jatka silmukkaa.
Koska käytämme OR-operaattoria (||) kaikkien ehtojen välillä, tämä tarkoittaa, että jos jokin ehdoista on tosi, yleiskunto while-silmukan arvo on tosi ja silmukka jatkaa suorittamista.
Vain jos kaikki kolme ehtoa arvioivat epätosi, while-silmukan yleisehto arvoutuu epätosi ja se pysähtyy.
Johtopäätös
JavaScript while-silmukka on ainoa todellinen silmukka ohjelmointikielissä. for on vain erityinen muunnelma while-silmukasta.
Tässä tapauksessa voit luoda for-silmukan itse käyttämällä while-silmukan syntaksia, katsoa ja oppia:
var laskuri = 0; while (laskuri< 10) { counter = counter + 1; console.log("The counter is currently at: " + counter); }
Koodi toistetaan täsmälleen 10 kertaa, ei enempää eikä vähempää. Juuri näin for-silmukka toimii.
JavaScriptin käyttöä ei tarvitse pelätä . Koska ilman sitä monet sovellukset eivät yksinkertaisesti toimisi kunnolla!
Toivottavasti pidit tästä artikkelista.
Artikkelin "While Loop in JavaScript" käännöksen on valmistellut ystävällinen projektitiimi.
Hyvä huono
Tätä sisennystä voidaan pitää koodin monimutkaisuuden indikaattorina (vaikkakin melko karkeana). Itse sisennykset ovat neutraaleja, koska ne ovat vain väline tekstin muotoiluun, mutta pointti on, että niitä käytetään korostamaan erityisiä ohjelmien lohkoja, esimerkiksi ohjausrakenteita. Lukeessaan koodia ja kohtaaessaan sisennyksen ohjelmoijan on pakko ottaa huomioon, mitä sisennys tarkoittaa, pitää mielessä konteksti, jossa valittu lohko on olemassa. Tämä luonnollisesti toistuu, jos koodin sisennettyyn osaan ilmestyy toinen erityinen fragmentti.
Jos et kiinnitä huomiota tekstien sisältöön, tältä yleensä näyttää monimutkainen koodi, jonka osat näyttävät kyljellään olevilta kirjaimista "V" ja yksinkertainen koodi, jonka lohko, jos niin ei ota huomioon eri pituuksia viivoja, näyttää suorakulmiolta.
Mitä enemmän sisennyksiä, sitä monimutkaisempi koodi yleensä on.
Konstruktit, jotka on sisennettävä, ovat aina koodissa, niistä ei puhuta kokonaan eroon. Meillä on kuitenkin valta vähentää kirjoittamiemme ohjelmien monimutkaisuutta valitsemalla rationaalisesti abstraktioita kohtaamiemme ongelmien ratkaisemiseksi.
Otetaan esimerkiksi taulukot. Perinteisesti ne käsitellään käyttäen erilaisia syklit. Käsitteet "taulukko" ja "silmukka" liittyvät erottamattomasti monien ohjelmoijien mieliin. Sykli on kuitenkin hyvin moniselitteinen rakennelma. Näin Louis Atentzio kirjoittaa silmukoista kirjassaan "Functional Programming in JavaScript": "Silmukka on jäykkä ohjausrakenne, jota ei ole helppo käyttää uudelleen ja vaikea integroida muihin toimintoihin. Lisäksi silmukoiden käyttäminen tarkoittaa koodin luomista, joka muuttuu jokaisen iteroinnin yhteydessä."
Onko mahdollista päästä eroon kiertokuluista?
Kierto on yksi tärkeimmistä rakenteellisista ohjausrakenteista, emmekä itse asiassa aio sanoa, että syklit ovat paha, josta on päästävä eroon. Päätavoitteemme on vähentää oman koodimme monimutkaisuutta minimaalista käyttöä silmukoita käsiteltäessä taulukoita. Onko se mahdollista? Kutsumme sinut ottamaan selvää yhdessä.
Pyörät
Olemme jo puhuneet siitä, kuinka ohjausrakenteet, kuten silmukat, lisäävät koodiasi monimutkaisuutta. Mutta miksi näin on? Katsotaanpa, miten silmukat toimivat JavaScriptissä.JS:ssä on useita tapoja järjestää silmukoita. Erityisesti yksi silmukoiden perustyypeistä on while . Ennen kuin syvennymme yksityiskohtiin, valmistaudutaan hieman. Nimittäin luomme funktion ja taulukon, joiden kanssa työskentelemme.
// oodlify:: String -> Merkkijonofunktio oodlify(s) ( return s.replace(//g, "oodle"); ) const input = [ "John", "Paul", "George", "Ringo", ];
Joten meillä on taulukko, jonka jokaisen elementin aiomme käsitellä oodlify-funktiolla. Jos käytät while-silmukkaa tämän ongelman ratkaisemiseen, saat seuraavan:
Olkoon i = 0; const len = input.length; anna lähtö = ; sillä aikaa kun minä< len) {
let item = input[i];
let newItem = oodlify(item);
output.push(newItem);
i = i + 1;
}
Huomaa, että käytämme i-laskuria seurataksemme parhaillaan käsiteltyä taulukkoelementtiä. Se on alustettava nollaan ja sitä on lisättävä yhdellä silmukan jokaisessa iteraatiossa. Lisäksi sinun on verrattava sitä taulukon pituuteen lenin kanssa, jotta tiedät, milloin lopettaa työskentely.
Tämä malli on niin yleinen, että JavaScriptillä on helpompi tapa tehdä tämä: for-silmukka. Tällainen silmukka ratkaisee saman ongelman seuraavasti:
Const len = input.length; anna lähtö = ; for (olkoon i = 0; i< len; i = i + 1) {
let item = input[i];
let newItem = oodlify(item);
output.push(newItem);
}
For-silmukka on hyödyllinen rakennelma, koska se sijoittaa kaikki tavalliset lisälaskurin toiminnot yläosa lohko. Kun käytetään while -näppäintä, on helppo unohtaa tarve kasvattaa laskuria i, mikä aiheuttaa loputon silmukka. For-silmukka on ehdottomasti paljon kätevämpi kuin while-silmukka. Mutta hidastetaan ja katsotaan, mitä koodimme yrittää saavuttaa. Haluamme käsitellä oodlify()-funktiolla taulukon jokaisen elementin ja sijoittaa tuloksen siihen uusi joukko. Itse laskuri, jota käytetään taulukon elementtien käyttämiseen, ei kiinnosta meitä.
Tämä taulukoiden kanssa työskentelymalli, jossa kullekin elementille suoritetaan tiettyjä toimintoja, on hyvin yleinen. Tämän seurauksena ES2015 esiteltiin uusi muotoilu silmukka, jonka avulla voit unohtaa laskurin. Tämä on for…-silmukka. Jokainen sellaisen silmukan iteraatio tarjoaa seuraava elementti joukko. Se näyttää tältä:
Olkoon tulos = ; for (anna item of input) ( anna newItem = oodlify(tuote); output.push(newItem); )
Koodi näyttää paljon puhtaammalta. Huomaa, että laskuria tai vertailutoimintoa ei ole. Tällä lähestymistavalla sinun ei tarvitse edes ottaa yhteyttä tietty elementti taulukko indeksin mukaan. For…of-silmukka hoitaa kaikki aputoiminnot.
Jos saamme päätökseen tutkimuksen tavoista työskennellä taulukoiden kanssa ja käyttää for…of silmukoita kaikkialla silmukoiden sijaan, tämä on jo hyvä askel eteenpäin yksinkertaistamalla koodia. Mutta... voimme mennä pidemmälle.
Taulukkojen muuntaminen
For...of-silmukka näyttää paljon siistimmältä kuin for-silmukka, mutta siinä on myös paljon apuelementtejä koodissa. Joten sinun on alustettava tulostaulukko ja kutsuttava push()-menetelmää silmukan jokaisessa iteraatiossa. Koodia voidaan tehdä vieläkin kompaktimmaksi ja ilmeisemmäksi, mutta ennen kuin teemme sen, laajennetaan hieman demo-ongelmaa. Entä jos sinun on käsiteltävä kaksi taulukkoa oodlify()-funktiolla?Const fellowship = [ "frodo", "sam", "gandalf", "aragorn", "boromir", "legolas", "gimli", ]; const band = [ "John", "Paul", "George", "Ringo", ];
Täysin ilmeinen ratkaisu on käyttää kahta silmukkaa ja käsitellä niissä olevia taulukoita:
Olkoon bandoodle = ; for (let item of band) ( anna newItem = oodlify(tuote); bandoodle.push(newItem); ) anna floodleship = ; for (let item of Fellowship) ( anna newItem = oodlify(tuote); floodleship.push(newItem); )
Ihan toimiva vaihtoehto. Ja toimiva koodi on paljon parempi kuin koodi, joka ei ratkaise sille osoitettua ongelmaa. Mutta kaksi hyvin samanlaista koodinpalaa eivät sovi erityisen hyvin DRY-ohjelmiston suunnitteluperiaatteeseen. Koodi voidaan muuttaa toiston vähentämiseksi.
Tämän idean mukaisesti luomme seuraavan funktion:
Funktio oodlifyArray(input) ( anna output = ; for (anna input item) ( anna newItem = oodlify(tuote); output.push(newItem); ) palauttaa ulostulon; ) anna bandoodle = oodlifyArray(band); anna floodleship = oodlifyArray(fellowship);
Tämä näyttää paljon paremmalta, mutta entä jos on toinen funktio, jolla haluamme myös käsitellä taulukkoelementtejä?
Funktio izzlify(s) ( return s.replace(/+/g, "izzle"); )
Nyt oodlifyArray()-funktio ei auta. Jos kuitenkin luot toisen samanlainen toiminto, tällä kertaa – izzlufyArray() , toistamme itseämme uudelleen. Luodaan kuitenkin tällainen funktio ja verrataan sitä oodlifyArray() -funktioon:
Funktio oodlifyArray(input) ( anna output = ; for (anna input item) ( anna newItem = oodlify(item); output.push(newItem); ) palauttaa ulostulon; ) function izzlifyArray(input) ( anna output = ; for ( anna item of input) ( anna newItem = izzlify(tuote); output.push(newItem); ) palauttaa tulosteen;
Nämä kaksi toimintoa ovat uskomattoman samanlaisia. Ehkä voimme tiivistää niiden noudattaman kaavan? Tavoitteemme on tämä: ”Meillä on taulukko ja funktio. Meidän on hankittava uusi taulukko, johon kirjoitetaan alkuperäisen taulukon jokaisen elementin käsittelyn tulokset funktiolla." Samanlainen menetelmä Taulukon käsittelyä kutsutaan "mappingiksi" tai "muunnokseksi" (englanninkielisessä terminologiassa mapping). Tällaisia toimintoja suorittavia toimintoja kutsutaan yleensä "kartaksi". Tältä näyttää meidän versiomme tällaisesta funktiosta:
Funktiokartta(f, a) ( anna lähtö = ; for (anna kohteen a) ( output.push(f(item)); ) palauttaa ulostulon; )
Vaikka silmukka on nyt erillinen toiminto, siitä ei ollut mahdollista päästä kokonaan eroon. Jos ajat loppuun asti ja yrität pärjätä ilman sykliset rakenteet, voit kirjoittaa samasta asiasta rekursiivisen version:
Funktiokartta(f, a) ( if (a.length === 0) ( return ; ) return .concat(map(f, a.slice(1))); )
Rekursiivinen ratkaisu näyttää erittäin tyylikkäältä. Vain pari riviä koodia ja pieni sisennys. Mutta algoritmien rekursiivisia toteutuksia käytetään yleensä erittäin varoen, ja ne myös eroavat toisistaan huono esitys vanhemmissa selaimissa. Ja itse asiassa meidän ei todellakaan tarvitse kirjoittaa funktiota kartoitustoiminnon toteuttamiseksi itse, ellei siihen ole hyvää syytä. Karttatoimintomme tekee niin yleisen tehtävän, että JavaScriptissä on sisäänrakennettu map()-menetelmä. Jos käytät tätä menetelmää, koodi näyttää tältä:
Olkoon bandoodle = band.map(oodlify); anna floodleship = fellowship.map(oodlify); anna bandizzle = band.map(izzlify); anna fellowship = fellowship.map(izzlify);
Huomaa, että siinä ei ole lainkaan sisennystä tai silmukkaa. Tietenkin, kun tietoja käsitellään jossain JavaScriptin syvyyksissä, silmukoita voidaan käyttää, mutta tämä ei ole enää meidän huolemme. Nyt koodi on sekä ytimekäs että ilmeikäs. Lisäksi se on yksinkertaisempi.
Miksi tämä koodi on yksinkertaisempi? Tämä voi tuntua tyhmältä kysymykseltä, mutta mieti sitä. Onko se yksinkertaisempi, koska se on lyhyempi? Ei. Kompakti koodi ei ole merkki yksinkertaisuudesta. Se on yksinkertaisempaa, koska tällä lähestymistavalla olemme jakaneet ongelman osiin. Nimittäin on olemassa kaksi funktiota, jotka toimivat merkkijonojen kanssa: oodlify ja izzlify. Näiden funktioiden ei tarvitse tietää mitään taulukoista tai silmukoista. On toinen toiminto - kartta, joka toimii taulukoiden kanssa. Samalla on täysin välinpitämätöntä, minkä tyyppistä dataa taulukossa on tai mitä haluamme tällä tiedolla tehdä. Se yksinkertaisesti suorittaa minkä tahansa sille välitetyn toiminnon ja välittää sille taulukon elementit. Sen sijaan, että olisimme sekoittaneet kaiken, erotimme merkkijonokäsittelyn ja taulukkokäsittelyn. Siksi lopullinen koodi osoittautui yksinkertaisemmiksi.
Taulukon konvoluutio
Joten karttatoiminto on erittäin hyödyllinen, mutta se ei kata kaikkia silmukoita käyttäviä taulukonkäsittelyvaihtoehtoja. Se on hyvä tapauksissa, joissa tietyn taulukon perusteella sinun on luotava uusi samanpituinen. Mutta entä jos meidän on esimerkiksi laskettava yhteen kaikki numeerisen taulukon elementit? Tai entä jos sinun on löydettävä luettelosta lyhin merkkijono? Joskus sinun täytyy käsitellä taulukko ja itse asiassa luoda yksi arvo sen perusteella.Katsotaanpa esimerkkiä. Oletetaan, että meillä on luettelo esineistä, joista jokainen edustaa supersankaria:
Const Heroes = [ (nimi: "Hulk", vahvuus: 90 000), (nimi: "Spider-Man", vahvuus: 25 000), (nimi: "Haukkasilmä", vahvuus: 136), (nimi: "Thor", vahvuus: 100000), (nimi: "Black Widow", vahvuus: 136), (nimi: "Vision", vahvuus: 5000), (nimi: "Scarlet Witch", vahvuus: 60), (nimi: "Mystique", vahvuus: 120), (nimi: "Namora", vahvuus: 75000), ];
Meidän on löydettävä vahvin sankari. Voit tehdä tämän käyttämällä for…of-silmukkaa:
Olkoon vahvin = (voimakkuus: 0); for (anna sankarien sankari) ( if (sankari.voima > vahvin.voima) ( vahvin = sankari; ) )
Kaiken kaikkiaan tämä koodi ei ole niin huono. Kierrämme taulukon läpi tallentamalla vahvimman katsomamme sankarin kohteen vahvimpaan muuttujaan. Jotta voisimme nähdä taulukon kanssa työskentelymallin selkeämmin, kuvitellaan, että meidän on myös selvitettävä kaikkien sankarien kokonaisvoimakkuus.
Olkoon yhdistettyvoimakkuus = 0; for (anna sankarien sankari) ( yhdistettyVoima += sankari.voima; )
Kummassakin näistä kahdesta esimerkistä on työmuuttuja, joka alustetaan ennen silmukan alkamista. Sitten jokaisessa iteraatiossa yksi taulukon elementti käsitellään ja muuttuja päivitetään. Työkaavion korostamiseksi vielä paremmin siirrämme silmukoiden sisällä suoritettavat toiminnot funktioiksi ja nimeämme muuttujat uudelleen korostaen suoritettujen toimintojen samankaltaisuutta.
Funktio suurempiStrength(mestari, haastaja) ( paluu (kilpailija.voima > mestari.voima) ? kilpailija: mestari; ) funktio addStrength(tally, hero) (paluu yhteenlaskettu + sankari.voima; ) const kezdetVahvain = (voima: 0); anna työskennellä = alkuperäinen Vahvin; for (sankarien sankari) ( työ = suurempi Voima(työ, sankari); ) const vahvin = toimii; const inicialCombinedStrength = 0; työ = alkuperäinenCombinedStrength; for (sankarien sankari) ( työ = addStrength(työ, sankari); ) const combinedVoima = toimii;
Jos kaikki kirjoitetaan uudelleen yllä olevan kuvan mukaisesti, kaksi silmukkaa ovat lopulta hyvin samanlaisia. Ainoa asia, joka erottaa ne, ovat niissä kutsutut funktiot ja muuttujien alkuarvot. Molemmissa silmukoissa matriisi kutistetaan yhteen arvoon. Englanninkielisessä terminologiassa tällaista toimintoa kutsutaan "reducingiksi". Siksi luomme vähennysfunktion, joka toteuttaa löydetyn kuvion.
Funktio vähentää(f, aloitusVal, a) ( anna työskennellä = aloitusVal; for (anna kohteen a) ( toimiva = f(työ, tuote); ) palaa töihin; )
On syytä huomata, että kuten karttafunktiokuvion kohdalla, redusointifunktiokuvio on niin laajalle levinnyt, että JavaScript tarjoaa sen sisäänrakennettuna taulukkomenetelmänä. Siksi omaa menetelmää ei tarvitse kirjoittaa, ellei siihen ole erityistä syytä. Käyttämällä standardi menetelmä koodi näyttää tältä:
Const vahvinSankari = sankarit.reduce(suurempiVoima, (voima: 0)); const combinedStrength = sankarit.reduce(addStrength, 0);
Jos tarkastelet lopputulosta tarkemmin, huomaat, että tuloksena oleva koodi ei ole paljon lyhyempi kuin mitä oli aiemmin, säästöt ovat hyvin pieniä. Jos olisimme käyttäneet itse kirjoittamaa vähennystoimintoa, koodi olisi yleensä ollut suurempi. Tavoitteemme ei kuitenkaan ole kirjoittaa lyhyt koodi, mutta sen monimutkaisuuden vähentämiseksi. Olemmeko siis vähentäneet ohjelman monimutkaisuutta? Voin sanoa, että he ovat vähentäneet sitä. Olemme erottaneet silmukkakoodin taulukkoelementtejä käsittelevästä koodista. Tuloksena erilliset alueet ohjelmat ovat tulleet itsenäisemmiksi. Koodi osoittautui yksinkertaisemmiksi.
Ensi silmäyksellä vähennystoiminto saattaa vaikuttaa varsin primitiiviseltä. Useimmat esimerkit tästä funktiosta osoittavat yksinkertaisia asioita, kuten kaikkien elementtien lisäämisen numeeriset taulukot. Missään ei kuitenkaan sanota, että tuottoa vähentävän arvon on oltava primitiivinen tyyppi. Se voi olla objekti tai jopa toinen ryhmä. Kun tajusin tämän ensimmäisen kerran, se hämmästytti minua. Voit esimerkiksi kirjoittaa taulukon kartoitus- tai suodatusoperaation toteutuksen käyttämällä vähennystoimintoa. Suosittelen kokeilemaan itse.
Suodatustaulukot
Joten on karttatoiminto, joka suorittaa toimintoja taulukon jokaiselle elementille. On vähennystoiminto, jonka avulla voit pakata taulukon yhdeksi arvoksi. Mutta entä jos sinun tarvitsee vain poimia taulukon elementtejä? Tämän idean tutkimiseksi laajennetaan supersankariluetteloa ja lisätään siihen joitain lisätietoja:Const heroes = [ (nimi: "Hulk", vahvuus: 90000, sukupuoli: "m"), (nimi: "Spider-Man", vahvuus: 25000, sukupuoli: "m"), (nimi: "Hawk Eye", vahvuus: 136, sukupuoli: "m"), (nimi: "Thor", vahvuus: 100000, sukupuoli: "m"), (nimi: "Black Widow", vahvuus: 136, sukupuoli: "f"), (nimi) : "Vision", vahvuus: 5000, sukupuoli: "m"), (nimi: "Scarlet Witch", vahvuus: 60, sukupuoli: "f"), (nimi: "Mystique", vahvuus: 120, sukupuoli: "f" "), (nimi: "Namora", vahvuus: 75000, sukupuoli: "f"), ]);
Oletetaan nyt kaksi ongelmaa:
- Etsi kaikki naissankarit.
- Etsi kaikki sankarit, joiden voima on yli 500.
Olkoon naissankarit = ; for (anna sankarien sankari) ( if (sankari.sukupuoli === "f") ( female Heroes.push(hero); ) ) olkoon superihmiset = ; for (anna sankarien sankari) ( if (hero.strength >= 500) ( superhumans.push(hero); ) )
Yleisesti ottaen se näyttää varsin pätevältä. Mutta tässä toistuva kuvio näkyy paljaalla silmällä. Itse asiassa silmukat ovat täsmälleen samat, ne eroavat vain if-lohkoista. Mitä jos laittaisimme nämä lohkot funktioiksi?
Funktio onFemaleSankari(sankari) ( paluu (sankari.sukupuoli === "f"); ) funktio onSuper-ihminen(sankari) (paluu (sankari.voimakkuus >= 500); ) anna naissankarit = ; for (anna sankarien sankari) ( if (on Naissankari(sankari)) ( naissankarit.push(sankari); ) ) olkoon superihmiset = ; for (anna sankarien sankari) ( if (isSuperhuman(hero)) ( superhumans.push(hero); ) )
Funktioita, jotka palauttavat vain tosi tai epätosi, kutsutaan joskus predikaateiksi. Käytämme predikaattia päättääksemme, tallennetaanko heroes-taulukon seuraava arvo uuteen taulukkoon.
Tapa, jolla kirjoitimme koodin uudelleen, teki siitä pidemmän. Mutta predikaattifunktioiden korostamisen jälkeen ohjelman toistuvat osat tulivat paremmin näkyviin. Luodaan funktio, jonka avulla pääsemme eroon näistä toistoista:
Funktiosuodatin(predikaatti, arr) ( anna työskennellä = ; for (anna arr) ( if (predikaatti(tuote)) ( toimii = work.concat(item); ) ) palaa töihin; ) const femaleHeroes = suodatin(onFemaleSankari, sankarit); const superhumans = suodatin(onSuper-ihminen, sankarit);
Täällä, kuten sisäänrakennettujen kartta- ja vähennystoimintojen tapauksessa, JavaScriptillä on sama asia, jonka kirjoitimme tänne tavallisen suodatusmenetelmän muodossa Array-objekti. Siksi omaa funktiota ei tarvitse kirjoittaa, ellei se ole selvästi välttämätöntä. Käyttämällä standardi tarkoittaa koodi näyttää tältä:
Const naissankarit = sankarit.filter(on Naissankari); const superhumans = sankarit.filter(isSuperhuman);
Miksi tämä lähestymistapa on niin paljon parempi kuin for… of-silmukan käyttäminen? Mieti, kuinka voit käyttää tätä käytännössä. Meillä on tehtävä kuten: "Etsi kaikki sankarit, jotka...". Kun ymmärrät, että voit ratkaista ongelman käyttämällä vakiosuodatintoimintoa, työstä tulee helpompaa. Meidän tarvitsee vain kertoa tälle funktiolle, mistä elementeistä olemme kiinnostuneita. Tämä tehdään kirjoittamalla yksi kompakti funktio. Sinun ei tarvitse huolehtia taulukoiden tai lisämuuttujien käsittelystä. Sen sijaan kirjoitamme pienen predikaattifunktion ja ongelma on ratkaistu.
Ja kuten muissakin taulukoissa toimivissa funktioissa, suodattimen avulla voit ilmaista lisää tietoa pienemmällä koodilla. Ei tarvitse lukea koko juttua vakiokoodi silmukan ymmärtääksemme, mitä tarkalleen suodatamme. Sen sijaan kaikki, mitä sinun tulee ymmärtää, kuvataan heti, kun menetelmää kutsutaan.
Hae taulukoista
Suodatus on erittäin hyödyllinen toimenpide. Mutta entä jos sinun tarvitsee löytää vain yksi supersankari luettelosta? Oletetaan, että olemme kiinnostuneita Black Widowista. Suodatintoimintoa voidaan käyttää tämän ongelman ratkaisemiseen:Funktio isBlackWidow(sankari) ( return (sankari.nimi === "Musta leski"); ) const mustaLeski = sankarit.filter(isBlackWidow);
Suurin ongelma tässä on, että tällainen ratkaisu ei ole tehokas. Suodatusmenetelmä kulkee taulukon jokaisen elementin läpi. Tiedetään kuitenkin, että taulukossa vain yksi sankari on nimeltään Black Widow, mikä tarkoittaa, että voit lopettaa tämän sankarin löytymisen jälkeen. Samalla predikaattifunktiot ovat käteviä käyttää. Siksi kirjoitetaan hakufunktio, joka löytää ja palauttaa ensimmäisen vastaavan elementin:
Funktio find(predikaatti, arr) ( for (anna arr-kohde) ( if (predikaatti(nimike)) (palautusnimike; ) ) ) const blackWidow = find(onBlackWidow, sankarit);
Tässä taas on sanottava, että JavaScriptissä on sisäänrakennettu toiminto, joka tekee juuri sen, mitä tarvitaan:
Const blackWidow = sankarit.find(isBlackWidow);
Tuloksena, kuten ennenkin, pystyimme ilmaisemaan ajatuksemme tiiviimmin. Käyttämällä sisäänrakennettua löytää toimintoja,hakuongelma tietty elementti tulee yhteen kysymykseen: "Millä merkillä voimme määrittää, että haluttu elementti on havaittu?" Sinun ei tarvitse huolehtia yksityiskohdista.
Tietoja vähennys- ja suodatustoiminnoista
Lukijat ovat huomanneet, että ei ole tehokasta iteroida sankariluetteloa kahdesti yllä olevissa esimerkeissä pienennys- ja suodatustoimintojen osalta. ES2015:n levitysoperaattorin avulla voit kätevästi yhdistää kaksi taulukon taittotoimintoa yhdeksi. Tässä on muokattu koodinpätkä, jonka avulla voit toistaa taulukon läpi vain kerran:Function processStrength((voimakkainSankari, yhdistettyVoima), sankari) ( paluu ( vahvempiSankari: suurempiStrength(voimakkainSankari, sankari), yhdistettyVoima: addStrength(combinedStrength, hero), ); ) const (voimakkainSankari, yhdistettyVoima) = sankarit.vähennä(prosessoivoimakkain) : (voima: 0), yhdistetty Voima: 0));
En voi olla huomaamatta, että tämä versio tulee olemaan hieman monimutkaisempi kuin se, jossa matriisi kuljetettiin kahdesti, mutta jos matriisi on valtava, sen ylikulkujen määrän vähentäminen voi olla erittäin hyödyllistä. Joka tapauksessa algoritmin kompleksisuusaste pysyy O(n).
Tulokset
Uskon, että tässä esitetyt toiminnot ovat loistava esimerkki miksi harkiten valitut abstraktiot ovat hyödyllisiä ja näyttävät hyvältä koodissa. Oletetaan, että käytämme sisäänrakennettuja toimintoja aina kun mahdollista. Kussakin tapauksessa seuraavat tulokset:- Pääsemme eroon silmukoista, mikä tekee koodista tiiviimmän ja todennäköisesti helpompi lukea.
- Käytetty malli on kuvattu käyttämällä sopivaa standardimenetelmän nimeä. Toisin sanoen kartoita, vähennä, suodata tai etsi.
- Tehtävän laajuus pienenee. Sen sijaan, että kirjoittaisit koodin käsitelläksesi taulukon itse, sinun on vain kerrottava vakiofunktiolle, mitä tehdä taulukolle.
Itse asiassa, jos ajattelet kaikkea tätä, voit tehdä johtopäätöksen, joka näyttää aluksi yllättävältä. Osoittautuu, että jos käytät vain neljää yllä kuvattua taulukkokäsittelymallia, voit poistaa melkein kaikki silmukat JS-koodistasi. Loppujen lopuksi, mitä melkein jokaisessa JavaScriptissä kirjoitetussa silmukassa tehdään? Se joko käsittelee tai rakentaa tietyn taulukon tai tekee molempia. Lisäksi JS:llä on muita vakiotoimintoja taulukoiden kanssa työskentelemiseen, voit helposti oppia ne itse. Silmukoista eroon pääseminen vähentää lähes aina ohjelmien monimutkaisuutta ja kirjoittaa koodia, joka on helpompi lukea ja ylläpitää.
Hyvät JavaScript-kehittäjät, onko sinulla jotain mielessä? vakio-ominaisuudet, joiden avulla voit parantaa koodia päästämällä eroon joistakin yleisistä "kotikirjoitetuista" rakenteista?
Tunnisteet: Lisää tunnisteita
JavaScript-silmukat tarjota toistuvien laskutoimitusten toistuvan suorittamisen. Ne optimoivat koodin kirjoitusprosessin suorittamalla saman käskyn tai komentolohkon, jotka muodostavat silmukan rungon, annettu numero kertaa (käyttäen laskurimuuttujaa) tai kun määritetty ehto on tosi. Silmukat toistuvat arvosarjan yli. Silmukan suorittamista kerran kutsutaan iterointi.
Silmukan suorituskykyyn vaikuttaa iteraatioiden määrä ja kunkin iteroinnin silmukan rungossa suoritettujen operaatioiden määrä.
Seuraavat silmukkaoperaattorit ovat olemassa JavaScriptissä:
1) for käytetään, kun tiedät etukäteen, kuinka monta kertaa sinun täytyy tehdä jotain;
2) for...in käytetään objektien ominaisuuksien kulkemiseen;
3) while käytetään, kun et tiedä kuinka monta kertaa sinun täytyy tehdä jotain;
4) tehdä...kun taas toimii samalla tavalla operaattori samalla. Se eroaa siinä, että do...saamalla kun se suorittaa lausekkeen aina kiharoissa aaltosulkeissa, mutta vähintään kerran, vaikka kuntotesti palauttaisi epätosi .
Silmukoiden tyypit JavaScriptissä, silmukan ohjaus
1. Silmukalle
For-silmukkaa käytetään taulukoiden elementtien tai taulukon kaltaisten objektien, kuten argumenttien ja HTMLCollectionin, toistamiseen. Ehto tarkistetaan ennen jokaista silmukan iteraatiota. Jos tarkistus onnistuu, suoritetaan silmukan sisällä oleva koodi, muuten silmukan sisällä olevaa koodia ei suoriteta ja ohjelma jatkuu ensimmäiseltä silmukan jälkeiseltä riviltä.
Seuraava silmukka tulostaa rivin Hei, JavaScript! Viisi kertaa.
For (muut i = 0; i< 5; i++) {
console.log(i + ": Hello, JavaScript!");
}
Riisi. 1. Tulos for-silmukan suorittamisesta konsolissa
1.1. Kuinka for-silmukka toimii
For-silmukka koostuu kolmesta eri operaatiosta:
Vaihe 1. alustus var i = 0; — laskurimuuttujan ilmoitus, joka tarkistetaan silmukan suorittamisen aikana. Tämä muuttuja alustetaan arvolla 0. Useimmiten i-, j- ja k-nimiset muuttujat toimivat silmukkalaskureina.
Vaihe 2. kunnon tarkistus i< 5; — ehdollinen lauseke, jos se palauttaa true , silmukan runko (käsky aaltosulkeissa) suoritetaan. SISÄÄN tässä esimerkissä Tilaa tarkistetaan niin kauan kuin laskurin arvo on alle 5.
Vaihe 3. lopullinen operaatio i++ - laskurin lisäystoiminto, lisää arvoa muuttuja var i yksikköä kohti. Lisäystoiminnon sijasta voidaan käyttää myös vähennystoimintoa.
Silmukan lopussa muuttuja var i tallennetaan arvoon 1. Seuraava silmukan iteraatio suoritetaan arvolle (var i = 1; i< 5; i++) { } . Условное выражение вычисляется снова, чтобы проверить, является ли значение счётчика i всё ещё меньше 5 . Если это так, операторы в теле цикла выполняются ещё раз. Завершающая операция снова увеличивает значение переменной на единицу. Шаги 2 и 3 повторяются до тех пор, пока условие i < 5; возвращает true .
1.2. Taulukon arvojen tulostaminen
Jos haluat tulostaa taulukon arvot for-silmukalla, sinun on käytettävä taulukon pituus-ominaisuutta. Tämä auttaa sinua määrittämään taulukon elementtien määrän ja suorittamaan silmukan saman määrän kertoja.
Alla oleva skripti näyttää viisi viestiä värien nimillä:
Var kukat = ["Rose", "Lilja", "tulppaani", "jasmiini", "orkidea"]; for (var i = 0; i< flowers.length; i++){ alert(flowers[i] + " - это цветок."); }
Jos pituus-ominaisuuden arvo ei muutu silmukan aikana, voit tallentaa sen paikalliseen muuttujaan ja käyttää sitä sitten ehdollisessa lausekkeessa. Näin voit lisätä silmukan nopeutta, koska pituus-ominaisuuden arvo haetaan vain kerran silmukan koko keston aikana.
Var kukat = ["Ruusu", "Lilja", "tulppaani", "jasmiini", "orkidea"], len = kukat.pituus; for (var i = 0; i
2. Kierrä...sisään
silmukoille...in käytetään muiden kuin taulukkoobjektien ominaisuuksien läpikulkuun. Tätä ohitusta kutsutaan myös siirtää. Kuljetettaessa on suositeltavaa käyttää hasOwnProperty()-metodia prototyypistä perittyjen ominaisuuksien suodattamiseen.
Luodaan esimerkiksi objekti käyttämällä objektiliteraalia.
Var user = ( nimi: "Alice", ikä: 25, maa: "Venäjä" ); for (var prop in user) ( console.log(prop + ": " + user); ) 
Riisi. 2. Tulos for...in -silmukan suorittamisesta konsolissa
Oletetaan, että skenaariossa ennen käyttäjäobjektin luomista tai sen jälkeen prototyyppi Esine laajennettiin lisämenetelmä klooni() .
If (Object.prototype.clone-tyyppi === "määrittelemätön") ( Object.prototype.clone = funktio () (); )
Koska tulkki tarkistaa jatkuvasti prototyypin periytymisketjua, kaikki objektit pääsevät automaattisesti uuteen menetelmään.
Riisi. 3. Tulos uudelleen toteuttaminen for...silmukassa konsolissa Tämän menetelmän havaitsemisen välttämiseksi käyttäjäobjektin ominaisuuksia laskettaessa käytetään hasOwnProperty()-menetelmää, joka suodattaa prototyypin ominaisuudet pois.
Var user = ( nimi: "Alice", ikä: 25, maa: "Venäjä" ); if (typeof Object.prototype.clone === "määrittämätön") ( Object.prototype.clone = funktio () (); ) for (var prop in user) ( if (user.hasOwnProperty(prop)) ( console.log (prop + ": " + käyttäjä); 
Riisi. 4. Tulos objektin ominaisuuksien listaamisesta hasOwnProperty()-metodilla
3. Vaikka silmukka
While-silmukka on silmukka, jossa on ehdollisen lausekkeen alustava tarkistus. Silmukan sisällä oleva lauseke (koodilohko aaltosulkeissa) suoritetaan, jos ehdollisen lausekkeen arvo on tosi. Jos ensimmäinen tarkistus palauttaa arvon false , komentolohkoa ei suoriteta edes kerran.
Kun silmukan iteraatio on valmis, ehdollisen lausekkeen totuus testataan uudelleen ja prosessia toistetaan, kunnes lausekkeen arvo on epätosi. Tässä tapauksessa ohjelma jatkuu ensimmäiseltä riviltä heti silmukan jälkeen (jos sellainen on).
Tämä silmukka näyttää kertotaulukon luvulle 3:
Var i = 1; var msg = ""; sillä aikaa kun minä< 10) {
msg+= i + " x 3 = " + (i * 3) + "
"; i++; ) document.write(msg); 
Riisi. 5. While-silmukan suorittamisen tulos
4. Tee...while loop
Loop do...while; tarkistaa jatkuvuuden ehdon silmukan suorittamisen jälkeen. Toisin kuin while-silmukassa, do...while; Silmukan runko suoritetaan vähintään kerran, koska ehto tarkistetaan silmukan lopussa, ei alussa. Tätä silmukkaa käytetään harvemmin kuin while , koska käytännössä tilanne, jossa vaaditaan vähintään yksi silmukan suoritus, on harvinainen.
Muuttujan tulos = ""; var i = 0; do (i += 1; tulos += i + " "; ) while (i< 5);
document.write(result);
Riisi. 6. Do...while -silmukan suorittamisen tulos
Seuraavassa esimerkissä silmukan lausekkeet suoritetaan kerran, vaikka ehto ei olisi tosi.
Var i = 10; do ( document.write(i + " "); i++; ) while (i< 10);
5. Äärettömät silmukat
Kun luot minkä tahansa silmukan, voit luoda äärettömän silmukan, joka ei lopu koskaan. Tällainen silmukka voisi mahdollisesti jatkaa toimintaansa niin kauan kuin käyttäjän tietokone on käynnissä. Suurin osa nykyaikaiset selaimet voi havaita tämän ja kehottaa käyttäjää lopettamaan komentosarjan suorittamisen. Välttääksesi äärettömän silmukan luomisen, sinun on oltava varma, että annettu ehto palauttaa jossain vaiheessa epätosi. Esimerkiksi seuraava silmukka määrittää ehdon, joka ei koskaan palauta arvoa false, koska i ei koskaan ole pienempi kuin 10:
For (muut i = 25; i > 10; i++) ( document.write("Tämä lause jatkuu ikuisesti...
");
}
6. Sisäkkäiset silmukat
Toisen silmukan sisällä olevaa silmukkaa kutsutaan sisäkkäisiä. Jokaisella silmukan iteraatiolla sisäkkäinen silmukka suoritetaan kokonaan. Sisäkkäisiä silmukoita voidaan luoda käyttämällä for-silmukkaa ja while-silmukkaa.
For (muut count = 1; count< 3; count++) {
document.write(count + ". Строка цикла
"); for (var nestcount = 1; pescount< 3; nestcount++) {
document.write("Строка вложенного цикла
");
}
}
Riisi. 7. Sisäkkäisen silmukan suorittamisen tulos
7. Syklinhallinta
Silmukkaa voidaan ohjata break-lauseiden avulla; ja jatka; .
7.1. Käyttäjän tauko;
Käyttäjän tauko; lopettaa nykyisen silmukan suorittamisen. Sitä käytetään poikkeustapauksissa, kun silmukka ei jostain syystä pysty suorittamaan, esimerkiksi jos sovellus kohtaa virheen. Useimmiten taukooperaattori; on osa if-rakennetta.
Kun lausunto katkeaa; Käytetään ilman tunnistetta, sen avulla voit poistua silmukasta tai vaihtokäskystä. Seuraava esimerkki luo laskurin, jonka arvojen tulee olla välillä 1-99, mutta break-lause katkaisee silmukan 14 iteroinnin jälkeen.
For (muut i = 1; i< 100; i++) {
if (i == 15) {
break;
}
document.write(i);
document.write("
");
}
Riisi. 8. Työn tulos taukooperaattori for-silmukassa
Sisäkkäisille silmukoille break-lause; käytetään nimikkeen kanssa, joka päättää nimetyn käskyn. Tarra antaa sinun poistua mistä tahansa koodilohkosta. Nimetty lauseke voi olla mikä tahansa break-lauseen ulkopuolinen lause; . Tunniste voi olla if-lauseen nimi tai sen sisällä olevan lausekelohkon nimi henkselit vain nimen määrittämiseksi tälle lohkolle. Avaimen välissä sanalla tauko; ja otsikon nimi ei salli rivinvaihtoa.
Ulkosilmukka: for(var i = 0; i< 10; i++) {
innerloop:
for(var j = 0; j < 10; j++) {
if (j >3) tauko; // Poistu sisimmästä silmukasta, jos (i == 2) katkaisee sisäsilmukan; // Sama asia jos (i == 4) break outerloop; // Poistu ulkoisesta silmukasta document.write("i = " + i + " j = " + j + "
"); ) ) document.write("LOPULLINEN i = " + i + " j = " + j + "
");
7.2. Operaattori jatkaa;
Operaattori jatkaa; lopettaa silmukan nykyisen iteraation ja aloittaa uuden iteraation. Tässä tapauksessa while-silmukka palaa suoraan ehtoonsa, ja for-silmukka arvioi ensin lisäyslausekkeen ja palaa sitten ehtoon.
Tämä esimerkki näyttää kaikki parilliset luvut:
Var i; for(i = 1; i<= 10; i++) {
if (i % 2 !== 0) {
continue;
}
document.write("
tasaluku= " + i);) 
Riisi. 9. Jatka-operaattorin tulos for-silmukassa
Operaattori jatkaa; voidaan käyttää myös sisäkkäisissä silmukoissa, joissa on etiketti.
Ulkosilmukka: for (var i = 0; i "); for (var j = 0; j "); ) ) document.write("Kaikki silmukat suoritettu"+"
");
Riisi. 10. Jatka-operaattorin tulos etiketillä
Viimeisin päivitys: 08.04.2018
Silmukoiden avulla voit suorittaa toiminnon useita kertoja tietyistä ehdoista riippuen. JavaScriptillä on seuraavan tyyppisiä silmukoita:
varten..in
varten..of
sillä aikaa
tehdä, kun
silmukalle
For-silmukalla on seuraava muodollinen määritelmä:
For ([laskurin alustus]; [ehto]; [laskurin muutos])( // toimet )
Käytämme esimerkiksi for-silmukkaa iteroidaksemme taulukon elementtejä:
Var people = ["Tom", "Alice", "Bob", "Sam"]; for(var i = 0; i Silmukan ilmoituksen ensimmäinen osa - var i = 0 - luo ja alustaa vastamuuttujan i. Ja ennen kuin silmukka suoritetaan, sen arvo on 0. Pohjimmiltaan tämä on sama kuin muuttujan ilmoittaminen. Toinen osa on ehto, jossa silmukka suoritetaan. Tässä tapauksessa silmukka jatkuu, kunnes i:n arvo saavuttaa arvon, joka on yhtä suuri kuin henkilötaulukon pituus. Voit saada taulukon pituuden pituus-ominaisuuden avulla: people.length . Kolmas osa nostaa laskuria yhdellä. Ja koska taulukossa on 4 elementtiä, silmukkalohko suoritetaan 4 kertaa, kunnes i:n arvo on yhtä suuri kuin people.length (eli 4). Ja joka kerta tämä arvo kasvaa yhdellä. Jokaista yksittäistä silmukan toistoa kutsutaan iteraatioksi. Näin ollen tässä tapauksessa 4 iteraatiota toimii. Ja käyttämällä lauseketta people[i] voimme saada taulukkoelementin myöhempää tulosta varten selaimessa. Laskuria ei tarvitse lisätä yhdellä, voit suorittaa sen kanssa muita toimintoja, esimerkiksi pienentää sitä yhdellä: Var people = ["Tom", "Alice", "Bob", "Sam"]; for(muuttuja i = ihmiset.pituus - 1; i >= 0; i--)( console.log(people[i]); ) Tässä tapauksessa matriisi tulostetaan lopusta ja taulukko iteroidaan arvosta i = 3 arvoon i = 0. For..in-silmukka on suunniteltu iteroimaan taulukoiden ja objektien läpi. Sen virallinen määritelmä on: Kohde (indeksi taulukossa) ( // toimet ) Toistetaan esimerkiksi taulukon elementtejä: Var people = ["Tom", "Alice", "Bob", "Sam"]; for(var index in people)( console.log(people); ) For...of-silmukka on samanlainen kuin for...in-silmukka, ja se on suunniteltu iteroimaan kokoelmien, kuten taulukoiden, läpi: Anna käyttäjien = ["Tom", "Bob", "Sam"]; for(anna käyttäjien arvo) console.log(val); Nykyinen iteroitava kokoelmaelementti sijoitetaan val-muuttujaan, jonka arvo tulostetaan sitten konsoliin. While-silmukka toimii niin kauan kuin jokin ehto on totta. Sen virallinen määritelmä on: Vaikka(ehto)( // toimet ) Jälleen näytämme taulukon elementit käyttämällä while: Var people = ["Tom", "Alice", "Bob", "Sam"]; var index = 0; while(indeksi< people.length){
console.log(people);
index++;
}
Tässä while-silmukka suoritetaan, kunnes indeksin arvo on yhtä suuri kuin taulukon pituus. Do-silmukassa silmukkakoodi suoritetaan ensin ja sitten while-lauseen ehto tarkistetaan. Ja niin kauan kuin tämä ehto on totta, sykli toistuu. Esimerkiksi: Muutt x = 1; do( console.log(x * x); x++; )while(x< 10)
Tässä silmukkakoodi ajetaan 9 kertaa, kunnes x:stä tulee 10. Do-silmukka takaa, että toiminnot suoritetaan vähintään kerran, vaikka while-lauseen ehto ei olisi tosi. Joskus on välttämätöntä poistua silmukasta ennen kuin se on valmis. Tässä tapauksessa voimme käyttää break-lausetta: < array.length; i++)
{
if (array[i] >10) tauko; document.write(array[i] + "");
}
Tämä silmukka iteroi läpi kaikki taulukon elementit, mutta neljä viimeistä elementtiä eivät näy selaimessa, koska testi if (taulukko[i] > 10) keskeyttää silmukan break-lauseella, kun iteroidaan taulukon läpi elementti 12. Jos meidän täytyy vain ohittaa iteraatio, mutta emme poistua silmukasta, voimme käyttää jatka-lausetta: Muuttumajoukko = [1, 2, 3, 4, 5, 12, 17, 6, 7]; for (var i = 0; i< array.length; i++)
{
if (array[i] >10) jatkaa; document.write(array[i] + "");
}
Tässä tapauksessa, jos ohjelma löytää taulukossa luvun, joka on suurempi kuin 10, tätä numeroa ei näytetä selaimessa.varten..in
Loop for...of
kun silmukka
tehdä, kun
Jatka ja katkaise väitteet
