# while

原文地址 (opens new window)

在本教程中,你将学习如何使用 TypeScript 中的 while 语句创建循环语句。

# TypeScript 中的 while 语句介绍

while 语句允许你创建一个循环,只要条件为 true 的时候就会执行给定的代码。下面是 TypeScript 中的 while 语句的语法:

while (condition) {
  // do something
}
1
2
3

while 语句会在每次循环迭代前计算 condition 的值:

  • 如果 condition 的值为 truewhile 语句将执行其循环体中的代码;
  • 如果 condition 计算结果为 false ,跳出循环,执行 while 循环语句后面的语句。

由于 while 语句是在执行循环体前计算 condition 的值,它也被称为预测循环。

可以使用 ifbreak 语句,在某些条件成立的时候,中断循环:

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

  if (anotherCondition) break;
}
1
2
3
4
5
6

如果希望执行特定次数的循环,可以使用 TypeScript 中的 for 循环语句。

# while 语句例子

让我们看几个 TypeScript 中的 while 语句的案例。

# 一个简单的 while 语句案例

下面的例子使用 while 语句来判断当 counter 小于 5 的时候,把它的值输出到控制台上:

let counter = 0;

while (counter < 5) {
  console.log(counter);
  counter++;
}
1
2
3
4
5
6

输出:

0
1
2
3
4
1
2
3
4
5

它是这样工作的:

  • 首先,声明 counter 变量,并把它的值初始化为 0
  • 然后,在进入循环之前检查一下 counter 的值是否小于 5,如果是的话输出 counter 的值,并把它的值加一;
  • 最后,当 counter 小于 5 的时候,重复执行上面的步骤。

# while 语句项目实战

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

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

下面的例子展示了如果使用 while 语句移除 <ul> 元素上所有的 <li> 元素:

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

while (list.firstChild) {
  list.removeChild(list.firstChild);
}
1
2
3
4
5

它是这样工作的:

  • 首先,通过 id 变量和 querySelector() 方法查找出 <ul> 元素;
  • 接下来,检查 list 元素的 firstChild 第一个子节点是否存在,如果存在则把它删除。当第一个子节点被删除的时候,下一个子节点将自动提升成第一个子节点。因此,使用这个 while 循环语句可以删除掉 list 元素上的所有子节点。

# 小结

  • 使用 TypeScript 中的 while 语句来创建一个只要条件为 true 的时候就会一直执行的循环。