for

一种在已知迭代次数的情况下重复代码块的方法。

for 循环对于重复执行特定次数的语句很有帮助。例如，for 循环使得表达"画五条线"的想法变得简单，如下所示：

for (let x = 10; x < 100; x += 20) { line(x, 25, x, 75); }

循环的头部以关键字 for 开头。循环通常在重复或迭代时递增或递减。括号中的语句 let x = 10; x < 100; x += 20 决定循环的重复方式：

let x = 10 表示循环从 10 开始计数，并使用变量 x 记录迭代次数。
x < 100 表示循环计数到 100（但不包括 100）。
x += 20 表示每次迭代结束时递增 20。

花括号 {} 之间的代码是循环的主体。循环主体中的语句在每次循环迭代期间重复执行。

意外创建无限循环是很常见的。当发生这种情况时，绘图可能会变得无响应，网页浏览器可能会显示警告。例如，以下循环永远不会停止迭代，因为它没有计数递增：

for (let x = 10; x < 100; x = 20) { line(x, 25, x, 75); }

语句 x = 20 使变量 x 的值变为 20，始终小于 100。

for 循环也可以递减计数：

for (let d = 100; d > 0; d -= 10) { circle(50, 50, d); }

for 循环也可以包含其他循环。下面的嵌套循环绘制了一个点网格。

// Loop from left to right. for (let x = 10; x &lt; 100; x += 10) { <p> // Loop from top to bottom. for (let y = 10; y &lt; 100; y += 10) { point(x, y); }</p> <p>} </p>

for 循环对于遍历数组的元素也非常有用。例如，常见的是遍历一个包含绘制位置或内容信息的数组：

// Create an array of x-coordinates. let xCoordinates = [20, 40, 60]; <p>for (let i = 0; i &lt; xCoordinates.length; i += 1) { // Update the element. xCoordinates[i] += random(-1, 1);</p> <p> // Draw a circle. circle(xCoordinates[i], 50, 20); } </p>

如果数组的值没有被修改, 可以用 for...of 语句可以简化代码。这类似于 Python 中的 for 循环，和 C++、Java 中的 for-each 循环。以下循环具有相同的效果：

// Draw circles with a for loop. let xCoordinates = [20, 40, 60]; <p>for (let i = 0; i &lt; xCoordinates.length; i += 1) { circle(xCoordinates[i], 50, 20); } </p>

// Draw circles with a for...of statement. let xCoordinates = [20, 40, 60]; <p>for (let x of xCoordinates) { circle(x, 50, 20); } </p>

在上面的代码片段中，变量 i 和 x 有不同的作用。

在第一个代码片段中，i 从 0 递增到 2，也就是 xCoordinates.length 减 1。 i 用于访问 xCoordinates 中索引为 i 的元素。

在第二个代码片段中，x 并不跟踪循环的进度或索引。在每次迭代中，x 包含 xCoordinates 的下一个元素。 x 从 xCoordinates 的开头（20）开始，并在下一次迭代中将其值更新为 40，然后 60。

示例

Notice any errors or typos? Please let us know. Please feel free to edit src/core/reference.js and open a pull request!

示例

相关参考