假设您的任务是编写一个显示数字 1 到 100 的程序。完成此任务的一种方法是编写 100 条 console.log() 语句。但我确信你不会，因为你会厌倦第九行或第十行。
每个语句中唯一改变的部分是数字，因此应该有一种方法只编写一个语句。还有循环。循环让我们在代码块中重复执行一组步骤。
while 循环do-while 循环for 循环数组for-of 循环for-in 循环while 循环当某些条件计算为 true 时，while 循环将重复执行一组语句。当条件为假时，程序将退出循环。这种循环在执行迭代之前测试条件。迭代是循环体的执行。这是 while 循环的基本示例：
let x = 10;while(x > 0) { console.log(`x is now ${x}`); x -= 1;}console.log(out of the loop.);/* outputs:x is now 10x is now 9x is now 8x is now 7x is now 6x is now 5x is now 4x is now 3x is now 2x is now 1out of the loop. */
在上面的示例中，我们首先将 x 设置为 10。在本例中，条件 x > 0 的计算结果为 true，因此执行块内的代码。这会打印语句“x is now 10”，并将 x 的值减 1。在下一次检查期间，x 等于 9，仍然大于 0。因此循环继续。在最后一次迭代中，x 最终变为 1，并且我们打印“x is now 1”。之后，x 变为 0，因此我们正在评估的条件不再成立 true。然后，我们开始执行循环外的语句并打印“out of theloop”。
这是 while 循环的一般形式：
while (condition) { statement; statement; etc.}
使用 while 循环时要记住的一件事是不要创建永无止境的循环。发生这种情况是因为条件永远不会变为 false。如果它发生在你身上，你的程序就会崩溃。这是一个例子：
let x = 10;while(x > 0) { console.log(`x is now ${x}`); x += 1;}console.log(out of the loop.);
在本例中，我们增加 x 而不是减少，并且 x 的值已经大于 0，因此循环将无限期地继续下去。
任务这个循环体会被执行多少次？
let i = 0;while (i < 10) { console.log(hello, world); i += 1;}
do-while 循环do-while 循环将首先执行语句主体，然后检查条件。当您知道要至少运行代码一次时，这种循环很有用。以下示例将记录 x 的值一次，即使条件计算结果为 false，因为 x 等于 0。
let x = 0;do { console.log(`x is now ${x}`); x -= 1;} while(x > 0);console.log(out of the loop.);/* outputs:x is now 0out of the loop. */
我在自己的项目中多次使用 do-while 循环来生成随机值，然后只要它们不满足某些条件就继续生成它们。这有助于避免由于初始化和循环内重新分配而导致的重复。
这是 do-while 循环的一般形式：
do { statement; statement; etc.} while (condition);
任务编写一个 do-while 循环来显示数字 1 到 10。
for 循环for 循环将重复执行代码块特定次数。以下示例显示数字 1 到 10：
for (let i = 1; i <= 10; i++) { console.log(i);}
这是 for 循环的一般形式：
for (initial; condition; step) { statement; statement; etc.}
initial 是一个设置变量值的表达式。这是执行初始化的可选表达式。
条件是一个表达式，必须为真才能执行语句。仅当条件计算结果为 true 时才会执行块内的语句。完全跳过条件将导致它们始终为真，因此您必须以其他方式退出循环。
step 是一个递增变量值的表达式。这也是可选的，并且在 for 块内的所有语句执行完毕后执行。步骤表达式通常用于接近循环的结束条件。
您还可以将 for 循环编写为等效的 while 循环。您所需要做的就是稍微改变您的陈述和条件。上面的 for 循环可以重写为：
initial;while(condition) { statement; statement; etc. step;}
一种编程模式是使用 for 循环用变量本身和新值来更新变量的值。此示例将数字 1 到 10 相加：
let x = 0;for (let i = 1; i <= 10; i++) { x += i;}// outputs: 55console.log(x);
这是等效的 while 循环，它给出相同的输出：
let x = 0;let i = 1;while(i <= 10) { x += i; i += 1;}// outputs: 55console.log(x);
您应该注意我是如何在 while 块的末尾而不是在开头进行增量的。在开始时增加循环变量 i 会给我们 65，这不是我们在这里打算做的。
+= 运算符是一个赋值运算符，它将值添加回变量。这是所有赋值运算符的列表：
操作员示例等效
+= x += 2  x = x + 2
-= x -= 2 x = x - 2
*= x *= 2 x = x * 2
/= x /= 2 x = x / 2
%= x%=2 x = x % 2
任务编写一个 for 循环来计算数字的阶乘。数字n的因子是从1到n的所有整数的乘积。例如，4！ （4 阶乘）为 1 x 2 x 3 x 4，等于 24。
数组数组是一个包含项目列表的对象，这些项目称为元素，可以通过索引进行访问。索引是元素在数组中的位置。第一个元素位于索引 0 处。
数组有一个名为 length 的属性，它为您提供数组中元素的总数。这意味着您可以创建一个 for 循环来迭代数组中的项目，如下所示：
let arr = [1, 2, hello, world];for (let i = 0; i < arr.length; i++) { console.log(arr[i]);}/*outputs:12helloworld*/
二维数组是指元素为数组的数组。例如：
let arr = [ [1, 2], [hello, world]];
这是循环数组并显示每个元素的方式：
for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { console.log(arr[ i ][ j ]); }}/*outputs:12helloworld*/
您将如何重写上面的循环，以便从末尾开始打印数组元素？
for-of 循环迭代数组时最常见的场景之一是从头开始，然后一次遍历所有元素，直到到达末尾。有一种更短的方法可以将 for 循环编写为 for-of 循​​环。
for-of 循​​环让我们可以循环遍历可迭代对象（例如数组、映射和字符串）的值。 for-of 循​​环基本上用于迭代对象的属性值。这是上一节中的循环，重写为 for-of 循​​环。
let arr = [1, 2, hello, world];for (let item of arr) { console.log(item);}/*outputs:12helloworld*/
循环字符串：
let big_word = pulchritudinous;for (let char of big_word) { console.log(char);}/*outputs:pulchritudinous*/
for-in 循环这种循环让我们可以循环访问对象的属性。对象是一种将键映射到值的数据结构。 javascript 中的数组也是对象，因此我们也可以使用 for-in 循环来循环数组属性。我们首先看看如何使用 for-in 循环来迭代对象键或属性。
以下是使用 for-in 循环遍历对象键的示例：
let obj = { foo: hello, bar: world};for (let key in obj) { console.log(key);}/*outputs:foobar*/
下面是使用 for-in 循环遍历数组的示例：
let arr = [1, 2, hello, world];for (let key in arr) { console.log(arr[key]);}/* outputs:12helloworld */
我想补充一点，即使我们能够使用 for-in 循环遍历数组元素，您也应该避免这样做。这是因为它的目的是循环访问对象的属性，如果您只想循环数组索引来获取数组值，则在某些情况下可能会得到意外的结果。
评论循环让我们减少代码中的重复。 while 循环让我们重复一个动作，直到条件为假。 do-while 循环将至少执行一次。 for 循环让我们重复一个动作，直到到达计数结束。 for-in 循环的设计是为了让我们可以访问对象中的键。 for-of 循​​环的设计是为了让我们能够获取可迭代对象的值。
在下一部分中，您将学习函数。
本文已根据 monty shokeen 的贡献进行了更新。 monty 是一位全栈开发人员，他也喜欢编写教程和学习新的 javascript 库。
以上就是掌握 javascript：第 3 部分，探索循环的详细内容。