„JavaScript“ kilpos pradedantiesiems: išmokite pagrindų

Tai niūrus pirmadienis, o jūs darbe. Visi žinome, kokie slogūs gali būti pirmadieniai, tiesa? Jūsų viršininkas prieina prie jūsų ir sako: „Ei, aš turiu 300 neatplėštų laiškų, kuriuos gavome per savaitgalį. Noriu, kad atidarytumėte kiekvieną, užsirašytumėte siuntėjo vardą ir ištrintumėte laiškus, kai baigsite.”

Ši užduotis atrodo labai varginanti, jei bandysite ją atlikti rankiniu būdu. Kitas dalykas, apie kurį galvojate, tikriausiai yra prisijungti prie „Google“ ir ieškoti programinės įrangos, kuri gali automatizuoti šį procesą ir palengvinti jūsų gyvenimą, tiesa?

Na, panašių situacijų turime ir programuojant. Kartais reikia atlikti pakartotines užduotis, kol jos bus baigtos. Kaip sprendžiate šią problemą? „JavaScript“ programoje turime tai, ką vadiname kilpomis. Kilpos leidžia išspręsti pasikartojančias užduotis sumažinant užduočiai atlikti reikalingo kodo kiekį.

Šiame straipsnyje aptarsime, kas yra ciklas, kaip jis veikia ir kokius įvairius metodus galime naudoti ją pritaikydami savo programose.

Kas yra kilpa?

„JavaScript“ yra naudojamos kilpos, kad būtų galima lengvai atlikti pakartotinius veiksmus. Jie pagrįsti sąlyga, kuri grąžina teisingą arba klaidingą.

Sąlyga yra išraiška, kurią reikia perduoti, kad ciklas veiktų. Ciklas veikia, kai nurodytos sąlygos grąžina tikrąją reikšmę, ir sustoja, kai grąžina klaidingą reikšmę.

Kada reikia naudoti kilpą?

Kilpos naudingos atliekant pasikartojančias užduotis. Pavyzdžiui, naudojant kilpą sutrumpinamas kodas, reikalingas problemai išspręsti. Tai taupo laiką, optimizuoja atminties naudojimą ir pagerina lankstumą.

Tikroji ciklo reikšmė neapsiriboja kodo ilgio sumažinimu ir pasikartojimo ribojimu. Jie taip pat padeda dirbant su duomenimis masyve, objekte ar kitose struktūrose. Be to, kilpos skatina kodo moduliškumą, sumažindamos pasikartojantį kodą ir padidindamos kodo pakartotinį naudojimą, o tai leidžia sukurti kodus, kurie gali būti naudojami įvairiose jūsų projekto dalyse.

Kilpų tipai

Yra dvi pagrindinės kilpų kategorijos: įėjimo valdomos kilpos ir išėjimo valdomos kilpos.

Įėjimas kontroliuojamas kilpos įvertina būklę „kilpos įėjime” prieš vykdydamos kilpos korpusą. Jei sąlyga teisinga, kūnas bėga. Jei ne, kūnas nebėga. The for ir while kilpos yra įėjimo valdomų kilpų pavyzdžiai.

Valdomas išėjimas kilpos sutelkia dėmesį į kilpos kūną virš bandymo sąlygos, užtikrinant, kad kilpos korpusas būtų vykdomas bent kartą prieš įvertinant bandymo būklę. Geras išėjimo valdomos kilpos pavyzdys yra do-while kilpa.

Panagrinėkime keletą įėjimo valdomų kilpų pavyzdžių:

Nors Loop

A while ciklas turi tokią sintaksę.

while (condition) {
  //  loop's body
}

Toliau pateiktame sąraše paaiškinamos trumposios ciklo funkcijos:

1. The while ciklo skliausteliuose pateikiama bandymo sąlyga.

2. Programa patikrina būseną, kad sužinotų, ar ji atitinka, ar nepavyksta.

3. Ciklo korpuse esantis kodas vykdomas tol, kol bus įvykdyta sąlyga.

4. Programa nutraukia savo veiklą, kai bandymo sąlyga nepavyksta.

Žemiau paimkime praktinį pavyzdį while kilpa:

let arr = [];
let i = 1;
let number = 5;
 
while (i <= number) {
arr.push(i)
i++
}

console.log(arr)

1. Aukščiau pateiktas kodo fragmentas inicijuoja „arr“, „i“ ir „num“ kintamuosius.

2. „arr” kintamasis yra masyvas, kuriame yra verčių, kurios atitinka bandymo sąlygą.

3. Kintamasis „i“ stebi kiekvieną prieaugį po kiekvienos iteracijos.

4. Kintamasis „skaičius“ lygina „i“ reikšmę su jo reikšme (5) po kiekvienos iteracijos.

5. Ciklo korpuse esantis kodas po kiekvienos iteracijos stumia kiekvieną „i“ reikšmę į masyvą, kol „i“ yra mažesnis arba lygus „skaičiui“.

6. Kai dabartinė „i“ reikšmė neatitinka sąlygos, šiuo atveju, kai reikšmė „aš” yra didesnis nei „skaičius” kuris yra 6, kilpa nustoja veikti.

