四时宝库

在 JavaScript 中，当我们想要一种简单的方法来处理重复时，我们会使用循环。 在本文中，我们将了解在代码中创建循环的所有不同方法 - 我们将考虑每种方法的优缺点。

考虑循环的一种方法可能是考虑向机器人发出命令。 你可以告诉它执行 10 个步骤 - 而不是发出 10 个单独的命令，我们可以创建一个循环：

let i;
for (i = 0; i < 10; i++) {
  document.write("Take one step!\n");
}

这是一个 for 循环的例子。 起初，这可能会令人困惑 - 但我们将在下一节中将其全部分解！ 在本文中，我们将回顾许多不同类型的循环语句，例如：for、do...while、while、labeled 语句、break 语句、continue 语句、for...in & for...of。 值得注意的是，尽管它们在语法上有所不同 - 循环基本上都做同样的事情：多次重复一个动作。 这种情况决定了哪种类型的循环最适合。

for 循环

正如我们在上面的例子中看到的，一个 for 循环将重复，直到我们的条件评估为 false。 逻辑结构是这样的：

for ([initialExpression]; [condition]; [incrementExpression])
  statement

我们首先初始化 initialExpression，它通常初始化一个或多个循环计数器，但语法甚至允许更复杂的表达式，例如变量。 我们接下来评估我们的条件，如果为真，循环语句将执行。 如果为假，则循环终止。

然后执行语句。 当我们希望执行多个语句时，我们使用块语句 ({ ... }) 将它们组合在一起。 如果存在，则执行更新表达式 incrementExpression。 然后控制返回到评估条件。

现在让我们回到我们之前的例子：

let i;
for (i = 0; i < 10; i++) {
  document.write("Take one step!\n");
}

在这里，我们可以看到我们的 for 语句正在计算最多为 10 的步数。变量 i 将通过将其初始化为零来确保我们从头开始。 然后它将检查 i 是否小于我们指定的数字，在我们的例子中是 10。 i++ 是在每次通过循环后将 i 增加 1 的计数。 所以我们的循环知道什么时候完成！

do…while 语句

do...while 语句将重复，直到条件评估为假。 结构是这样的：

do
  statement
while (condition);

这是相当不言自明的，语句总是在检查条件之前执行一次。 然后再一次，直到 while 条件返回 false。 我们可以执行多个语句，使用块语句 ({ ... }) 对它们进行分组。 如果条件为真，则语句再次执行。 在每次执行结束时，都会检查条件。 当条件返回 false 时，执行停止，控制权传递给 do...while 后面的语句。

让我们看一个例子：

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

这里我们的 do 循环至少迭代一次，然后重复直到 i 不再小于 10。

while 语句

只要指定条件的计算结果为真，while 语句就会执行其语句。 它的语法如下：

while (condition)
  statement

如果条件变为假，则循环内的语句停止执行，然后控制权传递给循环后面的语句。

条件测试发生在执行循环中的语句之前。 如果条件返回 true，则执行语句并再次测试条件。 如果条件返回 false，则执行将停止并将控制权传递给 while 后面的语句。

和 do...while 一样，我们可以使用块语句 ({ ... }) 执行多个语句，将它们组合在一起。

只要 a 小于 3，下面的 while 循环就会迭代：

let a = 0;
let b = 0;
while (a < 3) {
  a++;
  b+= a;
}

在每次迭代中，循环都会增加 a 并将该值添加到 b。 因此，a 和 b 具有以下值：

• 第一次通过循环后：a = 1 和 b = 1
• 第二遍：a = 2 和 b = 3
• 第三遍：a = 3 和 b = 6

在完成第三遍之后，条件 a < 3 不再为真，因此我们的循环终止了！

注意：当您第一次开始使用循环时，您可能会意外创建一个无限循环。 这是循环条件永远不会评估为假的时候。 以下 while 循环中的语句将永远执行，因为条件永远不会为假：

while (true) {
  console.log('Hi there!');
}

注意：如果您运行此代码 - 请注意它可能会导致您的浏览器崩溃！ 因此，请确保您已备份打开的标签页 - 如果您想看看会发生什么。

