Операторы while и do while в TypeScript

В этом руководстве вы узнаете, как создать цикл с помощью операторов while и do...while в TypeScript.

Введение

Оператор while позволяет создать цикл, выполняющий блок кода, если условие равно true.

Ниже показан синтаксис оператора TypeScript while :

while(condition) {
    // do something
}

• Оператор while оценивает условие перед каждой итерацией цикла.
• Если condition оценивается как true, while выполняет код, заключенный в фигурные скобки( {} ).
• Когда condition оценивается как false, выполнение продолжается с оператора, следующего за оператором while.

Поскольку while оценивает condition перед выполнением его тела, цикл while также называется циклом предварительного тестирования.

Чтобы преждевременно разорвать цикл на основе другого условия, вы используете if и break :

while(condition) {
    // do something
    // ...

    if(anotherCondition) 
        break;
}

Если вы хотите запустить цикл несколько раз, вы должны использовать оператор TypeScript for.

Примеры оператора while

Давайте рассмотрим несколько примеров использования оператора TypeScript while.

TypeScript while: простой пример

В следующем примере while используется для вывода на консоль числа, если оно меньше 5:

let counter = 0;

while(counter < 5) {
    console.log(counter);
    counter++;
}

Выход:

0
1
2
3
4

Как это устроено:

• Во-первых, объявите переменную counter и инициализируйте ее нулем.
• Затем перед входом в цикл проверьте, меньше ли counter, чем 5. Если это так, выведите counter на консоль и увеличьте его на единицу.
• Наконец, повторите описанный выше шаг, пока counter меньше 5.

Практический пример со списком

Допустим, у вас есть следующий элемент списка в HTML-документе:

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

В следующем примере показано, как использовать while для удаления всех элементов <li> элемента <ul> :

let list = document.querySelector('#list');

while(list.firstChild) {
    list.removeChild(list.firstChild);
}

Как это устроено:

• Сначала выбираем элемент <ul> по его id методом querySelector().
• Затем проверьте, доступен ли firstChild из list, и удалите его. После удаления первого дочернего узла следующий дочерний узел автоматически становится первым дочерним узлом. Поэтому while удаляет все дочерние узлы элемента list.

В следующем разделе вы узнаете, как использовать оператор do...while в TypeScript для создания цикла, который выполняется до тех пор, пока условие не будет оценено как false.

Введение в оператор do…while

Ниже показан синтаксис do...while :

do {
    // do something
} while(condition);

Оператор do...while выполняет операторы в своем теле, окруженном фигурными скобками( {} ), пока condition не станет false.

Оператор do...while всегда выполняет тело цикла хотя бы один раз.

В отличие от while, оператор do...while оценивает condition после каждой итерации цикла, поэтому он называется циклом после тестирования.

Пример оператора TypeScript do…while

В следующем примере do...while используется для вывода чисел от 0 до 9 на консоль:

let i = 0;

do {
    console.log(i);
    i++
} while(i < 10);

Выход:

0
1
2
3
4
5
6
7
8
9

Как это устроено:

• Во-первых, объявите переменную i и инициализируйте ее нулем перед входом в цикл.
• Затем выведите i в консоль, увеличьте его на единицу и проверьте, меньше ли оно, чем 10. Если это так, повторяйте цикл до тех пор, пока i не будет больше или равно 10.

Заключение

• Используйте оператор TypeScript while для создания цикла, который будет выполняться до тех пор, пока условие равно true.
• Используйте do...while в TypeScript для создания цикла , который выполняется до тех пор, пока условие не будет оценено как false.