简介

Loops用于编程以自动执行重复性任务。在JavaScript](https://andsky.com/tech/tutorials/using-while-and-do-while-loops-in-javascript).`中使用的最基本的循环类型是While‘和do...While`语句，您可以在《[如何在Java中构造While和Do...While循环》中查看这些语句

因为While‘和Do...While语句是[有条件的based](https://andsky.com/tech/tutorials/how-to-write-conditional-statements-in-javascript)，，所以当给定语句的计算结果为true时，它们就会执行。类似的是，for`语句也是基于条件的，还包括循环计数器 等额外功能，允许您预先设置循环的迭代次数。

在本教程中，我们将学习for语句，包括for...of和for...in语句，它们是Java编程语言的基本元素。

for循环

for语句是一种循环类型，它将使用最多三个可选表达式来实现代码块的重复执行。

让我们来看看这意味着什么的一个例子。

1for (initialization; condition; final expression) {
2    // code to be executed
3}

在上面的语法中，for语句中有三个表达式：initialization 、** condition** 和** final expression** ，也称为incrementation。

让我们使用一个基本的例子来演示这些语句中的每一个都有什么作用。

1[label forExample.js]
2// Initialize a for statement with 5 iterations
3for (let i = 0; i < 4; i++) {
4    // Print each iteration to the console
5    console.log(i);
6}

当我们运行上面的代码时，我们将收到以下输出：

1[secondary_label Output]
20
31
42
53

在上面的示例中，我们使用let i=0初始化了for循环，该循环从0开始。我们将条件设置为i<4，表示只要i的计算结果小于4，循环就会继续运行。我们最后的i++‘表达式通过循环递增每次迭代的计数。console.log(I)打印出数字，从0开始，当i被计算为4`时立即停止。

如果不使用循环，我们可以通过使用以下代码来实现相同的输出。

1[label noLoop.js]
2// Set initial variable to 0
3let i = 0;
4
5// Manually increment variable by 1 four times
6console.log(i++);
7console.log(i++);
8console.log(i++);
9console.log(i++);

如果没有循环，代码块就会重复，并且由更多行组成。如果我们需要通过更多的数字递增，我们将需要编写更多的代码行。

让我们回顾一下循环中的每个表达式，以便完全理解它们。

入会

我们的第一个表达式是初始化 。这就是它看起来的样子。

1let i = 0;

我们使用关键字let(也可以使用关键字var)声明一个名为i的变量，并为其赋值0‘。虽然变量可以命名为任何名称，但最常用的是i。变量i`代表i 迭代，一致，代码紧凑。

条件

正如我们在While‘和do...While’循环中看到的那样，`for‘循环通常包含一个条件。这是我们的条件声明。

1i < 4;

我们已经确定迭代变量i表示开始时的0‘。现在我们说，只要本例中的i小于4，条件就是true`。

最终表达式

最终表达式 是在每个循环结束时执行的语句。它最常用于递增或递减一个值，但它可以用于任何目的。

1i++

在我们的示例中，我们用i++将变量加1。这与运行`i=i+1‘相同。

与初始化和条件表达式不同，最终表达式不以分号结尾。

组合

现在我们已经回顾了包含在`for‘循环中的三个表达式，我们可以再次查看完整的循环。

1// Initialize a for statement with 5 iterations
2for (let i = 0; i < 4; i++) {
3    console.log(i);
4}

首先，我们声明i并将其设置为0‘。然后，我们正在设置一个条件，让循环运行到i小于4。最后，我们在每次迭代中将i‘递增1。我们的代码块将i的值打印到控制台，所以我们的结果是0、1、2和3作为输出。

可选表达式

for循环中的所有三个表达式都是可选的。例如，我们可以通过在循环外部初始化变量来编写相同的for语句，而不使用初始化表达式。

1// Declare variable outside the loop
2let i = 0;
3
4// Initialize the loop
5for (; i < 4; i++) {
6    console.log(i);
7}

1[secondary_label Output]
20
31
42
53

在这种情况下，第一个;是必要的，以表示该语句是否引用初始化，条件或最终表达式，即使它被省略。

下面，我们也可以从循环中删除条件。我们将使用一个if语句与break组合来告诉循环一旦i大于3就停止运行，这与true条件相反。

 1// Declare variable outside the loop
 2let i = 0;
 3
 4// Omit initialization and condition
 5for (; ; i++) {
 6    if (i > 3) {
 7    	break;
 8    }
 9    console.log(i);
10}

1[secondary_label Output]
20
31
42
53

<$>[备注] 警告：如果省略条件，则必须包含Break语句__，否则循环将永远以无限loop]运行，并可能导致浏览器崩溃。 <$>

最后，可以通过将最终的表达式放在循环的末尾来删除它。必须同时包含两个分号，否则循环将无法运行。

 1// Declare variable outside the loop
 2let i = 0;
 3
 4// Omit all statements
 5for (; ;) {
 6    if (i > 3) {
 7    	break;
 8    }
 9    console.log(i);
10    i++;
11}

1[secondary_label Output]
20
31
42
53

正如我们从上面的示例中看到的，包括所有三个语句通常会生成最简洁和可读性最好的代码。但是，如果将来遇到这种情况，可以省略语句，这一点很有用。

修改数组

我们可以使用`for‘循环来修改array.

在下一个示例中，我们将创建一个空数组，并用循环计数器变量填充它。

 1[label modifyArray.js]
 2// Initialize empty array
 3let arrayExample = [];
 4
 5// Initialize loop to run 3 times
 6for (let i = 0; i < 3; i++) {
 7    // Update array with variable value
 8    arrayExample.push(i);
 9    console.log(arrayExample);
10}

运行上面的JavaScript代码将产生以下输出。

1[secondary_label Output]
2[ 0 ]
3[ 0, 1 ]
4[ 0, 1, 2 ]

我们设置了一个循环，直到i < 3不再是true，我们告诉控制台在每次迭代结束时将arrayExample数组打印到控制台。使用此方法，我们可以看到数组如何使用新值进行更新。

数组长度

有时，在不确定迭代次数的情况下，我们可能希望循环运行多次。我们可以利用数组的`property‘长度来让循环运行与数组中的项一样多的次数，而不是像我们在前面的示例中所做的那样声明一个静态数字。

1[label loopThroughArray.js]
2// Declare array with 3 items
3let fish = [ "flounder", "salmon", "pike" ];
4
5// Initalize for loop to run for the total length of an array
6for (let i = 0; i < fish.length; i++) {
7    // Print each item to the console
8    console.log(fish[i]);
9}

我们将收到以下输出。

1[secondary_label Output]
2flounder
3salmon
4pike

在本例中，我们使用Fish[i]递增数组的每个索引(例如，循环将通过Fish[0]、Fish[1]等递增)。这会导致索引在每次迭代时动态更新。

For...In Loop

for...in语句迭代对象的属性。为了进行演示，我们将创建一个简单的Shark对象，其中包含几个_name：Value_Pair。

1[label shark.js]
2const shark = {
3    species: "great white",
4    color: "white",
5    numberOfTeeth: Infinity
6}

使用`for...in‘循环，我们可以轻松地访问每个属性名称。

1// Print property names of object
2for (attribute in shark) {
3    console.log(attribute);
4}

1[secondary_label Output]
2species
3color
4numberOfTeeth

我们还可以通过使用属性名作为对象的索引值来访问每个属性的值。

1// Print property values of object
2for (attribute in shark) {
3    console.log(shark[attribute]);
4}

1[secondary_label Output]
2great white
3white
4Infinity

把它们放在一起，我们就可以访问一个对象的所有名称和值。

1// Print names and values of object properties
2for (attribute in shark) {
3    console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
4}

1[secondary_label Output]
2SPECIES: great white
3COLOR: white
4NUMBEROFTEETH: Infinity

我们使用toUpperCase()方法修改属性名称，并在其后面加上属性值。for...in是循环访问对象属性的一种非常有用的方式。

有关更详细的信息，请查看Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)上的[for...in。

for...of Loop

for...in语句对于迭代对象属性很有用，但是要迭代像arrays和[strings](https://andsky.com/tech/tutorials/understanding-data-types-in-javascript strings)，这样的可迭代对象，可以使用for...of语句。从ECMAScript 6.)开始，for...of语句是一个较新的功能ECMAScript(或ES)是为标准化JavaScript而创建的脚本语言规范。

在这个`for...of‘循环的示例中，我们将创建一个数组，并将数组中的每一项打印到控制台。

1[label sharks.js]
2// Initialize array of shark species
3let sharks = [ "great white", "tiger", "hammerhead" ];
4
5// Print out each type of shark
6for (let shark of sharks) {
7    console.log(shark);
8}

我们将收到来自for...of语句的以下输出。

1[secondary_label Output]
2great white
3tiger
4hammerhead

还可以使用entry()方法打印出与索引元素相关联的索引。

1[label sharks.js]
2...
3// Loop through both index and element
4for (let [index, shark] of sharks.entries()) {
5    console.log(index, shark);
6}

1[secondary_label Output]
20 'great white'
31 'tiger'
42 'hammerhead'

可以按照与数组相同的方式遍历字符串。

1[label sharkString.js]
2// Assign string to a variable
3let sharkString = "sharks";
4
5// Iterate through each index in the string
6for (let shark of sharkString) {
7    console.log(shark);
8}

1[secondary_label Output]
2s
3h
4a
5r
6k
7s

在本例中，我们循环访问字符串中的每个字符，并按顺序打印它们。

有关for...in和for...of之间的差异的更详细说明，请阅读Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of).上的[for...of循环

结论

在本教程中，我们学习了如何在JavaScript中构造for循环，由for、for...of和for...in语句组成。

循环是JavaScript编程中不可或缺的一部分，用于自动执行重复性任务并使代码更简洁、更高效。

JavaScript 中的 For 循环、For...Of 循环和 For...In 循环

简介