Пояснення кожного типу циклу JavaScript: [With Codeblocks and Examples]

| | 0 Comments| 10:53 AM
Categories:

JavaScript є однією з найбільш використовуваних мов програмування. Розробники, які мають намір стати інженерами JavaScript, повинні вивчити основи циклів, їх типи та принципи роботи.

Цикл JavaScript — це інструмент, який використовується для виконання повторюваних завдань на основі певної умови. З іншого боку, «ітерація» є загальним терміном, що означає повторення в контексті циклу. Цикл продовжуватиме повторюватися, доки не буде виконано умову зупинки.

Щоб краще зрозуміти це, ви можете уявити це як комп’ютеризовану гру, у якій вам пропонують зробити X кроків на північ, а потім Y кроків ліворуч.

Ви можете представити зробити 7 кроків на північ як;

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

коли наведений вище блок коду буде виконано, ви матимете це;

Чому зазвичай використовують петлі?

  • Виконуйте повторювані завдання: ви можете використовувати цикли для виконання інструкцій, доки не будуть виконані певні умови.
  • Перебір об’єктів або масивів: за допомогою циклів ви можете перебирати властивості об’єкта або елементи масиву, дозволяючи виконувати певні дії для кожної властивості або елемента.
  • Фільтрувати дані: Ви можете використовувати цикл для фільтрації даних на основі конкретних умов.

Цикли JavaScript бувають різних форм; For, While, Do…While, For…of, and For…in. Давайте розглянемо їх детально та продемонструємо, як працює кожен.

Для петлі

Цикл for повторюватиметься, доки визначена умова не стане істинною. Цикл for має три необов’язкові вирази, за якими йде блок коду.

for (initialization; condition; finalExpression) {

  // code

}
  • Вираз ініціалізації надходить перед виконанням першого циклу. Цей вираз зазвичай ініціалізує один або більше лічильників.
  • Вираз умови перевіряється щоразу перед виконанням циклу for. Код у циклі або операторі виконується кожного разу, коли вираз отримує значення true. З іншого боку, цикл зупиняється, коли вираз отримує значення false. Однак, якщо вираз пропущено, вираз автоматично матиме значення true.
  • FinalExpression виконується після кожної ітерації циклу. Вираз переважно використовується для збільшення лічильника.
  Виправлення помилок, коли PayPal не може обробити запит

Ви можете використовувати {}, оператор блоку, для групування та виконання кількох операторів. Якщо ви хочете вийти з циклу раніше, перш ніж вираз умови оціниться як false, використовуйте оператор break.