The push() metodas yra integruota JavaScript funkcija, kuri prideda naują elementą į masyvo pabaigą.

Išvestis

[1, 2, 3, 4, 5]

do-while Loop

A do-while kilpa labai panaši į while kilpą; pagrindinis skirtumas tarp while ir do-while kilpa yra ta do-while ciklas užtikrina kodo vykdymą bent vieną kartą prieš įvertinant ciklo būklę; į do-while ciklas turi tokią sintaksę.

do {
  // loop's body
}
while (//condition)

The do-while yra puikus išėjimo valdomos kilpos pavyzdys. Tai slypi tame, kad išėjimo valdomos kilpos suteikia prioritetas į kilpos korpusą prieš bandymo sąlygą, dabar įsigilinkime į praktinį kodo pavyzdį naudojant do-while kilpa.

Pavyzdys:

let i = 1;
let num = 5;

do {
  console.log(i);
  i++;
} while (i <= num);

Dabar išskaidykime šį kodo fragmentą:

1. Mes inicijavome „i” ir „num” kintamuosius.

2. Prieš įvertindama ciklo būklę, konsolė registruoja „i“ (1) reikšmę.

3. Sąlyga patikrinama, o „i“ reikšmė po kiekvienos iteracijos didėja +1.

4. Ciklas baigia savo veiklą, kai „i“ yra didesnis nei „skaičius“.

Išvestis

1
2
3
4
5

nors do-while kilpa yra labai panaši į while kilpa, turime atkreipti dėmesį į subtilius skirtumus; Paimkime kitą pavyzdį, kuriame palyginamas skirtumas tarp while ir do-while kilpa.

let i = 5;
let num = 4

while( i < num)
{
  console.log(i)
}

Tai while aukščiau esantis ciklas nesugrąžins jokio rezultato į konsolę; dabar, kodėl taip yra?

1. Mes inicijavome „i” ir „num” kintamuosius, kurių reikšmės yra atitinkamai 5 ir 4.

2. Sąlyga patikrina, ar „i“ reikšmė yra mažesnė už „skaičius“.

3. Jei tiesa, ji registruoja kiekvieną atitinkamą reikšmę.

4. Kadangi pradinė „i“ reikšmė viršija „num“ reikšmę, ciklas niekada nevyksta.

Dabar paimkime panašų pavyzdį su do-while kilpa.

let i = 5;
let num = 4;

do {
  console.log(i)
}
while ( i < num)

Išvestis

5

The do-while ciklas užtikrina kodo bloko vykdymą, kuris į konsolę grąžina 5, nors iš pradžių „i“ reikšmė yra didesnė nei „num“, tačiau jis vis tiek vieną kartą yra prisijungęs prie konsolės. Šis vaizdas parodo funkcionalumo skirtumą tarp do-while ir while kilpa.

Už Loop

The for loop yra unikalus ciklo tipas ir vienas dažniausiai programuotojų naudojamų kilpų, the for loop yra ciklas, paleidžiantis kodo bloką tam tikrą skaičių kartų, priklausomai nuo sąlygos. Ciklo for sintaksė yra tokia.

for (Expression1...; Expression2....; Expression3...{
     //code block
}

1 išraiška: ši a dalis for loop taip pat žinomas kaip inicijavimas plotas; tai mūsų pradžia for loop ir sritis, kurioje yra apibrėžtas skaitiklio kintamasis. Skaitiklio kintamasis naudojamas stebėti ciklo paleidimo kartų skaičių ir išsaugoti tai kaip reikšmę.

2 išraiška: tai antroji ciklo dalis; ši dalis apibrėžia sąlyginis teiginys, kuris vykdytų kilpą.

3 išraiška: čia kilpa baigiasi; skaitiklio kintamasis šiame skyriuje atnaujina savo vertę po kiekvienos iteracijos padidindamas arba sumažindamas reikšmę, kaip nurodyta sąlygoje.

Pasinerkime į pavyzdį naudodami for kilpą.

for (let i = 0; i < 100; i++) {
    console.log("Hello World" )
}

Iš anksčiau pateikto kodo fragmento išskaidykime jį kartu.

1. Pirmiausia inicijavome skaitiklio kintamąjį „aš” kurios vertė lygi nuliui.

2. Tada sukūrėme sąlyginį teiginį, kad kodas veiktų.

3. „i“ reikšmę palyginome su 100; jei jis išlaiko šį testą, „Hello World“ registruojamas.

4. Šis procesas kartojamas, kol skaitiklis po kiekvienos iteracijos didėja +1.

5. Ciklas baigiasi, kai skaitiklio vertė pasiekia 100.

Išvestis

Hello World
Hello World
Hello World

...

//repeated 97 more times making it 100 "Hello World" in total
...

už kiekvieną kilpą

The for-each kilpa yra „JavaScript“ metodas, kuris keliauja per masyvą ir kiekvienam to masyvo elementui taiko atgalinio skambinimo funkciją; atgalinio skambinimo funkcija yra tiesiog kita funkcija, perduodama kaip parametras į funkciją. Atgalinio iškvietimo funkcija veikia nuosekliai, kai pagrindinė funkcija baigta vykdyti.

Panagrinėkime pagrindinę a sintaksę for-each kilpa.

array.forEach(function(currentValue, index, arr))

Aukščiau pateiktas kodas paaiškina a veikimą for-each kilpa.

• Ši kilpa priima tris parametrus, kurie yra dabartinė reikšmė, indeksas ir masyvas.

• Dabartinė reikšmė reiškia dabartinę masyvo elemento vertę.

• Indeksas yra pasirenkamas parametras, nurodantis dabartinio elemento sunumeruotą vietą tame masyve.

let myArray = [1, 2, 3, 4, 5];

array.forEach((num, index, arr) => {
  arr[index] = num * 2;

  console.log(array);
});

Išskaidykime aukščiau pateiktą pavyzdį:

1. Mes inicijavome masyvą kintamojo pavadinimu „myArray“ ir išsaugojome jį sveikaisiais skaičiais nuo 1 iki 5.

2. The for-each masyvo metodas apima tris parametrus ir masyve taiko atgalinio skambinimo funkciją.

3. Ši linija; arr[index] = num * 2 padaugina dabartinio elemento reikšmę iš 2 ir grąžinamą reikšmę priskiria dabartinio elemento indeksui.

Atkreipkite dėmesį: for-each masyvo metodas negrąžina naujo masyvo; veikiau pakeičia pradinį masyvą ir grąžina jį.

Išvestis

[2, 4, 6, 8, 10]

Kam skirtos… „JavaScript“ kilpoms ir kam…?

The for... in ir for... of kilpos yra labai naudingos, kai reikia kartoti per iteruojamus objektus; kartojami objektai nurodo bet kurį elementą, kurį galima perjungti, įprasti kartojamų objektų pavyzdžiai yra masyvai, eilutės, rinkiniai ir kt.

The for... in ir for... of yra panašūs tuo, kaip jie kartojasi / juda per objektus, pagrindinis skirtumas tarp jų rodomas tame, kaip jie grąžina reikšmes.

už… kilpose

A for... in ciklas yra naudingas, kai reikia išgauti raktą (-us) / ypatybes iš objekto ir atitinkamas jo savybes iš pirminio objekto. The for... in kilpa kartais gali kartotis per objektą kitaip, nei buvo apibrėžta tame konkrečiame objekte; paimkime pavyzdį a for... in kilpa veikiant.

let namesArray = [];

const studentScores = {
John: 60,
Dan: 53,
Tricia: 73,
Jamal: 45,
Jane: 52
}

for(const name in studentScores){
  namesArray.push(name);
}

console.log(namesArray);

Aukščiau pateiktame pavyzdyje apibrėžėme objektą pavadinimu studentų balai kuriame yra keli mokinių vardai ir juos atitinkantys balai. Naudojant for... inmums pavyko gauti tik mokinių vardus, kurie atstovauja raktai objekto studentų balai, ir saugokite juos masyve naudodami push() metodas.

Išvestis

["John", "Dan", "Tricia", "Jamal", "Jane"]

už… iš kilpų

The for... of kilpa yra specialus ciklo tipas, kuris kartoja per kartojamų objektų, pvz., masyvų, eilučių, žemėlapių ir kt., reikšmes, for... of kilpos nesusijusios su objekto raktais ar savybėmis, o rodo tik vertybių prioritetus.

The for... of ciklas negali kartoti įprastų objektų ir išmes klaidą, nes jie negali būti kartojami. Paimkime pavyzdį naudodami for.. of kilpa.

let numArray = [1,2,3,4,5]

for (const value of numArray) {
    console.log(value)
}

// Output =  1,2,3,4,5

Apibendrinant galima pasakyti, kad for... in ir for... of kilpos yra puikus būdas pereiti per kartojamus objektus; pagrindinis skirtumas yra a for... in ciklas grąžina objekto raktą, o for... of ciklas grąžina tik kartojamų objektų reikšmes.

Kas yra begalinė kilpa ir kaip galime jos išvengti?

Begalinis ciklas reiškia kilpą, kuri tęsiasi neribotą laiką; tai atsitinka, kai ciklas neturi apibrėžtos išėjimo sąlygos. Begalinės kilpos yra pavojingos, nes gali sugadinti naršyklę ir sukelti nepageidaujamų veiksmų programoje.

// infinite loop sample
while (true) {
 console.log("keep on running")
}

Kad jūsų programoje nebūtų begalinių kilpų, visada įsitikinkite, kad cikle yra apibrėžta išėjimo sąlyga.

Išvada

Labai dėkojame, kad pasiekėte šio straipsnio pabaigą, „Javascript“ kilpos yra svarbi sąvoka, kurią turi įvaldyti kiekvienas kūrėjas, nes tai labai naudinga kuriant gerą ir optimizuojamą programą. Tikiu, kad su šiuo straipsniu galėsite suprasti kilpų naudojimo programoje pagrindus ir subtilybes.