ЈаваСцрипт је један од најчешће коришћених програмских језика. Програмери који намеравају да постану ЈаваСцрипт инжењери морају да науче основе петљи, њихове типове и како функционишу.
ЈаваСцрипт петља је алатка која се користи за обављање поновљених задатака на основу одређеног услова. С друге стране, ‘итерација’ је генерички термин, што значи понављање у контексту петље. Петља ће наставити да се понавља све док се не испуни услов заустављања.
Да бисте је боље разумели, можете је замислити као компјутеризовану игру у којој вам се налаже да направите Кс корака ка северу, а затим И корака улево.
Можете представити 7 корака ка северу као;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
када се изврши горњи блок кода, имаћете ово;
Преглед садржаја
Зашто се обично користе петље?
- Извршите задатке који се понављају: Можете користити петље за извршавање инструкција док се не испуне одређени услови.
- Итерација преко објеката или низова: Са петљама, можете итерирати својства објекта или елемената низа, омогућавајући вам да извршите одређене радње за свако својство или елемент.
- Филтрирање података: Можете користити петљу за филтрирање података на основу специфичних услова.
ЈаваСцрипт петље долазе у различитим облицима; Фор, Вхиле, До…Вхиле, Фор…оф, анд Фор…ин. Хајде да их детаљно истражимо и покажемо како сваки функционише.
За петљу
Петља фор ће се понављати све док се одређени услов не процени као тачан. Петља фор има три опциона израза, праћена блоком кода.
for (initialization; condition; finalExpression) {
// code
}
- Иницијализацијски израз долази пре него што се изврши прва петља. Овај израз обично иницијализује један или више бројача.
- Израз услова се проверава сваки пут пре него што се фор петља покрене. Код у петљи или наредби се извршава сваки пут када се израз процени као тачан. С друге стране, петља се зауставља када се израз процени као нетачан. Међутим, ако је израз изостављен, израз ће аутоматски бити тачан.
- ФиналЕкпрессион се извршава након сваке итерације петље. Израз се углавном користи за повећање бројача.
Можете да користите {}, блок наредбу, да групишете и извршите више наредби. Ако желите да изађете из петље раније пре него што израз услова процењује на нетачно, користите наредбу бреак.
Примери фор петљи са кодом
for (let i = 0; i < 7; i++) {
console.log(i);
}
У овом блоку кода;
- Променљива и је иницијализована на нулу (нека је и=0).
- Услов је да и треба да буде мањи од 7 (и=7).
- Петља ће се понављати ако је вредност и мања од 7 (и<7>.
- Итерација ће додати 1 вредности и након сваке итерације (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- Блок кода се понавља од 1 до 10 (и<11).
- Петља иницијализује променљиву и са вредношћу 1 (нека је и = 1).
- Услов петље ће наставити да се извршава ако је вредност и мања од 11 (и < 11).
- Вредност и се повећава за 2 после сваке итерације (и += 2).
Наредба иф процењује да ли је вредност и=9. Ако је услов тачан, наредба бреак се извршава, а петља се завршава.
(слика)
Фор…оф петље
Петља фор…оф врши итерацију преко итеративних објеката као што су мапа, низ, аргументи и скуп. Ова петља позива прилагођену закачицу итерације са изјавама које се извршавају за вредност сваког различитог својства.
Основна структура фор… петље је;
for (variable of object) statement
Примери фор…оф петље у акцији
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
У овом коду;
- Дефинишемо низ под називом фронтендЛангуагес
- Низ има три елемента; „ХТМЛ“, „ЦСС“, „ЈаваСцрипт“ и „Реацт“.
- Петља фор…оф понавља сваки елемент у фронтендЛангуагес.
- И у блоку кода преузима вредност сваког елемента током сваке итерације и вредности штампане на конзоли.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
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);
}
У овом блоку кода;
- Користимо Мап() конструктор за креирање новог објекта Мап.
- Декларисана је променљива м.
- Користећи .сет() метод, додајемо пет парова кључ/вредност.
- Петља фор…оф понавља елементе објекта Мап м.
За…у петљи
Петља фор…ин се користи за понављање својстава објекта. Основна структура фор…ин петље је;
for (property in object) {
// code
}
Можете да користите фор…ин петљу за понављање низова и објеката сличних низу.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
У овом блоку кода;
- Представљамо ЈаваСцрипт објекат и именујемо га схоппингЛист.
- Користимо фор петљу за понављање сваке особине на схоппингЛист користећи ин оператор.
- У свакој итерацији, петља додељује тренутно име својства на листи куповине.
Док
Док петља процењује услов, ако утврди да је истинит, блок кода се извршава. Међутим, ако је услов нетачан, петља се завршава, а кодни блок неће бити извршен.
Ово је основна структура вхиле петље;
while (condition) Statement
Услов тестирања мора се појавити пре извршења наредбе у петљи. Можете извршити више наредби користећи {} или блок наредбе.
Пример вхиле петље у акцији
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
У овом коду;
- Променљива н је иницијализована са нултом вредношћу (нека је н=0).
- Петља ће се извршавати све док је вредност н мања од 9 (н<9)
- Вредност н се приказује на конзоли и повећава за 1 после сваке итерације (н++)
- Код ће престати да се извршава у 8.
Урадите … Вхиле Лооп
До…вхиле петља се понавља све док се одређени услов не процени као нетачан.
Општа структура до…вхиле наредбе је;
do statement while (condition);
Наредба се извршава једном, али пре провере услова. Наредба ће се извршити ако је услов тачан. Међутим, ако је процењени услов лажан, извршење ће се зауставити, а контрола прелази на наредбу после до..вхиле. Код у до…вхиле петљи је загарантовано да ће се покренути најмање једном, чак и ако је услов тачан.
Пример до…вхиле
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
У овом коду;
- Уводимо променљиву н и постављамо њену почетну вредност као 0 (нека је н=0).
- Наша променљива н улази у до…вхиле петљу где се њена вредност повећава за 1 после сваке итерације (н+=1)
- Вредност н се бележи.
- Петља ће наставити да се извршава све док је вредност н мања од 7 (н<7).
Када покренете овај код, конзола ће приказати вредности н почевши од 1 до 7 док се петља извршава 7 пута.
Нестед Лооп
Угнежђена петља је ситуација у којој имамо петљу унутар петље. На пример, можемо имати фор петљу угнежђену унутар друге фор петље.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Постоје две варијабле; спољашњи и унутрашњи и оба су иницијализована вредношћу нула.
- Обе варијабле се повећавају за 2 након сваке итерације
- Спољна и унутрашња петља се понављају три пута.
Контролни искази петље
Контролни искази петље, понекад познати као „изјаве о скоку“, прекидају нормалан ток програма. Прекид и наставак су примери наредби за контролу петље.
Бреак изјаве
Наредбе Бреак одмах прекидају петљу, чак и ако услов није испуњен.
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);
}
Рендеровани код ће се појавити као;
Наставите са изјавама
Наредбе Цонтинуе се користе да се прескочи одређени блок кода и изврши итерација за нову петљу.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Рендеровани код ће се појавити као;
Закључак
Изнад су уобичајене петље на које ћете наићи у ванилла ЈаваСцрипт-у и његовим оквирима/библиотекама. Као што је истакнуто, сваки тип петље има свој случај употребе и различита понашања. Ако изаберете погрешан тип петље, вероватно ћете имати грешке, а ваш код ће вероватно приказати неочекивано понашање.
Ако имате посла са ЈаваСцрипт оквиром или библиотеком, увек проверите његову документацију и користите уграђене петље.