label 语句

您可以将标签附加到任何语句以用作标识符，以便您可以在程序的其他地方引用它。 例如，您可以使用标签来标识循环，然后使用 break 或 continue 语句来指示程序是应该中断循环还是继续执行（我们将在下面看看这些）。

label :
   statement

label 的值可以是您喜欢的任何值（JavaScript 保留字除外）。 然后提供要执行的语句。

因此，例如，您可以使用标签 totalLoop 来识别 while 循环。

totalLoop:
while (total == true) {
   doSomething();
}

中断语句

我们使用 break 语句来终止循环或切换，或者与带标签的语句一起使用。

• 当您使用不带标签的 break 时，它会立即终止最内层的 while、do-while、for 或 switch，并将控制权转移到以下语句。
• 当您使用带有标签的 break 时，它会终止指定的标签语句。

break 语句如下所示：

break [label];

例如，让我们遍历一个数组，直到我们找到一个值为：foundMe 的元素的索引

for (let i = 0; i < a.length; i++) {
  if (a[i] == foundMe) {
    break;
  }
}

让我们使用带有标签的语句的中断：

let x = 0;
let z = 0;
endLoops: while (true) {
  console.log('Outer loops: ' + x);
  x += 1;
  z = 1;
  while (true) {
    console.log('Inner loops: ' + z);
    z += 1;
    if (z === 10 && x === 10) {
      break endLoops;
    } else if (z === 10) {
      break;
    }
  }
}

continue 语句

我们使用 continue 语句重新启动 while、do-while、for 或 label 语句。

当您使用不带标签的 continue 时，它会终止最里面的 while、do-while 或 for 语句的当前迭代，并在下一次迭代中继续执行循环。 这与 break 语句形成对比，因为 continue 不会完全终止循环的执行。 在 while 循环中，它跳回到条件。 在 for 循环中，它跳转到初始表达式。 当您对标签使用 continue 时，它适用于使用该标签标识的循环语句。

continue 语句如下所示：

continue [label];

例如，以下代码块显示了一个带有 continue 语句的 while 循环，该语句将在 i 的值为 3 时执行。 所以 n 取值 1、3、7 和 12。

let i = 0;
let n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
  console.log(n);
}
// 1,3,7,12
let i = 0; 
let n = 0; 
while (i < 5) { 
  i++; 
  if (i == 3) { 
     // continue; 
  } 
  n += i; 
  console.log(n);
}
// 1,3,6,10,15

for...in 语句

for...in 语句在对象的所有可枚举属性上迭代指定变量。 对于每个不同的属性，JavaScript 执行指定的语句。 语法如下：

for (variable in object) {
  statements
}

以下函数将对象和对象名称作为其参数。 然后它遍历对象的所有属性并返回一个列出属性名称及其值的字符串。

function get_names(obj, obj_name) {
  let result = '';
  for (let i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
  }
  result += '<hr>';
  return result;
}

对于具有午餐和晚餐属性的对象食物，结果将是：

food.lunch = Sandwich
food.dinner = Lasagna

注意：鉴于 for...in 是为迭代对象属性而构建的，因此不建议将其与数组一起使用——其中索引顺序很重要。 对于数组，最好使用更传统的 for 循环。

for...of 声明

for ... of 语句创建一个循环，该循环遍历可迭代对象，例如 Array、Map、Set、arguments 等。 语法是这样的：

for (variable of object) {
  statement
}

下面的示例显示了 for...of 循环和 for ... in 循环之间的区别。 虽然 for...in 迭代属性名称，但 for...of 迭代属性值：

let arr = [10, 20, 30];
arr.greet = 'hello';
for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "greet"
}
for (let i of arr) {
   console.log(i); // logs 10, 20, 30
}

概括

我们已经了解了许多不同的循环语句，例如：for、do...while、while、labeled 语句、break 语句、continue 语句、for..in 和 for...of。 我们已经查看了一些示例，这些示例突出了每种循环的理想用例。 无论我们选择使用哪种语句，我们现在都可以很好地为我们的程序添加逻辑和推理。

关注七爪网，获取更多APP/小程序/网站源码资源！