Приклади циклів for з кодом

  • Використовуйте цикл for для повторення;
  • for (let i = 0; i < 7; i++) {
    
      console.log(i);
    
    }

    У цьому блоці коду;

    • Змінна i ініціалізується нулем (нехай i=0).
    • Умова: i повинно бути менше 7 (i=7).
    • Цикл повторюватиметься повторно, якщо значення i менше 7 (i<7>.
    • Ітерація додаватиме 1 до значення i після кожної ітерації (++1).

  • Використовуйте оператор break для виходу з циклу до того, як умова оціниться як false;
  • for (let i = 1; i < 11; i += 2) {
    
      if (i === 9) {
    
        break;
    
      }
    
      console.log('Total developers: ' + i);
    
    }
    • Блок коду повторюється від 1 до 10 (i<11).
    • Цикл ініціалізує змінну i значенням 1 (нехай i = 1).
    • Умова циклу продовжуватиме виконуватися, якщо значення i менше 11 (i < 11).
    • Значення i збільшується на 2 після кожної ітерації (i += 2).

    Оператор if оцінює, чи значення i=9. Якщо умова виконується, оператор break виконується, а цикл завершується.

    (зображення)

    Для… циклу

    Цикл for…of повторює об’єкти, які можна ітерувати, наприклад Map, Array, Arguments і Set. Цей цикл викликає настроюваний хук ітерації з операторами, які виконуються для значення кожної окремої властивості.

    Основною структурою циклу for… є;

    for (variable of object)
    
      statement

    Приклади дії циклу for…of

  • Цикл for…of ітерує масив
  • const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
    
    for (let i of frontendLanguages) {
    
      console.log(i);
    
    }

    У цьому коді;

    • Ми визначаємо масив під назвою frontendLanguages
    • Масив має три елементи; «HTML», «CSS», «JavaScript» і «React».
    • Цикл for…of повторює кожен елемент у frontendLanguages.
    • Знак i у блоці коду приймає значення кожного елемента під час кожної ітерації та значення, надруковані на консолі.

  • Цикл For…of ітерує набір
  • const s = new Set();
    
    s.add(2);
    
    s.add("grey");
    
    for (let n of s) {
    
      console.log(n);
    
    }

    У цьому блоці коду;

    • Ми оголошуємо змінну s, яку призначаємо новому набору за допомогою конструктора Set().
    • Два елементи додаються до коду за допомогою методу add().
    • For….of виконує ітерацію по об’єкту elements.
    • Цикл призначає поточний елемент n перед виконанням оператора console.log(n).

  • Цикл For…of ітерує карту
  • 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);
    
    }

    У цьому блоці коду;

    • Ми використовуємо конструктор Map() для створення нового об’єкта Map.
    • Оголошено змінну m.
    • Використовуючи метод .set(), ми додаємо п’ять пар ключ-значення.
    • Цикл for…of повторює елементи об’єкта Map m.

    Для…в циклі

    Цикл for…in використовується для перебору властивостей об’єкта. Основна структура циклу for…in така:

    for (property in object) {
    
      // code
    
    }

    Ви можете використовувати цикл for…in для перебору масивів і масивоподібних об’єктів.

    const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
    
    for (const vegetable in shoppingList) {
    
      console.log(vegetable);
    
    }

    У цьому блоці коду;

    • Ми представляємо об’єкт JavaScript і називаємо його shoppingList.
    • Ми використовуємо цикл for для повторення кожної властивості в shoppingList за допомогою оператора in.
    • У кожній ітерації цикл призначає поточну назву властивості в shoppingList.

    Поки

    Цикл while оцінює умову, якщо він виявляє, що вона відповідає дійсності, блок коду виконується. Однак, якщо умова хибна, цикл завершується, і блок коду не буде виконано.

    Це базова структура циклу while;

    while (condition)
    
        Statement

    Умова перевірки має виникнути перед виконанням оператора в циклі. Ви можете виконати декілька операторів за допомогою {} або блокових операторів.

    Приклад дії циклу while

    let n = 0;
    
    while (n < 9) {
    
      console.log(n);
    
      n++;
    
    }

    У цьому коді;

    • Змінна n ініціалізується нульовим значенням (нехай n=0).
    • Цикл виконуватиметься, доки значення n менше 9 (n<9)
    • Значення n відображається на консолі та збільшується на 1 після кожної ітерації (n++)
    • Код припинить виконання о 8.

    Цикл Do … While

    Цикл do…while повторюється, доки певна умова не отримає значення false.

    Загальна структура оператора do…while така:

    do
    
      statement
    
    while (condition);

    Оператор виконується один раз, але перед перевіркою умови. Оператор буде виконано, якщо умова істинна. Однак, якщо оцінена умова є хибною, виконання буде зупинено, а керування перейде до оператора після do..while. Код у циклі do…while гарантовано запуститься принаймні один раз, навіть якщо умова оцінюється як істинна.

    Приклад do…while

    let n = 0;
    
    do {
    
      n += 1;
    
      console.log(n);
    
    } while (n < 7);

    У цьому коді;

    • Ми вводимо змінну n і встановлюємо її початкове значення 0 (нехай n=0).
    • Наша змінна n входить у цикл do…while, де її значення збільшується на 1 після кожної ітерації (n+=1)
    • Значення n реєструється.
    • Цикл продовжуватиме виконуватися до тих пір, поки значення n менше 7 (n<7).

    Коли ви запускаєте цей код, консоль показуватиме значення n, починаючи з 1 до 7, коли цикл виконується 7 разів.

    Вкладений цикл

    Вкладений цикл — це ситуація, коли ми маємо цикл усередині циклу. Наприклад, ми можемо мати цикл for, вкладений в інший цикл for.

    for (let outer = 0; outer < 5; outer += 2) {
    
      for (let inner = 0; inner < 6; inner += 2) {
    
        console.log(`${outer}-${inner}`);
    
      }
    
    }
    • Є дві змінні; зовнішній і внутрішній, і обидва ініціалізуються нульовим значенням.
    • Обидві змінні збільшуються на 2 після кожної ітерації
    • Зовнішній і внутрішній цикли повторюються по три рази.

    Оператори керування циклом

    Оператори керування циклом, іноді відомі як «оператори переходу», переривають нормальний хід програми. Break і continue є прикладами операторів керування циклом.

    Розірвати заяви

    Інструкції break негайно завершують цикл, навіть якщо умова не виконана.

    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);
    
    }

    Відтворений код буде виглядати як;

    Продовжте твердження

    Інструкції continue використовуються для пропуску певного блоку коду та виконання ітерації для нового циклу.

    for (let n = 0; n <= 10; n++) {
    
      if (n === 5) {
    
        continue;
    
      }
    
      console.log(n);
    
    }

    Відтворений код буде виглядати як;

    Висновок

    Вище наведено загальні цикли, які ви зустрінете у ванільному JavaScript та його фреймворках/бібліотеках. Як було зазначено, кожен тип циклу має свій варіант використання та різну поведінку. Якщо ви виберете неправильний тип циклу, у вас, швидше за все, виникнуть помилки, і ваш код, швидше за все, відображатиме неочікувану поведінку.

    Якщо ви маєте справу з фреймворком або бібліотекою JavaScript, завжди перевіряйте їх документацію та використовуйте вбудовані цикли.

      8 шаблонів матриці кінцевих зусиль для прийняття обґрунтованого рішення