For, While ja Do While LOOP sisse JavaSkript koos näitega
James Hartman
⚡ Nutikas kokkuvõte
For, While ja Do While tsüklid on sisse lülitatud JavaSkript kordab lauseplokki ilma koodi dubleerimata. See artikkel selgitab iga süntaksit, näitab käivitatavaid näiteid oodatava väljundiga, lisab for-in ja for-of vormid ning käsitleb katkestuse, jätkamise ja lõpmatu tsükli vältimist.
Mis on silmus? JavaSkript?
Silmused on kasulikud, kui peate täitma samu koodiridu korduvalt, teatud arv kordi või seni, kuni konkreetne tingimus on tõene. Oletame, et soovite oma veebilehel 100 korda tippida "Tere" sõnumi. Loomulikult peate sama rea 100 korda kopeerima ja kleepima. Selle asemel, kui kasutate silmuseid, saate selle ülesande täita vaid 3 või 4 reaga.
Iga tsükkel koosneb samadest kolmest osast, olenemata süntaksi välimusest: algväärtus, tingimus, mis otsustab, kas järgmine etapp käivitatakse, ja uuendus, mis liigutab tsükli väljumise suunas. Allolev diagramm näitab seda korduvat tsüklit.
Erinevat tüüpi silmused JavaScript
Seal on peamiselt nelja tüüpi silmuseid JavaScript.
- silmuse jaoks
- for/in tsüklis
- samas silmus
- do...when loop
Kaasaegne JavaSkript lisab väärtuste otse itereerimiseks tsükli for…of, seega on praktikas saadaval viis vormi. Allolev tabel näitab, millist antud olukorras kasutada.
| Silmus | Seisukord kontrollitud | Minimaalsed hukkamised | Kõige paremini kasutatav |
|---|---|---|---|
| eest | Enne iga läbimist | 0 | Teadaolev arv kordusi |
| kuigi | Enne iga läbimist | 0 | Tundmatu arv, mida juhib tingimus |
| tee…samal ajal | Pärast iga läbimist | 1 | Menüüd ja viibad, mis peavad käivituma üks kord |
| jaoks… sisse | Enne iga läbimist | 0 | Objekti võtmete lugemine |
| ... jaoks | Enne iga läbimist | 0 | Massiivi või stringi väärtuste lugemine |
silmuse jaoks
süntaksit:
for(statement1; statement2; statment3)
{
lines of code to be executed
}
- Lause1 käivitatakse esimesena, isegi enne loo käivitamistping kood. Seega kasutatakse seda lauset tavaliselt tsükli sees kasutatavatele muutujatele väärtuste määramiseks.
- Avaldus2 on tsükli täitmise tingimus.
- Lause3 täidetakse iga kord pärast loo käsku.ping kood käivitatakse.
Proovige seda ise:
<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>
Väljund:
Using for loops John Ann Aaron Edwin Elizabeth
Loendur algab nullist, kuna esimene indeks massiivi on null ja tingimus kasutab students.length funktsiooni, nii et tsükkel kohandub automaatselt nimede lisamisel või eemaldamisel.
samas silmus
süntaksit:
while(condition)
{
lines of code to be executed
}
"While loop" käivitatakse seni, kuni määratud tingimus on tõene. While-tsükli sisse peaksite lisama lause, mis tsükli mingil hetkel lõpetab. Vastasel juhul ei lõpe teie tsükkel kunagi ja teie brauser võib kokku kukkuda.
Proovige seda ise:
<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>
Väljund:
Using while loops Fibonacci series less than 40 0 1 1 2 3 5 8 13 21 34
⚠️ Hoiatus: While-tsükkel, mille tingimus ei muutu kunagi vääraks, külmutab brauseri vahekaardi. Veenduge alati, et mõni muutuja tsükli sisus liigutab tingimust väära suunas ja kasutage turvaloendurit, kui väljumine sõltub välistest andmetest.
do...when loop
süntaksit:
do
{
block of code to be executed
} while (condition)
„Do…while“ tsükkel on väga sarnane „while“ tsükliga. Ainus erinevus seisneb selles, et „do…while“ tsüklis käivitatakse koodiplokk üks kord isegi enne tingimuse kontrollimist.
Proovige seda ise:
<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>
Väljund:
Using do...while loops Even numbers less than 20 2 4 6 8 10 12 14 16 18
Erinevus ilmneb siis, kui tingimus on algusest peale väär. While-tsükkel ei prindi midagi, samas kui do…while-tsükkel prindib enne stopp-käsku ikkagi ühe rea.ping.
jaoks…tsüklis
Tsükkel for…in läbib objekti loetletavate omaduste nimed. Iga läbimine määrab tsüklimuutujale järgmise võtme ja väärtus loetakse nurksulgudes.
const student = { name: "Ann", age: 21, course: "JavaScript" }; for (const key in student) { console.log(key + " : " + student[key]); }
Väljund:
name : Ann age : 21 course : JavaScript
💡 Näpunäide: Väldi massiivide puhul funktsiooni „for…”. See tagastab indeksiväärtused stringidena ja külastab ka päritud omadusi, mis võib anda üllatavaid tulemusi. Kasuta massiivide puhul hoopis funktsiooni „for…of” või klassikalist „for” tsüklit.
for…of tsükkel ja forEach
Tsükkel for…of loeb mis tahes itereeruva objekti, sh massiivide, stringide, kaartide ja komplektide väärtusi. Meetod forEach saavutab sama tulemuse tagasihelistusfunktsiooniga ja annab juurdepääsu indeksile.
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); }
Väljund:
John Ann Aaron 0 - John 1 - Ann 2 - Aaron A n n
Üks praktiline erinevus on oluline: break ja continue töötavad funktsiooni for…of sees, aga neid ei saa kasutada funktsiooni forEach sees, sest iga tagasihelistusfunktsioon on eraldi funktsioon.
katkestus- ja jätkamislaused
Kaks märksõna muudavad iga tsükli tavapärast kulgu. BREAK-lause lahkub tsüklist täielikult ja continue-lause katkestab praeguse tsükli ja hüppab järgmise juurde.
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; } }
Väljund:
even: 4 even: 10 even: 16 first value above 12: 13
Tsüklid esinevad peaaegu igas skriptis, mida kirjutate. Jätkake praktiline JavaSkriptikoodi näited, külastage uuesti JavaSkriptimassiivi meetodid nende tsüklite peale ehitatud iteratsiooniabiliste jaoks ja lugege sisemine ja väline JavaScript et otsustada, kuhu valmis skript peaks asuma.
