For, While ja Do While LOOP sisään JavaSkripti esimerkin kanssa
James Hartman
⚡ Älykäs yhteenveto
For-, While- ja Do While -silmukat sisään JavaSkripti toistaa lauselohkon toistamatta koodia. Tässä artikkelissa selitetään jokainen syntaksi, näytetään suoritettavia esimerkkejä odotetulla tuloksella, lisätään for-in- ja for-of-muodot sekä käsitellään break-, continue- ja äärettömän silmukan estoa.
Mikä on silmukka JavaKäsikirjoitus?
Silmukat ovat hyödyllisiä, kun joudut suorittamaan samoja koodirivejä toistuvasti, tietyn määrän kertoja tai niin kauan kuin tietty ehto on totta. Oletetaan, että haluat kirjoittaa "Hei" -viestin 100 kertaa verkkosivullesi. Tietenkin sinun on kopioitava ja liitettävä sama rivi 100 kertaa. Sen sijaan, jos käytät silmukoita, voit suorittaa tämän tehtävän vain 3 tai 4 rivillä.
Jokainen silmukka rakentuu samoista kolmesta osasta syntaksista riippumatta: aloitusarvosta, ehdosta, joka päättää, suoritetaanko uusi kierros, ja päivityksestä, joka siirtää silmukkaa kohti loppuaan. Alla oleva kaavio näyttää tämän toistuvan syklin.
Erilaisia silmukoita JavaKäsikirjoitus
Sisällä on pääasiassa neljän tyyppisiä silmukoita JavaKäsikirjoitus.
- silmukalle
- for/in-silmukka
- samalla silmukka
- tehdä ... vaikka silmukka
Moderni JavaSkripti lisää for…of-silmukan arvojen suoraa iterointia varten, joten käytännössä on käytettävissä viisi lomaketta. Alla oleva taulukko näyttää, mitä lomaketta käytetään tietyssä tilanteessa.
| Silmukka | Kunto tarkastettu | Minimiteloitukset | Paras käytetty |
|---|---|---|---|
| varten | Ennen jokaista kierrosta | 0 | Tunnettu määrä toistoja |
| vaikka | Ennen jokaista kierrosta | 0 | Tuntematon määrä, jota ohjaa ehto |
| tee…sillä aikaa | Jokaisen kierroksen jälkeen | 1 | Valikot ja kehotteet, jotka on suoritettava kerran |
| varten… sisään | Ennen jokaista kierrosta | 0 | Objektin näppäinten lukeminen |
| varten… / | Ennen jokaista kierrosta | 0 | Taulukon tai merkkijonon arvojen lukeminen |
silmukalle
Syntaksi:
for(statement1; statement2; statment3)
{
lines of code to be executed
}
- Lause1 suoritetaan ensin, jopa ennen loo-lauseen suorittamista.ping koodia. Joten tätä lausetta käytetään yleensä arvojen määrittämiseen muuttujille, joita käytetään silmukan sisällä.
- Lause2 on ehto silmukan suorittamiselle.
- Lause3 suoritetaan joka kerta loo-komennon jälkeen.ping koodi suoritetaan.
Kokeile tätä itse:
<html>
<head>
<script type="text/javascript">
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
document.write("<b>Using for loops </b><br />");
for (i=0;i<students.length;i++)
{
document.write(students[i] + "<br />");
}
</script>
</head>
<body>
</body>
</html>
lähtö:
Using for loops John Ann Aaron Edwin Elizabeth
Laskuri alkaa nollasta, koska ensimmäinen indeksi ryhmä on nolla ja ehto käyttää students.length-funktiota, joten silmukka mukautuu automaattisesti nimien lisäyksen tai poiston yhteydessä.
samalla silmukka
Syntaksi:
while(condition)
{
lines of code to be executed
}
"While-silmukka" suoritetaan niin kauan kuin määritetty ehto on tosi. While-silmukan sisällä tulisi sisällyttää lause, joka päättää silmukan jossain vaiheessa. Muuten silmukasi ei lopu koskaan ja selaimesi saattaa kaatua.
Kokeile tätä itse:
<html>
<head>
<script type="text/javascript">
document.write("<b>Using while loops </b><br />");
var i = 0, j = 1, k;
document.write("Fibonacci series less than 40<br />");
while(i<40)
{
document.write(i + "<br />");
k = i+j;
i = j;
j = k;
}
</script>
</head>
<body>
</body>
</html>
lähtö:
Using while loops Fibonacci series less than 40 0 1 1 2 3 5 8 13 21 34
⚠️ Varoitus: While-silmukka, jonka ehto ei koskaan muutu arvoksi false, jäädyttää selainvälilehden. Varmista aina, että jokin rungon sisällä oleva muuttuja siirtää ehdon arvoa kohti false-arvoa, ja käytä turvalaskuria, kun poistuminen riippuu ulkoisista tiedoista.
tehdä ... vaikka silmukka
Syntaksi:
do
{
block of code to be executed
} while (condition)
Do…while-silmukka on hyvin samankaltainen kuin while-silmukka. Ainoa ero on, että do…while-silmukassa koodilohko suoritetaan kerran jo ennen ehdon tarkistamista.
Kokeile tätä itse:
<html>
<head>
<script type="text/javascript">
document.write("<b>Using do...while loops </b><br />");
var i = 2;
document.write("Even numbers less than 20<br />");
do
{
document.write(i + "<br />");
i = i + 2;
}while(i<20)
</script>
</head>
<body>
</body>
</html>
lähtö:
Using do...while loops Even numbers less than 20 2 4 6 8 10 12 14 16 18
Ero tulee näkyviin, kun ehto on alusta alkaen epätosi. While-silmukka ei tulosta mitään, kun taas do…while-silmukka tulostaa vielä yhden rivin ennen stop-lausetta.ping.
silmukassa
For…in-silmukka käy läpi objektin luetteloitavat ominaisuusnimet. Jokainen läpikäynti asettaa silmukkamuuttujalle seuraavan avaimen, ja arvo luetaan sulkeissa.
const student = { name: "Ann", age: 21, course: "JavaScript" }; for (const key in student) { console.log(key + " : " + student[key]); }
lähtö:
name : Ann age : 21 course : JavaScript
💡 Vinkki: Vältä for…-funktiota taulukoissa. Se palauttaa indeksiarvot merkkijonoina ja käy myös läpi perityt ominaisuudet, mikä voi tuottaa yllättäviä tuloksia. Käytä taulukoille sen sijaan for…of-funktiota tai klassista for-silmukkaa.
for…of silmukka ja forEach
for…of-silmukka lukee minkä tahansa iteroitavan objektin arvot, mukaan lukien taulukot, merkkijonot, kartat ja joukot. forEach-metodi saavuttaa saman tuloksen takaisinkutsufunktiolla ja antaa pääsyn indeksiin.
const students = ["John", "Ann", "Aaron"]; // for...of reads each value directly for (const name of students) { console.log(name); } // forEach supplies the value and the index students.forEach(function (name, index) { console.log(index + " - " + name); }); // strings are iterable too for (const letter of "Ann") { console.log(letter); }
lähtö:
John Ann Aaron 0 - John 1 - Ann 2 - Aaron A n n
Yksi käytännön ero on tärkeä: break ja continue toimivat for…of-funktion sisällä, mutta niitä ei voida käyttää forEach-funktion sisällä, koska jokainen takaisinkutsu on erillinen funktio.
Katkaise ja jatka -lausekkeet
Kaksi avainsanaa muuttaa minkä tahansa silmukan normaalia kulkua. Break-lauseke poistuu silmukasta kokonaan ja continue-lauseke hylkää nykyisen suorituksen ja hyppää seuraavaan.
const numbers = [4, 7, 10, 13, 16, 19]; // continue: skip odd numbers for (const n of numbers) { if (n % 2 !== 0) { continue; } console.log("even: " + n); } // break: stop at the first value above 12 for (const n of numbers) { if (n > 12) { console.log("first value above 12: " + n); break; } }
lähtö:
even: 4 even: 10 even: 16 first value above 12: 13
Silmukoita esiintyy lähes jokaisessa kirjoittamassasi skriptissä. Jatka käytännön JavaSkriptikoodiesimerkkejä, käy uudelleen JavaSkriptitaulukon menetelmät näiden silmukoiden päälle rakennetuille iteraatioavustajille ja lue sisäinen ja ulkoinen JavaKäsikirjoitus päättää, mihin valmiin käsikirjoituksen tulisi sijaita.
