Silmukoiden käyttäminen JavaScriptissä

Silmukan avulla voit iteroida jokaisen taulukon kohteen, jotta voit muokata ja tulostaa jokaisen niistä haluamallasi tavalla. Kuten kaikki ohjelmointikielet, silmukat ovat tärkeä työkalu myös JavaScriptin matriisien renderointiin.

Tutustumme joidenkin käytännön esimerkkien avulla syvemmälle eri tapoihin, joilla voit käyttää silmukoita JavaScriptissä.

Javascriptin silmukan lisäys ja vähennys

Inkrementaalinen varten silmukka on JavaScriptin iteraation perusta.

Se olettaa muuttujalle määritetyn alkuarvon ja suorittaa yksinkertaisen ehdollisen pituuden tarkistuksen. Sitten se lisää tai pienentää arvoa käyttämällä ++ tai -- operaattoreille.

Sen yleinen syntaksi näyttää tältä:

for (var i = alkuarvo; i taulukko [i]}

Toistetaan nyt taulukon läpi käyttämällä yllä olevaa syntaksia:

anArray = [1, 3, 5, 6];
varten (olkoon i = 0; i console.log (anArray [i])
}
Lähtö:
1
3
5
6 

Nyt käsittelemme jokaista yllä olevan taulukon kohdetta JavaScriptin avulla varten silmukka:

