JavaScript ir viena no visbiežāk izmantotajām programmēšanas valodām. Izstrādātājiem, kuri plāno kļūt par JavaScript inženieriem, ir jāapgūst cilpu pamati, to veidi un darbības veids.
JavaScript cilpa ir rīks, ko izmanto, lai veiktu atkārtotus uzdevumus, pamatojoties uz noteiktu nosacījumu. No otras puses, “iterēt” ir vispārīgs termins, kas nozīmē atkārtošanos cilpas kontekstā. Cilpa turpinās iterēt, līdz tiks izpildīts apstāšanās nosacījums.
Lai to labāk saprastu, varat to uzskatīt par datorizētu spēli, kurā jums tiek uzdots spert X soļus uz ziemeļiem un pēc tam Y soļus pa kreisi.
Varat attēlot iet 7 soļus uz ziemeļiem kā;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
kad tiek izpildīts iepriekš minētais koda bloks, jums būs šis;
Kāpēc parasti tiek izmantotas cilpas?
- Veiciet atkārtotus uzdevumus: varat izmantot cilpas, lai izpildītu instrukcijas, līdz tiek izpildīti noteikti nosacījumi.
- Atkārtot objektus vai masīvus: izmantojot cilpas, varat atkārtot objekta vai masīva elementu īpašības, ļaujot veikt noteiktas darbības katram īpašumam vai elementam.
- Filtrēt datus: varat izmantot cilpu, lai filtrētu datus, pamatojoties uz konkrētiem nosacījumiem.
JavaScript cilpas ir dažādās formās; Par, Kamēr, Dari… Kamēr, Par…no un Par…in. Izpētīsim tos detalizēti un parādīsim, kā katrs darbojas.
Cilpai
For cilpa atkārtosies, līdz norādītais nosacījums tiek novērtēts kā patiess. For cilpai ir trīs izvēles izteiksmes, kam seko koda bloks.
for (initialization; condition; finalExpression) {
// code
}
- Inicializācijas izteiksme nāk pirms pirmās cilpas izpildes. Šī izteiksme parasti inicializē vienu vai vairākus skaitītājus.
- Nosacījuma izteiksme tiek pārbaudīta katru reizi, pirms tiek izpildīta for cilpa. Cilpas vai priekšraksta kods tiek izpildīts katru reizi, kad izteiksme tiek novērtēta kā patiess. No otras puses, cilpa apstājas, kad izteiksme tiek novērtēta kā false. Tomēr, ja izteiksme tiek izlaista, izteiksme automātiski tiks novērtēta uz patiesu.
- FinalExpression tiek izpildīts pēc katras cilpas iterācijas. Izteicienu galvenokārt izmanto, lai palielinātu skaitītāju.
Varat izmantot {}, bloku, lai grupētu un izpildītu vairākus priekšrakstus. Ja vēlaties iziet no cilpas agri, pirms nosacījuma izteiksme tiek novērtēta kā false, izmantojiet pārtraukuma paziņojumu.
For cilpu piemēri ar kodu
for (let i = 0; i < 7; i++) {
console.log(i);
}
Šajā koda blokā;
- Mainīgais i tiek inicializēts uz nulli (lai i=0).
- Nosacījums ir tāds, ka i jābūt mazākam par 7 (i=7).
- Cikla atkārtosies atkārtoti, ja i vērtība ir mazāka par 7 (i<7>.
- Iterācija pievienos 1 i vērtībai pēc katras iterācijas (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- Koda bloks atkārtojas no 1 līdz 10 (i<11).
- Cilpa inicializē mainīgo i ar vērtību 1 (lai i = 1).
- Cilpas nosacījuma izpilde turpināsies, ja i vērtība ir mazāka par 11 (i < 11).
- Pēc katras iterācijas i vērtība palielinās par 2 (i += 2).
If paziņojums novērtē, vai vērtība i=9. Ja nosacījums ir patiess, tiek izpildīts pārtraukuma paziņojums un cilpa tiek pārtraukta.
(attēls)
Par… no cilpas
For… of cilpa atkārto iterējamus objektus, piemēram, karti, masīvu, argumentus un kopu. Šī cilpa izsauc pielāgotu iterācijas āķi ar paziņojumiem, kas tiek izpildīti katra atšķirīgā īpašuma vērtībai.
For… cilpas pamatstruktūra ir;
for (variable of object) statement
For… of cilpas piemēri darbībā
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
Šajā kodā;
- Mēs definējam masīvu ar nosaukumu frontendLanguages
- Masīvam ir trīs elementi; “HTML”, “CSS”, “JavaScript” un “React”.
- For… of cilpa atkārtojas katrā frontendLanguages elementā.
- Koda blokā esošais i katras iterācijas laikā aizņem katra elementa vērtību un konsolē izdrukātās vērtības.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
Šajā koda blokā;
- Mēs deklarējam mainīgo s, ko piešķiram jaunai kopai, izmantojot Set() konstruktoru.
- Kodam tiek pievienoti divi elementi, izmantojot metodi add().
- Par… of iterates virs elementu objekta.
- Cilpa piešķir pašreizējo elementu n, pirms tiek izpildīts paziņojums console.log(n).
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
Šajā koda blokā;
- Mēs izmantojam Map() konstruktoru, lai izveidotu jaunu kartes objektu.
- Tiek deklarēts mainīgais m.
- Izmantojot .set() metodi, mēs pievienojam piecus atslēgu un vērtību pārus.
- A for…of cilpa atkārtojas pār kartes objekta m elementiem.
Par… cilpā
A for…in cilpa tiek izmantota, lai atkārtotu objekta īpašības. For…in cilpas pamatstruktūra ir;
for (property in object) {
// code
}
Varat izmantot for…in cilpa, lai atkārtotu masīvus un masīviem līdzīgus objektus.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
Šajā koda blokā;
- Mēs ieviešam JavaScript objektu un nosaucam to ShoppingList.
- Mēs izmantojam cilpu, lai atkārtotu katru iepirkumu saraksta rekvizītu, izmantojot operatoru in.
- Katrā iterācijā cilpa piešķir pašreizējo rekvizīta nosaukumu iepirkumu sarakstā.
Kamēr
Cilpa while novērtē nosacījumu, ja tā konstatē, ka tā ir patiesa, tiek izpildīts koda bloks. Tomēr, ja nosacījums ir nepatiess, cilpa beidzas un koda bloks netiks izpildīts.
Šī ir laika cilpas pamatstruktūra;
while (condition) Statement
Pārbaudes nosacījumam ir jānotiek pirms priekšraksta izpildes cilpā. Varat izpildīt vairākus priekšrakstus, izmantojot {} vai bloķēt priekšrakstus.
Piemērs cilpas while darbībā
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
Šajā kodā;
- Mainīgais n tiek inicializēts ar nulles vērtību (lai n=0).
- Cilpa tiks izpildīta tik ilgi, kamēr n vērtība ir mazāka par 9 (n<9)
- Vērtība n tiek parādīta konsolē un tiek palielināta par 1 pēc katras iterācijas (n++)
- Koda izpilde tiks pārtraukta plkst. 8.
Dariet… Kamēr cilpa
Do…while cilpa atkārtojas, līdz konkrēts nosacījums tiek novērtēts kā nepatiess.
Do…while paziņojuma vispārējā struktūra ir;
do statement while (condition);
Paziņojums tiek izpildīts vienreiz, bet pirms nosacījuma pārbaudes. Paziņojums tiks izpildīts, ja nosacījums ir patiess. Tomēr, ja novērtētais nosacījums ir nepatiess, izpilde tiks apturēta un kontrole pāriet uz priekšrakstu pēc do..while. Tiek garantēts, ka kods tiek izpildīts, kamēr cilpa tiks izpildīta vismaz vienu reizi, pat ja nosacījums tiek novērtēts kā patiess.
Piemērs darīt…kamēr
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
Šajā kodā;
- Mēs ieviešam mainīgo n un iestatām tā sākotnējo vērtību kā 0 (lai n=0).
- Mūsu mainīgais n ievada cilpu do…while, kur tā vērtība tiek palielināta par 1 pēc katras iterācijas (n+=1)
- n vērtība tiek reģistrēta.
- Cilpa turpinās darboties, kamēr n vērtība ir mazāka par 7 (n<7).
Palaižot šo kodu, konsole parādīs n vērtības, sākot no 1 līdz 7, jo cilpa tiks izpildīta 7 reizes.
Ligzdota cilpa
Ligzdota cilpa ir situācija, kad cilpas iekšpusē ir cilpa. Piemēram, mums var būt for cilpa, kas ligzdota citā for cilpā.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Ir divi mainīgie; ārējais un iekšējais, un abi tiek inicializēti ar nulles vērtību.
- Abi mainīgie tiek palielināti par 2 pēc katras iterācijas
- Katra ārējā un iekšējā cilpa atkārtojas trīs reizes.
Cilpas kontroles paziņojumi
Cilpas vadības paziņojumi, ko dažkārt sauc par “pārlēciena paziņojumiem”, pārtrauc normālu programmas plūsmu. Pārtraukt un turpināt ir cilpas vadības paziņojumu piemēri.
Pārtraukt paziņojumus
Pārtraukuma paziņojumi nekavējoties pārtrauc cilpu, pat ja nosacījums nav izpildīts.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
Renderētais kods parādīsies kā;
Turpināt paziņojumus
Paziņojumi Continue tiek izmantoti, lai izlaistu noteiktu koda bloku un veiktu iterāciju jaunajai cilpai.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Renderētais kods parādīsies kā;
Secinājums
Iepriekš ir norādītas parastās cilpas, ar kurām jūs sastapsiet vaniļas JavaScript un tā ietvarus/bibliotēkas. Kā uzsvērts, katram cilpas veidam ir savs lietošanas gadījums un atšķirīga uzvedība. Ja izvēlaties nepareizu cilpas veidu, iespējams, radīsies kļūdas, un kods, iespējams, parādīs neparedzētu darbību.
Ja jums ir darīšana ar JavaScript ietvaru vai bibliotēku, vienmēr pārbaudiet tās dokumentāciju un izmantojiet iebūvētās cilpas.