07 Типы циклов в JavaScript

В этом посте мы рассмотрим различные способы циклов в JavaScript, конечно, с помощью примеров. Итак, в основном, в JavaScript существуют следующие основные типы циклов:

  • for
  • while
  • do-while
  • forEach()
  • map()
  • for-of
  • for-in

1. Цикл for в JavaScript

Цикл for в JavaScript повторяет блок кода несколько раз.

Синтаксис

for (initialCondition; condition; updateExpression) {
     // code block
}
Войти в полноэкранный режим Выйти из полноэкранного режима

initialCondition выполняется 1 раз перед выполнением блока кода, condition определяет условие для выполнения блока кода, а updateExpression выполняется каждый раз после выполнения блока кода.

Пример

Давайте выполним цикл по массиву автомобилей

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

for (let car = 0; car < cars.length; car++) {
     console.log(cars[car])
}
Вход в полноэкранный режим Выйти из полноэкранного режима

2. Цикл while в JavaScript

Цикл while в JavaScript выполняет цикл выполнения блока кода, пока заданное условие истинно.

Синтаксис

while (condition) {
     // code block
}
Войти в полноэкранный режим Выйти из полноэкранного режима

В приведенном ниже примере код в цикле будет выполняться снова и снова, пока длина массива cars не будет исчерпана.

Пример

Перебираем в цикле массив автомобилей

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

let car = 0;

while (car < cars.length) {
     console.log(cars[car])
     car++
}
Вход в полноэкранный режим Выйти из полноэкранного режима

3. Цикл do-while в JavaScript

Цикл do-while в JavaScript также выполняет цикл перебора блока кода, пока заданное условие истинно. Цикл do-while очень похож на цикл while. Но единственное отличие заключается в том, что этот цикл проверяет условия, доступные после проверки оператора. Таким образом, он является примером типа Exit Control Loop.

Синтаксис

do {
     // code block
} while (condition)
Войти в полноэкранный режим Выход из полноэкранного режима

Пример

Давайте выполним цикл по массиву автомобилей

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

let car = 0;

do {
     console.log(cars[car])
     car++
} while (car < cars.length)
Войти в полноэкранный режим Выйти из полноэкранного режима

4. Цикл forEach в JavaScript

Метод forEach вызывает функцию для каждого элемента массива, и метод не выполняется для пустых элементов.

Синтаксис

array.forEach(function(currentValue, index, arr))
Войти в полноэкранный режим Выйти из полноэкранного режима

Пример

Перебираем массив автомобилей

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

cars.forEach((car) => {
     console.log(ele)
})
Войти в полноэкранный режим Выйти из полноэкранного режима

5. Цикл map в JavaScript

Цикл map в JavaScript создает новый массив из вызова функции для каждого элемента массива. Он вызывает функцию один раз для каждого элемента массива, не выполняет функцию для пустых элементов, а также не изменяет исходный массив.

Синтаксис

array.map(function(currentValue, index, arr), thisValue)
Войти в полноэкранный режим Выйти из полноэкранного режима

Пример

Перебираем массив автомобилей

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

const newCars = cars.map((car) => {
     return car.toUpperCase()
})
Войти в полноэкранный режим Выйти из полноэкранного режима

6. Цикл for-of в JavaScript

Цикл for-of в JavaScript перебирает значения массива.

Синтаксис

for (element of iterable) {
     // code block
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Здесь элемент представляет собой итерируемый объект (массив, набор, строка и т.д.). В то время как iterable представляет элементы в итерируемом объекте.

Пример

Перебираем массив автомобилей

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

for (car of cars) {
     console.log(car)
}
Войти в полноэкранный режим Выйти из полноэкранного режима

7. Цикл for-in в JavaScript

Цикл for-in в JavaScript перебирает свойства объекта.

Синтаксис

for (key in object) {
     // code block
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Пример

Перебираем массив автомобилей

const cars = {1:"Mehran", 2:"GLi", 3:"Yaris", 4:"Civic", 5:"City"}

for (let carKey in cars) {
     console.log(cars[carKey])
}
Войти в полноэкранный режим Выход из полноэкранного режима

Цикл for-in выполняет итерации над объектом cars. Каждая итерация возвращает ключ, carKey. Ключ используется для доступа к значению ключа, и возвращается значение ключа, т.е. cars[carKey].

Я знаю, что это довольно длинная статья, но если она покажется вам интересной и полезной, поделитесь ею и дайте ей 💖.

Оцените статью
devanswers.ru
Добавить комментарий