Ciklo For yra būtinas dalykas programavime, ypač tinklų kūrėjams. Jis leidžia jums iteruoti per masyvus ir pasiekti jų reikšmes. Tačiau su naujomis funkcijomis ES6 iki ES13 yra modernesnė ir kompaktiškesnė sintaksė, kuri ženkliai palengvina gyvenimą. Pažvelkime atidžiau, kaip galite efektyviai ir paprastai naudoti For ciklą savo projektuose.
Svarbiausi pastebėjimai
- Tradicinis For ciklas yra mažiau elegantiškas ir gali būti nepatogus.
- Naudojant ES6 galite naudoti naują for...of ciklą, kuris sutrumpina kodą ir padaro jį skaitomesnį.
- Object.entries() metodas leidžia pasiekti indeksą masyvuose.
Žingsnis po žingsnio vadovas
1 žingsnis: Tradicinis For ciklas
Pradėkime nuo įprasto For ciklo. Jūs deklaruojate masyvą ir norite iteruoti per kiekvieną elementą. Tai daroma taip: nustatote kintamąjį skaitliukui (i), apibrėžiate ciklo sąlygą ir didinate skaitliuką kiekvieno perėjimo metu.
2 žingsnis: Tradicinio For ciklo privalumai
Naudojant tradicinį metodą turite privalumą, kad turite tiesioginį prieigą prie indekso i. Galite manipuliuoti masyvo reikšme ir ją atspausdinti, kas suteikia jums daugiau lankstumo apdorojant jūsų duomenis.
3 žingsnis: let ir const naudojimas
Jei bandysite naudoti const skaitliukui, tai sukels klaidą, nes const reikalauja vienkartinės priskyrimo. Tačiau cikle turite didinti skaitliuką kiekvieno perėjimo metu. Vietoj to naudokite let.
4 žingsnis: Įvadas į for...of ciklą
Dabar pažiūrėkime, kaip atrodo for...of ciklas ES6. Ši sintaksė yra daug elegantiškesnė ir padaro kodą trumpesnį bei lengviau suprantamą.
5 žingsnis: const naudojimas for...of cikle
Puikus for...of ciklo bruožas yra tai, kad galite naudoti const, kad apibrėžtumėte masyvo elementų reikšmes. Tai veikia, nes elementas kiekvieno iteracijos metu yra naujai apibrėžiamas.
6 žingsnis: Prieiga prie indekso
Jei reikia tiek indekso, tiek masyvo reikšmės, galite naudoti Object.entries() metodą. Šis metodas grąžina masyvą iš masyvų, kur kiekvienas vidinis masyvas apima indeksą ir reikšmę.
7 žingsnis: Destruktūrizavimas elegancijai ir skaitomumui
Kodui padaryti dar skaitomesnį, galite naudoti destruktūrizavimo funkciją. Tai reiškia, kad vidinį masyvą suskaidote į du kintamuosius – vieną indekso ir vieną reikšmės.
8 žingsnis: Galutiniai mintys apie for...of ciklą
For...of ciklas yra ypač naudingas, jei jums reikia tik elementų reikšmių. Jis yra kompaktiškas, gerai skaitomas ir elegantiškas. Jei jums taip pat reikia indeksų, derinimas su Object.entries() yra puikus sprendimas.
Suma – For ciklai JavaScript – Paprasta iteracija per masyvus
Šiame vadove išmokote, kaip naudoti tradicinį For ciklą, taikyti elegantiškesnį for...of ciklą ES6 ir kaip su Object.entries() pasiekti indeksą. Šios technikos suteikia jums daugiau lankstumo ir skaitomumo jūsų JavaScript kode.
Dažnai užduodami klausimai
Kaip galiu naudoti For ciklą JavaScript?Jūs deklaruojate ciklą su skaitliuku, nustatote sąlygas ir didinate skaitliuką kiekvieno perėjimo metu.
Koks yra skirtumas tarp for ir for...of?for...of yra naujesnė, trumpesnė sintaksė, kuri leidžia jums tiesiogiai iteruoti per masyvo reikšmes.
Kaip gauti tiek indeksą, tiek reikšmę cikle?Naudokite Object.entries() metodą, kad pasiektumėte abu.
Ar galiu naudoti const for...of cikle?Taip, galite naudoti const, nes kintamasis kiekvieno perėjimo metu yra naujai apibrėžiamas.
Kaip padaryti savo ciklus skaitomesnius?Naudokite destruktūrizavimą, kad aiškiai ir tvarkingai atskirtumėte indeksą ir reikšmę kintamųjų formatu.