anArray = [1, 3, 5, 6];
varten (olkoon i = 0; i 

instagram viewer

console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Lähtö:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Silmukka iteroi matriisin läpi asteittain ++ operaattori, joka tuottaa tilatun lähdön.

Mutta käyttämällä negatiivista (--) -käyttäjä, voit kääntää lähdön.

Syntaksit ovat samat, mutta logiikka on hieman erilainen kuin yllä oleva kasvava silmukka.

Näin vähennysmenetelmä toimii:

anArray = [1, 3, 5, 6];
for (olkoon i = anArray.length-1; i> = 0; minä--) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Lähtö:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Yllä olevan koodin logiikka ei ole kaukaa haettua. Array -indeksointi alkaa nollasta. Joten soittaminen anArray [i] yleensä iteroi indeksistä nollasta kolmeen, koska yllä oleva taulukko sisältää neljä kohdetta.

Näin ollen yhden poistaminen taulukon pituudesta ja ehdon asettaminen suuremmaksi tai yhtä suureksi kuin me teimme on melko kätevä - varsinkin kun käytät matriisia iteraation perustana.

Se pitää taulukkoindeksin yhdellä sen pituutta pienemmällä. Kunto i> = 0 pakottaa sitten laskun pysähtymään taulukon viimeiseen kohteeseen.

Aiheeseen liittyviä: JavaScript -matriisimenetelmät, jotka sinun pitäisi hallita tänään

JavaScript jokaiselle

Vaikka et voi vähentää JavaScriptin avulla jokaiselle, se on usein vähemmän monimutkaista kuin raaka varten silmukka. Se toimii poimimalla yksi kohde toisensa jälkeen muistamatta edellistä.

Tässä on JavaScriptin yleinen syntaksi jokaiselle:

array.forEach (elementti => {
toiminta
})

Katso miten se toimii käytännössä:

anna anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Lähtö:
1
3
5
6 

Käytä nyt tätä suorittaaksesi yksinkertaisen matemaattisen operaation jokaiselle kohteelle kuten edellisessä osassa:

anna anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Lähtö:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Kuinka käyttää... -merkkiä JavaScript -silmukassa

The varten... sisään silmukka JavaScriptissä iteroi taulukon läpi ja palauttaa sen indeksin.

Löydät sen helppokäyttöiseksi varten... sisään jos olet tuttu Python on silmukkaa varten koska ne ovat samankaltaisia ​​yksinkertaisuuden ja logiikan suhteen.

Katso sen yleistä syntaksia:

for (anna elementin matriisissa) {
toiminta 
}

Joten varten... sisään silmukka määrittää jokaisen taulukon kohteen sulkeessa ilmoitetulle muuttujalle (elementille).

Siten elementin kirjaaminen suoraan silmukkaan palauttaa taulukkoindeksin eikä itse kohteita:

anna anArray = [1, 3, 5, 6];
for (let i inArray) {
console.log (i)
}
Lähtö:
0
1
2
3 

Jokaisen kohteen tulostaminen sen sijaan:

anna anArray = [1, 3, 5, 6];
for (let i inArray) {
console.log (anArray [i])
}
Lähtö:
1
3
5
6 

Kuten teit, kun käytit vähennyssilmukkaa, on myös helppo kääntää lähtö käyttämällä varten... sisään:

anna anArray = [1, 3, 5, 6];
// Poista yksi taulukon pituudesta ja määritä tämä muuttujalle:
olkoon v = anArray.length - 1; 
// Käytä yllä olevaa muuttujaa hakemistoperusteena iteroimalla taulukkoa alaspäin:
for (let i inArray) {
console.log (anArray [v])
v -= 1;
}
Lähtö:
6
5
3
1 

Yllä oleva koodi on loogisesti samanlainen kuin mitä teit käyttäessäsi vähennyssilmukkaa. Se on kuitenkin luettavissa ja selkeästi hahmoteltu.

JavaScript for... of Loop

The ... varten silmukka on samanlainen kuin varten... sisään silmukka.

Kuitenkin toisin varten... sisään, se ei iteroi matriisihakemiston kautta vaan itse kohteet.

Sen yleinen syntaksi näyttää tältä:

for (anna i taulukosta) {
toiminta 
}

Käytämme tätä silmukkamenetelmää iteroidaksesi taulukon läpi asteittain nähdäksesi kuinka se toimii:

anna anArray = [1, 3, 5, 6];
for (anna i of anArray) {
console.log (i)
}
Lähtö:
1
3
5
6 

Voit myös käyttää tätä menetelmää iteroidaksesi taulukon alaspäin ja kääntääksesi tuloksen. Se on samanlainen kuin teet sen käyttämällä varten... sisään:

anna anArray = [1, 3, 5, 6];
olkoon v = anArray.length - 1;
for (anna x of anArray) {
console.log (anArray [v])
v -= 1;
}
Lähtö:
6
5
3
1

Silmukan sisällä toimiminen:

anna anArray = [1, 3, 5, 6];
olkoon v = anArray.length - 1;
for (anna x of anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Lähtö:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Vaikka silmukka

The sillä aikaa silmukka pyörii jatkuvasti niin kauan kuin tietty ehto on totta. Sitä käytetään usein äärettömänä silmukana.

Esimerkiksi, koska nolla on aina alle kymmenen, alla oleva koodi toimii jatkuvasti:

anna i = 0;
kun taas (minä <10) {
console.log (4)
}

Yllä oleva koodi kirjaa "4" loputtomasti.

Toistetaan taulukon läpi käyttämällä sillä aikaa silmukka:

anna i = 0;
while (i console.log (anArray [i])
i += 1
}
Lähtö:
1
3
5
6 

JavaScript ei... kun Loop

The tehdä, kun silmukka hyväksyy ja suorittaa joukon toimintoja nimenomaisesti a: n sisällä tehdä syntaksi. Sitten se ilmoittaa tämän toiminnan edellytyksen sillä aikaa silmukka.

Tältä se näyttää:

tehdä{
Toiminnot
}
sillä aikaa (
yhteisymmärrys
)

Toistetaan nyt taulukon läpi käyttämällä tätä silmukkamenetelmää:

tehdä{
console.log (anArray [i])
i += 1
}
sillä aikaa (
i )
Lähtö:
1
3
5
6 

Tutustu JavaScript -silmukoihin

Vaikka olemme korostaneet erilaisia ​​JavaScript -silmukointimenetelmiä, iteraation perusteiden hallitseminen ohjelmoinnissa antaa sinun käyttää niitä joustavasti ja luottavaisesti ohjelmissasi. Useimmat näistä JavaScript -silmukoista toimivat kuitenkin samalla tavalla, ja niiden yleisissä ääriviivoissa ja syntakseissa on vain muutamia eroja.

Silmukat ovat kuitenkin useimpien asiakaspuolen matriisien renderoinnin perusta. Joten voit muokata näitä silmukkamenetelmiä haluamallasi tavalla. Esimerkiksi niiden käyttäminen monimutkaisempien matriisien kanssa antaa sinulle paremman käsityksen JavaScript -silmukoista.

JavaScript if-else -lausekkeen käyttäminen

If-else-lause on ensimmäinen askel kohti ohjelmointilogiikkaa sovelluksiisi.

Lue seuraava

Kirjailijasta