TypeScript while

摘要：在本教程中，你将学习如何使用 TypeScript while 语句创建循环。

TypeScript while 语句简介

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 语句。

让我们举一些使用 TypeScript while 语句的示例。

下面的示例使用 while 语句将一个数字输出到控制台，只要该数字小于 5：

let counter = 0;

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

输出：

怎么运行的：

假设 HTML 文档中有以下列表元素：

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

以下示例显示如何使用 while 语句删除 <ul> 元素中的所有 <li> 元素：

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

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

怎么运行的：

首先，使用 querySelector() 方法按 id 选择 <ul> 元素。
然后，检查 list 的 firstChild 是否可用并将其删除。一旦第一个子节点被删除，下一个子节点将自动提升为第一个子节点。因此，while 语句删除了 list 元素的所有子节点。