Как да използвате цикли в JavaScript

Циклирането ви позволява да преглеждате всеки елемент в масив, така че да можете да персонализирате и извеждате всеки от тях, както желаете. Както при всеки език за програмиране, циклите също са важен инструмент за изобразяване на масиви в JavaScript.

С помощта на някои практически примери, нека се потопим по -задълбочено в различните начини, по които можете да използвате цикли в JavaScript.

Инкременталното и декременталното за цикъл в JavaScript

Постепенното за loop е основата на итерацията в JavaScript.

Той приема начална стойност, присвоена на променлива, и изпълнява проста проверка на условна дължина. След това увеличава или намалява тази стойност с помощта на ++ или -- оператори.

Ето как изглежда общият му синтаксис:

for (var i = начална стойност; i масив [i]}

Сега нека повторим масив, използвайки горния основен синтаксис:

anArray = [1, 3, 5, 6];
for (нека i = 0; i console.log (anArray [i])
}
Изход:
1
3
5
6 

Сега ще работим с всеки елемент в горния масив, използвайки JavaScript за цикъл:

anArray = [1, 3, 5, 6];
for (нека i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Изход:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Цикълът итерира през масива постепенно с ++ оператор, произвеждащ подреден изход.

Но използвайки отрицателното (--), можете да обърнете изхода.

Синтаксисите са еднакви, но логиката е малко по -различна от горния цикъл на нарастване.

Ето как работи декременталният метод:

anArray = [1, 3, 5, 6];
for (нека i = anArray.length-1; i> = 0; аз-) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Изход:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Логиката зад горния код не е пресилена. Индексирането на масиви започва от нула. Така че се обажда anArray [i] обикновено се повтаря от индекс нула до три, тъй като горният масив съдържа четири елемента.

По този начин премахването на едно от дължината на масива и поставянето на условието на по -голяма или равна на нула, както направихме, е доста удобно - особено когато използвате масива като основа на вашата итерация.

Той поддържа индекса на масива с единица по -малък от дължината му. Условието i> = 0 след това принуждава броенето да спре на последния елемент в масива.

Свързани: Методи на JavaScript масив, които трябва да овладеете днес

JavaScript forEach

Въпреки че не можете да намалите с помощта на JavaScript за всеки, често е по -малко подробно от суровото за цикъл. Той работи, като избира един елемент след друг, без да запаметява предишния.

Ето общия синтаксис на JavaScript за всеки:

array.forEach (елемент => {
действие
})

Вижте как работи на практика:

нека anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Изход:
1
3
5
6 

Сега използвайте това, за да изпълните проста математическа операция за всеки елемент, както направихте в предишния раздел:

нека anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Изход:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Как да използвате for... in Loop на JavaScript

The за... в цикъл в JavaScript се повтаря през масив и връща неговия индекс.

Ще ви бъде лесно да го използвате за... в ако сте запознати Python for цикъл тъй като те са сходни по отношение на простотата и логиката.

Обърнете внимание на общия му синтаксис:

for (нека елемент в масив) {
действие 
}

Така че за... в цикъл присвоява всеки елемент в масив на променливата (елемент), обявена в скобите.

По този начин регистрирането на елемента директно в цикъла връща индекс на масив, а не самите елементи:

нека anArray = [1, 3, 5, 6];
for (нека аз в anArray) {
console.log (i)
}
Изход:
0
1
2
3 

За да изведете всеки елемент вместо това:

нека anArray = [1, 3, 5, 6];
for (нека аз в anArray) {
console.log (anArray [i])
}
Изход:
1
3
5
6 

Както направихте, когато използвате декрементален цикъл, също е лесно да обърнете изхода с помощта за... в:

нека anArray = [1, 3, 5, 6];
// Премахване на един от дължината на масива и присвояване на променлива:
нека v = anArray.length - 1; 
// Използвайте горната променлива като база за индекс, докато итератирате надолу по масива:
for (нека аз в anArray) {
console.log (anArray [v])
v -= 1;
}
Изход:
6
5
3
1 

Горният код е логически подобен на това, което сте направили, докато сте използвали декременталния цикъл. Той обаче е по -четим и изрично очертан.

JavaScript за... на Loop

The за... от цикъл е подобен на за... в цикъл.

Въпреки това, за разлика за... в, той не се повтаря през индекса на масива, а самите елементи.

Общият му синтаксис изглежда така:

for (нека аз на масив) {
действие 
}

Нека използваме този цикличен метод за повторение на масив постепенно, за да видим как работи:

нека anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log (i)
}
Изход:
1
3
5
6 

Можете също да използвате този метод за повторение на масива и обратно на изхода. Подобно е на начина, по който го правите с помощта за... в:

нека anArray = [1, 3, 5, 6];
нека v = anArray.length - 1;
for (нека x на anArray) {
console.log (anArray [v])
v -= 1;
}
Изход:
6
5
3
1

За да работите в рамките на цикъла:

нека anArray = [1, 3, 5, 6];
нека v = anArray.length - 1;
for (нека x на anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Изход:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Цикълът „Докато“

The докато цикъл работи непрекъснато, докато определено условие остава вярно. Често се използва като безкраен цикъл.

Например, тъй като нулата винаги е по -малка от десет, кодът по -долу работи непрекъснато:

нека i = 0;
докато (i <10) {
console.log (4)
}

Горният код регистрира "4" безкрайно.

Нека повторим през масив, използвайки докато цикъл:

нека i = 0;
while (i console.log (anArray [i])
i += 1
}
Изход:
1
3
5
6 

JavaScript прави... докато Loop

The направи... докато loop приема и изпълнява набор от действия изрично в a направете синтаксис. След това се посочва условието за това действие вътре в докато цикъл.

Ето как изглежда:

направете {
действия
}
докато (
съзнание
)

Сега нека повторим масив, използвайки този метод на цикъл:

направете {
console.log (anArray [i])
i += 1
}
докато (
i )
Изход:
1
3
5
6 

Запознайте се с JavaScript цикли

Въпреки че тук сме подчертали различните методи на циклиране на JavaScript, овладяването на основите на итерацията в програмирането ви позволява да ги използвате гъвкаво и уверено във вашите програми. Въпреки това, повечето от тези цикли на JavaScript работят по същия начин, само с няколко разлики в общите им очертания и синтаксиси.

Циклите обаче са в основата на повечето рендиране на масиви от страна на клиента. Така че не се колебайте да ощипвате тези циклични методи, колкото искате. Използването им с по -сложни масиви, например, ви дава по -добро разбиране на циклите на JavaScript.

Как да използваме JavaScript изявлението if-else

Изявлението if-else е първата ви стъпка към програмиране на логиката във вашите приложения.

Прочетете Напред

За автора