Javascript while, do-while și bucle for. Pentru bucle în JavaScript
Acea indentare poate fi considerată un indicator al complexității codului (deși unul destul de grosier). Indentările în sine sunt neutre, deoarece sunt doar un mijloc de formatare a textului, dar ideea este că sunt folosite pentru a evidenția blocuri speciale de programe, de exemplu, structurile de control. Când citește codul și întâlnește o indentare, programatorul este forțat să țină cont de ceea ce indică indentarea, pentru a ține cont de contextul în care există blocul selectat. Acest lucru, desigur, se repetă dacă un alt fragment special apare în secțiunea indentată a codului.
Dacă nu acordați atenție conținutului textelor, atunci așa arată de obicei codul complex, ale cărui secțiuni arată ca literele „V” aflate pe o parte și codul simplu, al cărui bloc, dacă o faceți nu țin cont de diferitele lungimi ale liniilor, arată ca un dreptunghi.
Cu cât mai multe indentări, cu atât codul este de obicei mai complex.
Construcțiile care trebuie să fie indentate vor fi întotdeauna în cod; nu se vorbește despre a scăpa complet de ele. Totuși, avem puterea de a reduce complexitatea programelor pe care le scriem, alegând rațional abstracții pentru a rezolva problemele cu care ne confruntăm.
Să luăm matrice de exemplu. În mod tradițional, pentru procesarea acestora se folosesc diferite tipuri de cicluri. Conceptele de „matrice” și „buclă” sunt indisolubil legate în mintea multor programatori. Cu toate acestea, ciclul este o construcție foarte ambiguă. Iată ce scrie Louis Atentzio despre bucle în cartea sa Functional Programming in JavaScript: „O buclă este o construcție rigidă de control care nu este ușor de reutilizat și dificil de integrat cu alte operațiuni. De asemenea, folosirea buclelor înseamnă crearea unui cod care se modifică cu fiecare iterație.”
Este posibil să scapi de cicluri?
Ciclul este una dintre principalele structuri structurale de control și, de fapt, nu vom spune că ciclurile sunt un rău de care trebuie scăpat. Scopul nostru principal este de a reduce complexitatea propriului cod, minimizând utilizarea buclelor la procesarea matricelor. Este posibil? Vă invităm să aflați împreună.
Cicluri
Am vorbit deja despre modul în care constructele de control precum buclele adaugă complexitate codului tău. Dar de ce este așa? Să aruncăm o privire la modul în care funcționează buclele în JavaScript.Există mai multe moduri de a organiza buclele în JS. În special, unul dintre tipurile de bază de bucle este while . Înainte de a pătrunde în detalii, să ne pregătim puțin. Și anume, vom crea o funcție și o matrice cu care vom lucra.
// oodlify:: String -> String function oodlify(s) ( return s.replace(//g, "oodle"); ) const input = [ "John", "Paul", "George", "Ringo", ];
Deci, avem o matrice, fiecare element al căruia îl vom procesa folosind funcția oodlify. Dacă utilizați o buclă while pentru a rezolva această problemă, veți obține următoarele:
Fie i = 0; const len = input.length; lasa iesirea = ; in timp ce eu< len) {
let item = input[i];
let newItem = oodlify(item);
output.push(newItem);
i = i + 1;
}
Rețineți că folosim contorul i pentru a urmări elementul de matrice procesat în prezent. Acesta trebuie inițializat la zero și incrementat cu unul la fiecare iterație a buclei. În plus, trebuie să o comparați cu lungimea matricei, cu len, pentru a ști când să nu mai funcționeze.
Acest model este atât de comun încât JavaScript are o modalitate mai ușoară de a face acest lucru: o buclă for. O astfel de buclă va rezolva aceeași problemă după cum urmează:
Const len = input.length; lasa iesirea = ; pentru (fie i = 0; i< len; i = i + 1) {
let item = input[i];
let newItem = oodlify(item);
output.push(newItem);
}
Bucla for este o construcție utilă, deoarece pune toate operațiunile auxiliare standard de contor în partea de sus a blocului. Folosind while , este ușor să uiți de necesitatea de a crește contorul i , ceea ce va duce la o buclă infinită. Bucla for este cu siguranță mult mai convenabilă decât bucla while. Dar haideți să încetinim și să aruncăm o privire la ceea ce încearcă să obțină codul nostru. Dorim să procesăm, folosind funcția oodlify(), fiecare element al matricei și să punem rezultatul într-o matrice nouă. Contorul în sine, folosit pentru a accesa elementele matricei, nu ne interesează.
Acest model de lucru cu matrice, care implică efectuarea anumitor acțiuni asupra fiecărui element, este foarte comun. Drept urmare, ES2015 a introdus un nou design de buclă care vă permite să uitați de contor. Aceasta este o buclă for...of. Fiecare iterație a acestei bucle oferă următorul element al matricei. Arata cam asa:
Fie ieșire = ; pentru (lasă elementul de intrare) (let newItem = oodlify(articol); output.push(newItem); )
Codul pare mult mai curat. Vă rugăm să rețineți că nu există nicio operație de contor sau de comparare. Cu această abordare, nici măcar nu este nevoie să accesați un anumit element de matrice prin index. Bucla for...of se ocupă de toate operațiunile auxiliare.
Dacă ne finalizam studiul despre modalitățile de a lucra cu matrice și de a folosi for...of bucle peste tot în loc de bucle for, acesta va fi deja un bun pas înainte prin simplificarea codului. Dar... putem merge mai departe.
Transformarea tablourilor
Bucla for...of pare mult mai curată decât bucla for, dar are și o mulțime de elemente auxiliare în cod. Deci, trebuie să inițializați matricea de ieșire și să apelați metoda push() în fiecare iterație a buclei. Codul poate fi făcut și mai compact și mai expresiv, dar înainte de a face asta, să extindem puțin problema demonstrației. Ce se întâmplă dacă trebuie să procesați două matrice folosind funcția oodlify()?Const fellowship = [ „frodo”, „sam”, „gandalf”, „aragorn”, „boromir”, „legolas”, „gimli”, ]; const band = [ „John”, „Paul”, „George”, „Ringo”, ];
O soluție complet evidentă este să folosiți două bucle și să procesați matricele din ele:
Lasă bandoodle = ; pentru (lasă elementul benzii) (let newItem = oodlify(element); bandoodle.push(newItem); ) let floodleship = ; pentru (lasă elementul de părtășie) (let newItem = oodlify(element); floodleship.push(newItem); )
O opțiune destul de funcțională. Și codul care funcționează este mult mai bun decât codul care nu rezolvă problema care i-a fost atribuită. Dar două bucăți de cod foarte asemănătoare nu se potrivesc foarte bine cu principiul de proiectare a software-ului DRY. Codul poate fi refactorizat pentru a reduce repetarea.
Urmând această idee, creăm următoarea funcție:
Funcția oodlifyArray(input) (let output = ; for (let item of input) (let newItem = oodlify(element); output.push(newItem); ) return output; ) let bandoodle = oodlifyArray(band); let floodleship = oodlifyArray(fellowship);
Acest lucru arată mult mai bine, dar ce se întâmplă dacă există o altă funcție cu care dorim să procesăm și elemente de matrice?
Funcția izzlify(s) ( return s.replace(/+/g, "izzle"); )
Acum funcția oodlifyArray() nu va ajuta. Totuși, dacă creăm o altă funcție similară, de data aceasta izzlufyArray() , ne vom repeta din nou. Totuși, să creăm o astfel de funcție și să o comparăm cu oodlifyArray() :
Funcția oodlifyArray(input) (let output = ; for (let item of input) (let newItem = oodlify(item); output.push(newItem); ) return output; ) function izzlifyArray(input) (let output = ; for ( lasă elementul de intrare) (let newItem = izzlify(articol); output.push(newItem); ) returnează ieșirea; )
Cele două funcții sunt incredibil de asemănătoare. Poate putem rezuma modelul pe care îl urmează? Scopul nostru este acesta: „Avem o matrice și o funcție. Trebuie să obținem o nouă matrice în care vor fi scrise rezultatele procesării fiecărui element din matricea originală folosind funcția.” Această metodă de procesare a tablourilor se numește „mapping” sau „transformation” (mapping în terminologia engleză). Funcțiile care efectuează astfel de operații sunt de obicei numite „hartă”. Iată cum arată versiunea noastră a unei astfel de funcții:
Harta funcției(f, a) (let output = ; for (let item of a) ( output.push(f(item)); ) return output; )
Deși bucla este acum o funcție separată, nu a fost posibil să scapi complet de ea. Dacă mergi până la capăt și încerci să te descurci complet fără constructe ciclice, poți scrie o versiune recursivă a aceluiași lucru:
Funcție map(f, a) ( dacă (a.lungime === 0) ( return ; ) return .concat(map(f, a.slice(1))); )
Soluția recursivă pare foarte elegantă. Doar câteva linii de cod și un minim de indentare. Dar implementările recursive ale algoritmilor sunt de obicei utilizate cu mare prudență și, de asemenea, suferă de performanță slabă în browserele mai vechi. Și, de fapt, nu trebuie să scriem o funcție pentru a implementa singuri operația de mapare, cu excepția cazului în care există un motiv întemeiat pentru a face acest lucru. Ceea ce face funcția noastră de hartă este o sarcină atât de comună, încât JavaScript are o metodă map() încorporată. Dacă utilizați această metodă, codul va arăta astfel:
Let bandoodle = band.map(odlify); let floodleship = fellowship.map(odlify); let bandizzle = band.map(izzlify); let fellowship = fellowship.map(izzlify);
Observați că nu există deloc indentație sau buclă. Desigur, atunci când procesăm date, undeva în profunzimile JavaScript, pot fi folosite bucle, dar aceasta nu mai este preocuparea noastră. Acum codul este atât concis, cât și expresiv. Mai mult, este mai simplu.
De ce este mai simplu acest cod? Poate părea o întrebare stupidă, dar gândește-te. Este mai simplu pentru că este mai scurt? Nu. Codul compact nu este un semn de simplitate. Este mai simplu, deoarece cu această abordare am împărțit problema în părți. Și anume, există două funcții care funcționează cu șiruri: oodlify și izzlify. Aceste funcții nu trebuie să știe nimic despre matrice sau bucle. Există o altă funcție - harta, care funcționează cu matrice. În același timp, este complet indiferent ce tip de date se află în matrice sau ce anume vrem să facem cu aceste date. Pur și simplu execută orice funcție care i-a fost transmisă, trecându-i elementele matricei. În loc să amestecăm totul, am separat procesarea șirurilor și procesarea matricei. De aceea, codul final s-a dovedit a fi mai simplu.
Convoluția matricei
Deci, funcția de hartă este foarte utilă, dar nu acoperă toate opțiunile de procesare a matricei care folosesc bucle. Este bine în cazurile în care, pe baza unei anumite matrice, trebuie să creați una nouă cu aceeași lungime. Dar dacă avem nevoie, de exemplu, să adunăm toate elementele unui tablou numeric? Sau ce se întâmplă dacă trebuie să găsiți cel mai scurt șir din listă? Uneori trebuie să procesați o matrice și, de fapt, să generați o singură valoare pe baza acesteia.Să ne uităm la un exemplu. Să presupunem că avem o listă de obiecte, fiecare dintre acestea reprezentând un super-erou:
Const eroi = [ (nume: "Hulk", putere: 90000), (nume: "Spider-Man", putere: 25000), (nume: "Hawk Eye", putere: 136), (nume: "Thor", putere: 100000), (nume: „Văduva Neagră”, putere: 136), (nume: „Vision”, putere: 5000), (nume: „Vrăjitoare Stacojie”, putere: 60), (nume: „Mystique”, putere: 120), (nume: "Namora", putere: 75000), ];
Trebuie să găsim cel mai puternic erou. Pentru a face acest lucru, puteți folosi bucla for...of:
Fie cel mai puternic = (putere: 0); pentru (să fie erou al eroilor) ( dacă (erou.putere > cel mai puternic.puter) ( cel mai puternic = erou; ) )
Luând în considerare toate lucrurile, acest cod nu este chiar atât de rău. Facem o buclă prin matrice, stocând obiectul celui mai puternic erou la care ne-am uitat în variabila cea mai puternică. Pentru a vedea mai clar modelul de lucru cu o matrice, să ne imaginăm că trebuie să aflăm și puterea totală a tuturor eroilor.
Fie combinedStrength = 0; pentru (lăsați eroul eroilor) (combinatStrength += hero.strength; )
În fiecare dintre aceste două exemple există o variabilă de lucru care este inițializată înainte de a începe bucla. Apoi, în fiecare iterație, un element al matricei este procesat și variabila este actualizată. Pentru a evidenția și mai bine schema de lucru, vom muta operațiile efectuate în interiorul buclelor în funcții și vom redenumi variabilele pentru a sublinia asemănarea acțiunilor efectuate.
Funcția majoratStrength(campion, contender) ( return (contender.strength > champion.strength) ? contender: champion; ) function addStrength(tally, hero) ( return tally + hero.strength; ) const initialStrongest = (putere: 0); let working = initialStrongest; pentru (eroul eroilor) ( lucru = mai mareForță(lucrând, erou); ) const strongest = lucrător; const initialCombinedStrength = 0; lucru = initialCombinedStrength; for (eroul eroilor) ( lucru = addStrength(working, hero); ) const combinedStrength = work;
Dacă totul este rescris așa cum se arată mai sus, cele două bucle ajung să fie foarte asemănătoare. Singurul lucru care le distinge sunt funcțiile numite în ele și valorile inițiale ale variabilelor. În ambele bucle, matricea este restrânsă la o singură valoare. În terminologia engleză, o astfel de operație se numește „reducere”. Prin urmare, vom crea o funcție reduce care implementează modelul descoperit.
Funcția reduce(f, initialVal, a) ( lasă lucru = initialVal; for (lasă elementul a) (work = f(working, item); ) returnează lucrul; )
Trebuie remarcat faptul că, la fel ca și în cazul modelului de funcție de hartă, modelul de funcție de reducere este atât de răspândit încât JavaScript îl oferă ca o metodă de matrice încorporată. Prin urmare, dacă nu există un motiv special pentru aceasta, nu este nevoie să vă scrieți propria metodă. Folosind metoda standard, codul ar arăta astfel:
Const strongestHero = eroi.reduce(greaterStrength, (force: 0)); const combinedStrength = heroes.reduce(addStrength, 0);
Dacă aruncați o privire mai atentă la rezultatul final, veți constata că codul rezultat nu este cu mult mai scurt decât a fost înainte, economiile sunt foarte mici. Dacă am fi folosit funcția reduce, scrisă noi înșine, atunci, în general, codul ar fi fost mai mare. Totuși, scopul nostru nu este să scriem cod scurt, ci să îi reducem complexitatea. Deci, am redus complexitatea programului? Pot spune că l-au redus. Am separat codul de buclă de codul care procesează elementele matricei. Ca urmare, secțiunile individuale ale programului au devenit mai independente. Codul s-a dovedit mai simplu.
La prima vedere, funcția reduce poate părea destul de primitivă. Cele mai multe exemple ale acestei funcții demonstrează lucruri simple, cum ar fi adăugarea tuturor elementelor matricelor numerice. Cu toate acestea, nicăieri nu spune că valoarea care reduce randamentele trebuie să fie de tip primitiv. Ar putea fi un obiect sau chiar o altă matrice. Când mi-am dat seama prima dată de asta, m-a uimit. Puteți, de exemplu, să scrieți o implementare a unei operații de mapare a matricei sau de filtrare folosind reduce . Vă sugerez să încercați singur.
Matrice de filtrare
Deci, există o funcție de hartă pentru a efectua operații pe fiecare element al matricei. Există o funcție de reducere care vă permite să comprimați o matrice la o singură valoare. Dar ce se întâmplă dacă trebuie doar să extragi unele dintre elementele din matrice? Pentru a explora această idee, să extindem lista de supereroi și să adăugăm câteva date suplimentare acolo:Const eroi = [ (nume: "Hulk", putere: 90000, sex: "m"), (nume: "Spider-Man", putere: 25000, sex: "m"), (nume: "Hawk Eye", putere: 136, sex: "m"), (nume: "Thor", putere: 100000, sex: "m"), (nume: "Văduva Neagră", putere: 136, sex: "f"), (nume : „Vision”, putere: 5000, sex: „m”), (nume: „Scarlet Witch”, putere: 60, sex: „f”), (nume: „Mystique”, putere: 120, sex: „f”) "), (nume: "Namora", putere: 75000, sex: "f"), ]);
Acum să presupunem că există două probleme:
- Găsiți toți eroii de sex feminin.
- Găsiți toți eroii a căror putere depășește 500.
Fie femaleHeroes = ; for (let hero of heroes) ( if (hero.sex === „f”) ( femaleHeroes.push(hero); ) ) las supraoameni = ; pentru (lăsați eroul eroilor) ( dacă (eroul.puterea >= 500) ( superhumans.push(erou); ) )
În general, arată destul de decent. Dar aici un model care se repetă este vizibil cu ochiul liber. De fapt, buclele sunt exact aceleași, diferă doar în blocurile if. Ce se întâmplă dacă punem aceste blocuri în funcții?
Funcția esteFemaleHero(erou) ( return (erou.sex === "f"); ) funcția esteSuperom(erou) ( return (erou.putere >= 500); ) let femaleHeroes = ; for (lasă eroul eroilor) ( dacă (esteFemaleHero(erou)) ( femaleHeroes.push(hero); ) ) lasă supraoamenilor = ; pentru (lăsați eroul eroilor) ( dacă (este Superhuman(erou)) ( superoameni.împinge(erou); ) )
Funcțiile care returnează numai adevărat sau fals sunt uneori numite predicate. Folosim un predicat pentru a decide dacă stocăm următoarea valoare din matricea heroes într-o matrice nouă.
Modul în care am rescris codul l-a făcut mai lung. Dar, după evidențierea funcțiilor predicate, secțiunile repetate ale programului au devenit mai vizibile. Să creăm o funcție care ne va permite să scăpăm de aceste repetări:
Funcția filter(predicat, arr) (let working = ; for (let item of arr) ( if (predicate(element)) (work = working.concat(item); ) ) return working; ) const femaleHeroes = filter(isFemaleHero, eroii); const superhumans = filtru(esteSuperuman, eroi);
Aici, ca și în cazul funcțiilor încorporate de hartă și reducere, JavaScript are același lucru pe care l-am scris aici sub forma unei metode standard de filtrare pe obiectul Array. Prin urmare, nu este nevoie să vă scrieți propria funcție decât dacă este în mod clar necesar. Folosind instrumente standard, codul va arăta astfel:
Const femaleHeroes = heroes.filter(isFemaleHero); const superhumans = heroes.filter(isSuperhuman);
De ce este această abordare mult mai bună decât utilizarea unei bucle for...of? Gândiți-vă cum puteți utiliza acest lucru în practică. Avem o sarcină de genul: „Găsiți toți eroii care...”. Odată ce vă dați seama că puteți rezolva problema folosind funcția standard de filtru, treaba devine mai ușoară. Tot ce trebuie să facem este să spunem acestei funcții ce elemente ne interesează. Acest lucru se face prin scrierea unei funcții compacte. Nu este nevoie să vă faceți griji cu privire la procesarea matricelor sau a variabilelor suplimentare. În schimb, scriem o funcție de predicat minuscul și problema este rezolvată.
Și, ca și în cazul altor funcții care funcționează pe matrice, utilizarea filtrului vă permite să exprimați mai multe informații în mai puțin cod. Nu trebuie să citiți tot codul de buclă standard pentru a vă da seama ce exact filtrem. În schimb, tot ce trebuie să înțelegeți este descris chiar atunci când metoda este apelată.
Căutați în matrice
Filtrarea este o operație foarte utilă. Dar ce se întâmplă dacă trebuie să găsești doar un super-erou din listă? Să presupunem că suntem interesați de Black Widow. Funcția de filtru poate fi folosită pentru a rezolva această problemă:Funcția isBlackWidow(hero) ( return (hero.name === "Black Widow"); ) const blackWidow = heroes.filter(isBlackWidow);
Principala problemă aici este că o astfel de soluție nu este eficientă. Metoda de filtrare trece prin fiecare element al matricei. Cu toate acestea, se știe că în matrice un singur erou se numește Black Widow, ceea ce înseamnă că te poți opri după ce acest erou este găsit. În același timp, funcțiile predicate sunt convenabile de utilizat. Prin urmare, să scriem o funcție de căutare care va găsi și returna primul element potrivit:
Funcția find(predicate, arr) ( for (let item of arr) ( if (predicate(item)) ( return item; ) ) ) const blackWidow = find(isBlackWidow, heroes);
Aici, din nou, trebuie spus că JavaScript are o funcție încorporată care face exact ceea ce este necesar:
Const blackWidow = heroes.find(isBlackWidow);
Drept urmare, ca și înainte, am putut să ne exprimăm ideea mai concis. Folosind funcția de căutare încorporată, sarcina de a căuta un anumit element se reduce la o întrebare: „În ce criterii putem determina că elementul dorit a fost găsit?” Nu trebuie să vă faceți griji pentru detalii.
Despre funcțiile de reducere și filtrare
Cititorii au observat că este ineficient să parcurgeți lista de eroi de două ori în exemplele de mai sus pentru funcțiile de reducere și filtrare. Utilizarea operatorului de împrăștiere de la ES2015 vă permite să combinați convenabil două funcții de pliere a matricei într-una singură. Iată o bucată de cod modificată care vă permite să repetați o singură dată prin matrice:Funcția processStrength((cel mai puternic Hero, combinedStrength), hero) ( return ( strongerHero: greatStrength(strongestHero, erou), combinedStrength: addStrength(combinedStrength, erou), ); ) const (strongest Hero, combinedStrength) = heroes (proces.Strength, erou) : (putere: 0), combinatStrength: 0));
Nu pot să nu observ că această versiune va fi puțin mai complicată decât cea în care matricea a fost parcursă de două ori, dar dacă matricea este uriașă, reducerea numărului de treceri peste ea poate fi foarte utilă. În orice caz, ordinea de complexitate a algoritmului rămâne O(n).
Rezultate
Cred că caracteristicile prezentate aici sunt un exemplu excelent de ce abstracțiile alese cu atenție sunt atât utile, cât și arată bine în cod. Să presupunem că folosim funcții încorporate ori de câte ori este posibil. În fiecare caz, rezultă următoarele:- Scăpăm de bucle, ceea ce face codul mai concis și, cel mai probabil, mai ușor de citit.
- Șablonul utilizat este descris folosind un nume de metodă standard adecvat. Adică mapați, reduceți, filtrați sau găsiți.
- Amploarea sarcinii este redusă. În loc să scrieți cod pentru a procesa singur matricea, trebuie doar să spuneți funcției standard ce să facă cu matricea.
De fapt, dacă te gândești la toate acestea, poți ajunge la o concluzie care, la început, pare surprinzătoare. Se pare că, dacă utilizați numai cele patru modele de procesare a matricei descrise mai sus, puteți elimina aproape toate buclele din codul dvs. JS. La urma urmei, ce se face în aproape fiecare buclă scrisă în JavaScript? Fie procesează, fie construiește o anumită matrice, fie le face pe ambele. În plus, JS are și alte funcții standard pentru lucrul cu matrice, le puteți învăța cu ușurință singur. A scăpa de bucle aproape întotdeauna reduce complexitatea programelor și scrie cod care este mai ușor de citit și întreținut.
Dragi dezvoltatori JavaScript, aveți în minte funcții standard care pot îmbunătăți codul scăpând de unele constructe comune „de casă”?
Etichete: Adăugați etichete
Bucla for este cea mai folosită buclă în JavaScript.
Designul său arată astfel:
Pentru (început; condiție; pas) ( /* corpul buclei */ )
Este foarte simplu. Să ne uităm la un exemplu:
Var i; pentru (i = 1; i
În acest exemplu:
- Începutul ciclului: i = 1 (pornind de la valoarea i = 1)
- Starea ciclului:i
- Pasul de ciclu: i++ (la fiecare pas al buclei i este crescut cu 1)
- Corpul buclei: document.write("
Numărul pasului ciclului este executat: " + "
"); (afișează un mesaj pe ecran)
Algoritm pas cu pas pentru executarea acestei bucle for, mai detaliat:
- Începutul buclei: variabila i este setată la 1. Această parte a buclei este executată o dată.
- Se verifică condiția buclei (i 5) - sfârșitul buclei.
- Corpul buclei este executat.
- Pasul buclei este executat. În cazul nostru i++. Este întotdeauna executat după corpul buclei.
- Reveniți la punctul 2.
Dacă corpul buclei constă dintr-o instrucțiune, atunci bretele {...} nu este necesar să-l punem.
Variabila i nu dispare după terminarea buclei. Continuă să existe și valoarea sa după sfârșitul ciclului va fi egală cu 6.
Să rezumam aceste date într-un nou exemplu:
Var i; pentru (i = 1; i
Aici, bretele nu au fost folosite pentru a crea corpul buclei.
Bretele {...} formați un bloc în JavaScript - acesta este unul dintre constructele limbajului. Adică, dacă există acolade după instrucțiunea bucla for, aceasta înseamnă că handlerul JavaScript trebuie să execute întregul bloc JavaScript.
Similar unui bloc, puteți specifica o funcție într-o buclă for. Iată un exemplu:
Pentru (var i = 1; i
Dar atunci când declarați o funcție, există acolade {...} necesar. Absența lor va duce la o eroare.
Vă rugăm să rețineți că în această buclă variabila i este declarată la începutul buclei: for ( var i = 1; i
Sari peste piese
În general, începutul ciclului nu trebuie scris:
Var i = 1; pentru(;i
Vedeți, la începutul buclei există doar un punct și virgulă, iar bucla funcționează bine.
De asemenea, puteți elimina pasul:
Var i = 1; pentru(;i
Această buclă for s-a transformat într-un analog al buclei while (de exemplu
Puteți pune o expresie într-o condiție care modifică o variabilă.
Pentru (i = 10; i--;) ( document.write("
Se execută pasul buclei: " + i + ".
"); }Deoarece interpretul JavaScript se așteaptă să primească o valoare booleană, orice valoare are ca rezultat un tip boolean, așa că atunci când variabila i devine 0 (falsă) ca urmare a următoarei scăderi, bucla se va opri.
Buclă infinită pentru
Da, da, știu că este corect să scrii infinit :)
Deci, bucla va fi nesfârșită dacă condiția este întotdeauna adevărată. Iată un exemplu:
Pentru (var i = 1; i
În acest exemplu, variabila i va scădea și nu va deveni niciodată mai mare de cinci. Bucla va rula pentru totdeauna. Încercați să rulați acest script. Pentru mine, Chrome „s-a pierdut în gânduri” și nu a afișat nimic pe ecran, dar a continuat să gândească și să gândească.
Aveți grijă să evitați crearea accidentală de bucle nesfârșite.
Întreruperea buclei for
Pentru a întrerupe o buclă for, la fel ca pentru a întrerupe orice altă buclă, utilizați comanda break. Când motorul JavaScript întâlnește o comandă de pauză în corpul unei bucle, oprește executarea buclei și începe să execute instrucțiunile de script care urmează buclei. Dacă există.
În exemplul următor, vom opri bucla la a treia iterație (al treilea pas).
Pentru (var i = 1; i
Să complicăm puțin exemplul
Să efectuăm doar 100 de iterații ale buclei infinite.
Var $contor = 1; pentru (var i = 1; i
Următoarea iterație: continua
Comanda continue încheie iterația curentă și începe următoarea.
Directiva continue este „sora mai mică” a directivei break; oprește doar iterația, și nu întreaga buclă.
Pentru (var i = 1; i
Bucla de mai jos folosește continuare pentru a scoate valori impare:
Pentru (var i = 0; i
Desigur, valorile impare pot fi scoase folosind o buclă ca aceasta fără o directivă continue:
Pentru (var i = 0; i
Directivele break/continuare în „?"
Să descriem pe scurt operatorul semnului de întrebare „?”. Este similar cu un construct if.
Design logic:
Dacă (condiție) ( a(); ) else ( b(); )
Funcționează la fel ca și codul cu operatorul „?”.
Condiție? a() : b(); var i = 2; document.write("
Partea 1.
"); dacă (i == 2) document.write("Condiția a funcționat.
"); else document.write("Condiția nu a funcționat.
"); document.write("Partea 2.
"); i == 2 ? document.write("Condiția a funcționat.
"): document.write("Condiția nu a funcționat.
");Asa de, important, nu puteți folosi pauză/continuare în dreapta operatorului „?”
În JavaScript, constructele sintactice care nu returnează valori sunt interzise să fie folosite în operatorul „?”.
Exemplul de mai jos nu funcționează, conține o eroare:
Pentru (var i = 0; i
Etichete pentru pauză/continuare
Uneori devine necesar să se creeze bucle imbricate. Într-un astfel de caz, în timp ce bucla imbricată rulează, poate fi necesar să opriți bucla părinte sau să opriți iterația buclei părinte. Etichetele sunt folosite pentru aceasta.
Puteți folosi etichete pentru a desemna bucle, apoi utilizați break sau continuați pentru a ieși din buclă sau continuați bucla cu o nouă iterație.
Markerii sunt singura modalitate prin care comenzile de pauză și continuare pot afecta execuția buclei exterioare.
Instrucțiunea de etichetă este utilizată numai împreună cu break sau continuă să ofere o ieșire alternativă dintr-o buclă.
Eticheta are sintaxa „nume:”, numele etichetei trebuie să fie unic. Marcajul este plasat înaintea ciclului, în aceeași linie sau cu o întrerupere de linie.
În mod similar, puteți utiliza directiva break în acest loc. Dar dacă îl folosiți, după cum înțelegeți, execuția ciclurilor se va opri.
Var i, j; metka1: pentru (i = 0; i
JavaScript nu are o declarație goto precum PHP; este posibil să se folosească doar etichete break sau continue.
Etichetele sunt rareori folosite în programarea JavaScript, deoarece se crede că fac codul mai greu de citit și de înțeles. Se recomandă utilizarea funcțiilor la codificare.
Ultima actualizare: 04/08/2018
Buclele vă permit să efectuați o acțiune de mai multe ori în funcție de anumite condiții. JavaScript are următoarele tipuri de bucle:
pentru..in
pentru..de
in timp ce
face în timp ce
pentru buclă
Bucla for are următoarea definiție formală:
Pentru ([inițializarea contorului]; [condiția]; [modificarea contorului])( // acțiuni )
De exemplu, folosim o buclă for pentru a itera elementele unui tablou:
Oameni Var = ["Tom", "Alice", "Bob", "Sam"]; pentru(var i = 0; i Prima parte a declarației buclei - var i = 0 - creează și inițializează contorul - variabila i. Și înainte ca bucla să se execute, valoarea acesteia va fi 0. În esență, aceasta este același lucru cu declararea unei variabile. A doua parte este condiția în care va fi executată bucla. În acest caz, bucla va rula până când valoarea lui i atinge o valoare egală cu lungimea matricei people. Puteți obține lungimea unui tablou folosind proprietatea length: people.length . A treia parte este creșterea contorului cu unul. Și deoarece există 4 elemente în matrice, blocul buclă va rula de 4 ori până când valoarea lui i devine egală cu people.length (adică 4). Și de fiecare dată această valoare va crește cu 1. Fiecare repetare individuală a buclei se numește iterație. Astfel, în acest caz, vor funcționa 4 iterații. Și folosind expresia people[i] putem obține un element de matrice pentru ieșirea ulterioară în browser. Nu este necesar să măriți contorul cu unul; puteți efectua alte acțiuni cu acesta, de exemplu, micșorați-l cu una: Oameni Var = ["Tom", "Alice", "Bob", "Sam"]; for(var i = people.length - 1; i >= 0; i--)( console.log(people[i]); ) În acest caz, matricea este scoasă de la sfârșit, iar matricea este iterată de la i = 3 la i = 0. Bucla for..in este concepută pentru a itera prin matrice și obiecte. Definiția sa formală este: Pentru (index în matrice) ( // acțiuni ) De exemplu, să repetăm elementele matricei: Oameni Var = ["Tom", "Alice", "Bob", "Sam"]; pentru(indexul var în oameni)( console.log(oameni); ) Bucla for...of este similară cu bucla for...in și este concepută pentru a itera prin colecții, cum ar fi matrice: Permite utilizatorilor = [„Tom”, „Bob”, „Sam”]; for(lasa valul utilizatorilor) console.log(val); Elementul de colecție curent care se repetă este plasat în variabila val, a cărei valoare este apoi imprimată pe consolă. Bucla while rulează atâta timp cât o condiție este adevărată. Definiția sa formală este: În timp ce(condiție)( // acțiuni ) Din nou, vom afișa elementele matricei folosind while: Oameni Var = ["Tom", "Alice", "Bob", "Sam"]; var index = 0; în timp ce (index< people.length){
console.log(people);
index++;
}
Bucla while aici se va executa până când valoarea indexului este egală cu lungimea matricei. Într-o buclă do, codul buclei este mai întâi executat, iar apoi condiția din instrucțiunea while este verificată. Și atâta timp cât această condiție este adevărată, ciclul se repetă. De exemplu: Var x = 1; do( console.log(x * x); x++; )while(x< 10)
Aici codul buclei va rula de 9 ori până când x devine 10. Bucla do garantează că acțiunile vor fi executate cel puțin o dată, chiar dacă condiția din instrucțiunea while nu este adevărată. Uneori este necesar să părăsiți o buclă înainte de a se finaliza. În acest caz, putem folosi instrucțiunea break: < array.length; i++)
{
if (array[i] >10) pauză; document.write(matrice[i] + "");
}
Această buclă iterează prin toate elementele matricei, dar ultimele patru elemente nu vor fi afișate în browser, deoarece testul if (array[i] > 10) va întrerupe bucla cu o instrucțiune break atunci când iterarea prin matrice ajunge. elementul 12. Dacă trebuie doar să sărim iterația, dar nu să ieșim din buclă, putem folosi instrucțiunea continue: Var array = [ 1, 2, 3, 4, 5, 12, 17, 6, 7 ]; pentru (var i = 0; i< array.length; i++)
{
if (array[i] >10) continua; document.write(matrice[i] + "");
}
În acest caz, dacă programul întâlnește un număr mai mare de 10 în matrice, atunci acest număr nu va fi afișat în browser. Buclele sunt concepute pentru a executa aceleași instrucțiuni din nou și din nou. Există 4 tipuri de bucle în JavaScript: Sintaxa buclei: Pentru (inițializare; condiție; expresie finală) ( /* corpul buclei */ ) Să ne uităm la un exemplu de buclă care va imprima numerele de la 1 la 9 pe consolă: Var i; // Buclă pentru de la 1 la 9, în pași de 1 pentru (i = 1; i<= 9; i++) {
console.log(i);
}
În acest exemplu: În for, blocul de inițializare este opțional. Var i = 1; // Buclă pentru for (; i<= 9; i++) {
console.log(i);
}
Blocul de condiții într-o buclă for este, de asemenea, opțional. Fără o condiție, bucla va fi executată de un număr infinit de ori. În acest caz, pentru a-l întrerupe (ieși din buclă), trebuie să utilizați instrucțiunea break. Var i; // Buclă for for (i = 1; ; i++) ( dacă (i > 9) ( // condiție pentru întreruperea întreruperii buclei; ) console.log(i); ) Finalul pentru exprimare este, de asemenea, opțional. În acest caz, contorul de bucle poate fi schimbat, de exemplu, în corp. Var i; // bucla pentru for (i = 1; i<= 9 ;) {
console.log(i);
i++;
}
Puteți omite 3 expresii în total: Var i = 1; // Buclă pentru for (; ;) ( if (i > 9) ( break; ) console.log(i); i++; ) Puteți utiliza o expresie goală (;) ca corp al unei bucle for. De exemplu: Var arrA = , arrB = ; pentru (i = 0; i< arrA.length; arrB[i] = arrA / 2) ;
console.log(arrB);
//
Folosind o buclă for pentru a itera elementele matricei: Var arr = , // array i = 0, // counter lenArr = arr.length; // lungimea matricei pentru (i; i< lenArr; i++) {
console.log(arr[i]);
}
În plus, instrucțiunile speciale break and continue pot fi folosite în interiorul corpului buclelor. Instrucțiunea break are scopul de a termina execuția unei bucle. Acestea. iese din bucla curentă și transferă controlul instrucțiunii care o urmează. Instrucțiunea continue întrerupe iterația curentă a buclei și trece la următoarea. Un exemplu în care vom scoate numere impare de la 1 la 11 în consolă: Var i; pentru (i = 1; i <= 11; i++) ( // dacă numărul din variabila i este par, atunci treceți la următoarea iterație dacă (i %2 === 0) ( continua; ) // imprimați valoarea variabilei i către consola console.log(i); ) // 1, 3, 5, 7, 9, 11 Bucla while execută aceleași instrucțiuni (corpul buclei) până când o condiție este adevărată. Adevărul condiției este verificat înainte de fiecare execuție a corpului buclei. Dacă condiția este falsă înainte de prima iterație, atunci bucla nu este executată niciodată. // declarând variabila a și atribuindu-i valoarea 0 var a=0; //buclă while cu condiția a Bucla do...while, ca și bucla while, execută aceleași instrucțiuni (corpul buclei) până când o condiție este adevărată. Dar, spre deosebire de bucla while, în bucla do...while condiția este verificată după fiecare execuție a corpului buclei. Chiar dacă condiția este inițial falsă, corpul buclei va fi încă executat o dată (deoarece condiția este verificată după ce corpul buclei este executat). // declarând variabila a și atribuindu-i valoarea 0 var a=0; //do...while buclă cu condiția a După cum s-a menționat mai sus, bucla for...in este folosită pentru a itera elementele de matrice și proprietățile obiectului. În această lecție ne vom uita doar la sintaxa generală a buclei for...in, dar o vom cunoaște mai detaliat în lecțiile următoare. Modul în care funcționează bucla for...in este că variabila x preia toate numele de proprietate ale obiectului y sau indicii tabloului y . Astfel, în fiecare iterație, o proprietate de obiect sau un element de matrice vă este disponibil. Bucle JavaScript asigura execuția repetată a calculelor repetitive. Ele optimizează procesul de codare prin executarea aceleiași instrucțiuni sau bloc de instrucțiuni care formează corpul unei bucle de un număr specificat de ori (folosind o variabilă contor) sau în timp ce o condiție specificată este adevărată. Buclele iterează peste o secvență de valori. Executarea unei bucle o dată este apelată repetare. Performanța unei bucle este afectată de numărul de iterații și de numărul de operații efectuate în corpul buclei fiecărei iterații. Următorii operatori de buclă există în JavaScript: 1) for este folosit când știi dinainte de câte ori trebuie să faci ceva; Bucla for este folosită pentru a itera elementele matricelor sau obiectelor asemănătoare matricei, cum ar fi argumentele și HTMLCollection. Condiția este verificată înainte de fiecare iterație a buclei. Dacă verificarea are succes, codul din interiorul buclei este executat, în caz contrar codul din interiorul buclei nu este executat și programul continuă din prima linie imediat următoare buclei. Următoarea buclă va imprima linia Bună ziua, JavaScript! Cinci ori. Pentru (var i = 0; i< 5; i++) {
console.log(i + ": Hello, JavaScript!");
}
Bucla for constă din trei operații diferite: Pasul 1. initializare var i = 0; — declararea unei variabile contor care va fi verificată în timpul execuției buclei. Această variabilă este inițializată cu valoarea 0. Cel mai adesea, variabilele numite i, j și k acționează ca contoare de buclă. Pasul 2. verificarea stării i< 5; — условное выражение, если оно возвращает true , тело цикла (инструкция в фигурных скобках) будет выполнено. В данном примере проверка условия идёт до тех пор, пока значение счётчика меньше 5 . Pasul 3. operațiune finală i++ - operație de creștere a contorului, crește valoarea variabilei var i cu unu. În locul operației de creștere, poate fi utilizată și operația de decrementare. La sfârșitul buclei, variabila var i este stocată la 1. Următoarea iterație a buclei este executată pentru (var i = 1; i< 5; i++) { } . Условное выражение вычисляется снова, чтобы проверить, является ли значение счётчика i всё ещё меньше 5 . Если это так, операторы в теле цикла выполняются ещё раз. Завершающая операция снова увеличивает значение переменной на единицу. Шаги 2 и 3 повторяются до тех пор, пока условие i < 5; возвращает true . Pentru a imprima valorile unei matrice folosind o buclă for, trebuie să utilizați proprietatea lungime a matricei. Acest lucru vă va ajuta să determinați numărul de elemente din matrice și să faceți bucla de același număr de ori. Scriptul de mai jos va afișa cinci mesaje cu numele culorilor: Flori var = ["Trandafir", "Crin", "Lalea", "Iasomie", "Orhidee"]; pentru (var i = 0; i< flowers.length; i++){
alert(flowers[i] + " - это цветок.");
}
Dacă valoarea proprietății length nu se modifică în timpul buclei, o puteți stoca într-o variabilă locală și apoi utilizați acea variabilă într-o expresie condiționată. În acest fel, puteți crește viteza buclei, deoarece valoarea proprietății lungime va fi preluată o singură dată pe întreaga durată a buclei. Var flori = ["Trandafir", "Crin", "Lalea", "Iasomie", "Orhidee"], len = flori.lungime; pentru (var i = 0; i Buclele For...in sunt folosite pentru a parcurge proprietățile obiectelor non-matrice. Acest bypass se mai numește și transfer. La traversare, se recomandă utilizarea metodei hasOwnProperty() pentru a filtra proprietățile care au fost moștenite de la prototip. De exemplu, să creăm un obiect folosind un obiect literal. Var user = (nume: „Alice”, vârsta: 25, țara: „Rusia”); pentru (var prop în utilizator) ( console.log(prop + ": " + utilizator); ) Să presupunem că într-un scenariu înainte sau după crearea obiectului utilizator, prototipul obiectului Object a fost extins cu o metodă suplimentară clone(). Dacă (typeof Object.prototype.clone === „nedefinit”) ( Object.prototype.clone = funcție () (); ) Deoarece lanțul de moștenire prototip este verificat în mod constant de către interpret, toate obiectele au acces automat la noua metodă. Pentru a evita detectarea acestei metode în timp ce enumerați proprietățile obiectului utilizator, este utilizată metoda hasOwnProperty(), care va filtra proprietățile prototipului. Var user = (nume: „Alice”, vârsta: 25, țara: „Rusia”); if (typeof Object.prototype.clone === „nedefinit”) ( Object.prototype.clone = funcția () (); ) for (var prop în utilizator) ( if (user.hasOwnProperty(prop)) ( console.log (prop + ": " + utilizator); )) Bucla while este o buclă cu o verificare preliminară a unei expresii condiționate. Declarația din interiorul buclei (bloc de cod între acolade) va fi executată dacă expresia condiționată este evaluată la true . Dacă prima verificare returnează false , blocul de instrucțiuni nu va fi executat nici măcar o dată. După ce se termină iterația buclei, expresia condiționată este din nou testată pentru adevăr și procesul se repetă până când expresia devine false . În acest caz, programul va continua din prima linie imediat după buclă (dacă există una). Această buclă va afișa tabelul de înmulțire pentru numărul 3: Var i = 1; var msg = ""; in timp ce eu< 10) {
msg+= i + " x 3 = " + (i * 3) + " Loop do...while; verifică condiția de continuare după ce bucla este executată. Spre deosebire de bucla while, în do...while; Corpul buclei este executat cel puțin o dată, deoarece condiția este verificată la sfârșitul buclei, și nu la început. Această buclă este utilizată mai rar decât while , deoarece în practică o situație în care este necesară cel puțin o execuție a buclei este rară. Var rezultat = ""; var i = 0; face ( i += 1; rezultat += i + " "; ) în timp ce (i< 5);
document.write(result);
În exemplul următor, instrucțiunile dintr-o buclă sunt executate o dată, chiar dacă condiția nu este adevărată. Var i = 10; do ( document.write(i + " "); i++; ) în timp ce (i< 10);
Când creați orice buclă, puteți crea o buclă infinită care nu se va termina niciodată. O astfel de buclă ar putea continua să ruleze atâta timp cât computerul utilizatorului rulează. Majoritatea browserelor moderne pot detecta acest lucru și pot solicita utilizatorului să oprească rularea scriptului. Pentru a evita crearea unei bucle infinite, trebuie să fii sigur că condiția dată va reveni falsă la un moment dat. De exemplu, următoarea buclă specifică o condiție care nu returnează niciodată false, deoarece nu va fi niciodată mai mică de 10: Pentru (var i = 25; i > 10; i++) ( document.write ("Această propoziție va rula pentru totdeauna... Se numește o buclă în interiorul unei alte bucle cuibărit. Cu fiecare iterație a buclei, bucla imbricată este executată complet. Buclele imbricate pot fi create folosind o buclă for și o buclă while. Pentru (var count = 1; count< 3; count++) {
document.write(count + ". Строка цикла Bucla poate fi controlată folosind instrucțiuni break; și continuă; . Pauza operatorului; încheie execuția buclei curente. Este folosit în cazuri excepționale când bucla nu se poate executa dintr-un motiv oarecare, cum ar fi dacă aplicația întâmpină o eroare. Cel mai adesea operatorul de pauză; face parte din constructul if. Când declarația se rupe; folosit fără etichetă, vă permite să părăsiți o instrucțiune buclă sau switch. Următorul exemplu creează un contor ale cărui valori ar trebui să varieze de la 1 la 99, dar instrucțiunea break întrerupe bucla după 14 iterații. Pentru (var i = 1; i< 100; i++) {
if (i == 15) {
break;
}
document.write(i);
document.write(" Pentru bucle imbricate, instrucțiunea break; folosit cu o etichetă care termină instrucțiunea numită. O etichetă vă permite să părăsiți orice bloc de cod. O instrucțiune numită poate fi orice instrucțiune externă unei instrucțiuni break; . Eticheta poate fi numele unei instrucțiuni if sau numele unui bloc de instrucțiuni cuprinse între acolade doar pentru a atribui o etichetă acelui bloc. Între cuvântul cheie break; iar numele etichetei nu permite o nouă linie. Outerloop: for(var i = 0; i< 10; i++) {
innerloop:
for(var j = 0; j < 10; j++) {
if (j >3) pauză; // Ieși din bucla cea mai interioară dacă (i == 2) întrerupe bucla interioară; // Același lucru dacă (i == 4) break outerloop; // Ieșire din bucla exterioară document.write("i = " + i + " j = " + j + " Operatorul continuă; oprește iterația curentă a buclei și începe o nouă iterație. În acest caz, bucla while revine direct la condiția sa, iar bucla for evaluează mai întâi expresia de increment și apoi revine la condiție. Acest exemplu va afișa toate numerele pare: Var i; pentru(i = 1; i<= 10; i++) {
if (i % 2 !== 0) {
continue;
}
document.write(" Operatorul continuă; poate fi folosit și în bucle imbricate cu o etichetă. Outerloop: for (var i = 0; i "); for (var j = 0; j"); ) ) document.write("Toate buclele finalizate"+" pentru..in
Buclă pentru...de
buclă while
face în timp ce
Continuați și întrerupeți declarațiile
pentru buclă
Părți opționale ale unei bucle for
Exemple de utilizare pentru
Rupeți și continuați instrucțiunile
Buclă cu condiția prealabilă while
Buclă cu do...while postcondition
2) for...in este folosit pentru a parcurge proprietățile obiectelor;
3) while este folosit atunci când nu știi de câte ori trebuie să faci ceva;
4) do...while funcționează în mod similar cu declarația while. Diferența este că do...while execută întotdeauna expresia din interiorul acoladelor cel puțin o dată, chiar dacă testul de condiție returnează false .Tipuri de bucle în JavaScript, control al buclei
1. Pentru buclă
Orez. 1. Rezultatul executării unei bucle for pe consolă1.1. Cum funcționează bucla for
1.2. Imprimarea valorilor matricei
2. Buclă pentru...în
Orez. 2. Rezultatul executării buclei for...in pe consolă
Orez. 3. Rezultatul repetării buclei for...in pe consolă 
Orez. 4. Rezultatul listării proprietăților unui obiect folosind metoda hasOwnProperty().3. bucla while
"; i++; ) document.write(msg); 
Orez. 5. Rezultatul executării buclei while4. Do...while bucla
Orez. 6. Rezultatul executării buclei do...while5. Bucle infinite
");
}
6. Bucle imbricate
"); pentru (var nestcount = 1; nestcount< 3; nestcount++) {
document.write("Строка вложенного цикла
");
}
}
Orez. 7. Rezultatul executării unei bucle for imbricate7. Managementul ciclului
7.1. Pauza operatorului;
");
}
Orez. 8. Rezultatul operatorului break în bucla for
"); ) ) document.write("FINAL i = " + i + " j = " + j + "
");
7.2. Operatorul continuă;
număr par= " + i); ) 
Orez. 9. Rezultatul operatorului continue în bucla for
");
Orez. 10. Rezultatul operatorului de continuare cu o etichetă
