TypeScript while

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

TypeScript while 语句简介

while 语句允许您创建一个循环，只要条件为 true，该循环就会执行一段代码。

以下是 TypeScript while 语句的语法

while(condition) {
    // do something
}Code language: TypeScript (typescript)

while 语句在每次循环迭代之前评估条件。

如果 condition 评估结果为 true，则 while 语句会执行用花括号 ({}) 括起来的代码体。

当 condition 评估结果为 false 时，执行将继续执行 while 语句之后的语句。

由于 while 语句在执行其代码体之前评估 condition，因此 while 循环也称为前测试循环。

要根据另一个条件过早地中断循环，可以使用 if 和 break 语句

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

    if(anotherCondition) 
        break;
}Code language: TypeScript (typescript)

如果要运行循环若干次，则应使用 TypeScript for 语句。

TypeScript while 语句示例

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

TypeScript while：一个简单的示例

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

let counter = 0;

while (counter < 5) {
    console.log(counter);
    counter++;
}
Code language: TypeScript (typescript)

输出

0
1
2
3
4
Code language: TypeScript (typescript)

工作原理

• 首先，声明一个 counter 变量并将其初始化为零。
• 然后，在进入循环之前检查 counter 是否小于 5。如果是，则将 counter 输出到控制台并将其加 1。
• 最后，只要 counter 小于 5，就重复上述步骤。

TypeScript while 循环实用示例

假设您在 HTML 文档上具有以下列表元素

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
Code language: TypeScript (typescript)

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

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

while (list.firstChild) {
    list.removeChild(list.firstChild);
}
Code language: TypeScript (typescript)

工作原理

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

总结

• 使用 TypeScript while 语句创建循环，只要条件为 true，该循环就会运行。