编写程序时，我们经常需要重复执行某些操作，这时候循环结构就显得非常有用。JavaScript 提供了多种循环结构，以适应不同的编程场景。以下是 JavaScript 中常见的循环结构：

for 循环

for 循环是最常见的循环结构之一，它允许我们指定循环开始前的初始化代码、循环继续的条件以及每次循环结束时要执行的代码。

基本语法

for (初始化表达式; 循环条件; 循环后的操作表达式) {
    // 循环体代码
}

示例：输出 1 到 10 的数字

for (var i = 1; i <= 10; i++) {
    console.log(i);
}

while 循环

while 循环在给定条件为真时将不断循环执行代码块。与 for 循环不同，while 循环只有循环条件，没有初始化和迭代表达式。

基本语法

while (条件) {
    // 循环体代码
}

示例：使用 while 循环输出 1 到 10 的数字

var i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

do...while 循环

do...while 循环和 while 循环类似，但它至少会执行一次循环体，无论条件是否为真。

基本语法

do {
    // 循环体代码
} while (条件);

示例：使用 do...while 循环输出 1 到 10 的数字

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

for...in 循环

for...in 循环用于遍历对象的属性。

基本语法

for (var key in 对象) {
    // 使用 key 访问对象属性
}

示例：遍历对象的属性

var person = {
    name: "张三",
    age: 30,
    job: "软件工程师"
};

for (var key in person) {
    console.log(key + ": " + person[key]);
}

for...of 循环

for...of 循环用于遍历可迭代对象（如数组、字符串等）的元素。

基本语法

for (var item of 可迭代对象) {
    // 使用 item 访问元素
}

示例：遍历数组的元素

var fruits = ["苹果", "香蕉", "橘子"];
for (var fruit of fruits) {
    console.log(fruit);
}

总结

JavaScript 的循环结构为我们提供了强大的工具来处理重复任务。for 循环适合于当我们知道循环次数时使用；while 和 do...while 循环适合于循环次数未知，但是循环条件明确的情况；for...in 和 for...of 循环则让对象和数组的遍历变得更加简洁。掌握这些循环结构有助于我们编写更加高效和可读性更强的代码。

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/小程序/网站源码资源！

avaScript 语言中的 for 循环用于多次执行代码块，它是 JavaScript 中最常用的一个循环工具，还可用于数组的遍历循环等。

我们为什么要使用 for 循环呢？打个比方，例如我们想要控制台输出1到1000之间的所有数字，如果单写输出语句，要写1000句代码，但是如果使用 for 循环，几句代码就能实现。总之，使用 for 循环能够让我们写代码更方便快捷（当然啦，否则要它干嘛）。

for 循环语法

语法如下所示：

for(变量初始化; 条件表达式; 变量更新) {
    // 条件表达式为true时执行的语句块
}

• 变量初始化，表示代码块开始前执行。
• 条件表达式，定义运行循环代码块的条件。
• 变量更新，在循环代码块每次被执行之后再执行。

示例：

例如我们在一个HTML文件中，编写如下代码，实现计算1到100的总和：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<script>
  var result = 0;
  for(var i = 1; i <= 100; i++) {
    result = result + i;
  }
  alert(result);
</script>
</body>   
</html>

在浏览器中打开这个文件，会弹出一个弹出层，弹出层中显示的是1到100的总和：

上述代码中，我们声明了一个变量 result 并给它赋值为 0，表示初始的总和为 0 。

然后在 for 循环中三个语句：

• 变量初始化 i = 1，表示从 1 开始计算。
• 条件表达式 i <= 100，表示只要 i 小于等于 100 循环就会一直执行，当 i 大于 100 循环会停止。
• 变量更新 i++，之前我们学运算符的时候学过，这是递增运算符 ++，表示为其操作数增加 1。

此时我们可以一点点来看这个 for 循环：

第一次循环： result = 0 + 1   // 此时result值为0，  i的值为1
第二次循环： result = 1 + 2   // 此时result值为0+1，i的值为2
第三次循环： result = 3 + 3   // 此时result值为1+2，i的值为3
第四次循环： result = 6 + 4   // 此时result值为3+3，i的值为4
第五次循环： result = 10 + 5  // 此时result值为6+4，i的值为5
...

我们只需要搞清楚 for 循环中的执行原理，不需要手动来计算求和，只要写好代码，执行代码后计算机会很快会告诉我们1到 100 的总和。

再补充一下，上述代码中result = result + i，我们也可以写成 result += i，这是我们之前学过的加赋值运算符，还记得吗？

示例：

再来看一个例子，例如我们可以使用 for 循环来实现数组遍历，首先定义一个数组 lst：

var lst = ["a", "b", "c", "d", "e"];

在写 for 循环时，首先就是要搞清楚小括号里面的三个语句，因为我们可以通过数组中元素的下标索引来获取元素的值，而数组的索引又是从 0 开始，所以变量初始化可以设置为i = 0。第二个条件表达式，因为数组中最后一个索引为 lst.length - 1，所以只要小于等于 lst.length - 1，循环就会一直执行。而i <= lst.length - 1 就相当于 i<lst.length。第三个变量更新，当循环每循环一次，索引值就加一，所以为 i++。

所以循环可以像下面这样写：

for(i = 0; i<lst.length; i++){
    console.log(lst[i]);  // 输出数组中的元素值，从索引为0的值开始输出，每次加1，一直到lst.length-1
}

输出：

a
b
c
d
e

其实遍历数组还有一种更好的方法，就是使用 for...in 循环语句来遍历数组。

for...in 循环

for...in 循环主要用于遍历数组或对象属性，对数组或对象的属性进行循环操作。for...in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

语法如下：

for (变量 in 对象) {
    // 代码块
}

for 循环括号内的变量是用来指定变量，指定的可以是数组对象或者是对象属性。

示例：

使用 for...in 循环遍历我们定义好的 lst 数组：

var lst = ["a", "b", "c", "d", "e"];
for(var l in lst){
    console.log(lst[l]);
}

输出：

a
b
c
d
e

除了数组，for...in 循环还可以遍历对象，例如我们遍历 侠侠 的个人基本信息：

var object = {
    姓名:'侠侠',
    年龄:'22',
    性别:'男',
    出生日期:'1997-08-05',
    职业:'程序员',
    特长:'跳舞'
}

for(var i in object) {
    console.log(i + ":" + object[i]);
}

输出：

姓名: 侠侠
年龄: 22
性别: 男
出生日期: 1997-08-05
职业:程序员
特长:跳舞

动手小练习

1. 请自定义一个长度为7的数组，然后通过 for 循环将数组中的元素遍历出来。
2. 求和：1~100的奇数和。
3. 求和：1~100的偶数和。
4. 使用对象定义一个人的个人信息（包括姓名、性别、年龄、出生日期、兴趣爱好、职业、特长等），然后使用 for...in 循环将这些信息遍历输出。