如何在 JavaScript 中使用循环

循环允许您遍历数组中的每个项目,以便您可以根据需要自定义和输出每个项目。与每种编程语言一样,循环也是在 JavaScript 中渲染数组的重要工具。

借助一些实际示例,让我们深入了解在 JavaScript 中使用循环的各种方式。

JavaScript 中的递增和递减 for 循环

增量for循环是 JavaScript 中迭代的基础。

它假定分配给变量的初始值并运行简单的条件长度检查。然后它使用++运算符递增或递减该值。

以下是其一般语法的外观:

 for(var i = initial value; i < array.length; i++) {
array[i]}

现在让我们使用上述基本语法遍历一个数组:

 anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log(anArray[i])
}
Output:
1
3
5
6

现在我们将使用 JavaScript for循环对上述数组中的每一项进行操作:

 anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30

循环使用++运算符递增地遍历数组,生成有序输出。

但是使用负数 ( ) 运算符,您可以反转输出。

语法相同,但逻辑与上述递增循环略有不同。

以下是递减方法的工作原理:

 anArray = [1, 3, 5, 6];
for(let i = anArray.length-1; i > = 0; i--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

上面代码背后的逻辑并不牵强。数组索引从零开始。所以调用anArray[i]通常从索引 0 到 3 迭代,因为上面的数组包含四个项目。

因此,像我们一样从数组长度中删除一个并将条件设置为大于或等于零非常方便——尤其是在使用数组作为迭代的基础时。

它将数组索引保持在比其长度小 1 的位置。条件i >= 0然后强制计数停止在数组中的最后一项。

相关:你今天应该掌握的 JavaScript 数组方法

JavaScript forEach

尽管您不能使用 JavaScript 的forEach 进行递减,但它通常不如原始for循环冗长。它的工作原理是在不记住前一个项目的情况下一个接一个地选择项目。

这是 JavaScript forEach的一般语法:

 array.forEach(element => {
action
})

看看它在实践中是如何工作的:

 let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log(x)
});
Output:
1
3
5
6

现在使用它对每个项目运行简单的数学运算,就像您在上一节中所做的那样:

 let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log("5", "x", x, "=", x * 5)
});
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30

如何使用 JavaScript 的 for…in 循环

JavaScript 中的for…in循环遍历数组并返回其索引。

如果您熟悉Python 的 for 循环,您会发现for…in很容易使用因为它们在简单性和逻辑方面是相似的。

看看它的一般语法:

 for (let element in array){
action
}

因此for…in循环将数组中的每一项分配给括号内声明的变量(元素)。

因此,直接在循环中记录元素会返回一个数组索引而不是项目本身:

 let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(i)
}
Output:
0
1
2
3

改为输出每个项目:

 let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(anArray[i])
}
Output:
1
3
5
6

就像您在使用递减循环时所做的那样,使用for…in反转输出也很容易:

 let anArray = [1, 3, 5, 6];
// Remove one from the length of the array and assign this to a variable:
let v = anArray.length - 1;
// Use the above variable as an index basis while iterating down the array:
for (let i in anArray){
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1

上面的代码在逻辑上类似于您在使用递减循环时所做的。不过,它更具可读性和明确概述。

JavaScript for…of 循环

for…of循环类似于for…in循环。

但是,与for…in不同,它不会遍历数组索引而是遍历项目本身。

它的一般语法如下所示:

 for (let i of array) {
action
}

让我们使用这个循环方法以增量方式遍历数组,看看它是如何工作的:

 let anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log(i)
}
Output:
1
3
5
6

您还可以使用此方法向下迭代数组并反转输出。它类似于您使用for…in 的方式

 let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1

在循环内操作:

 let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

While 循环

只要指定条件保持为真, while循环就会连续运行。它通常用作无限循环。

例如,因为零总是小于十,所以下面的代码会连续运行:

 let i = 0;
while (i < 10) {
console.log(4)
}

上面的代码无限记录“4”。

让我们使用while循环遍历一个数组:

 let i = 0;
while (i < anArray.length) {
console.log(anArray[i])
i +=1
}
Output:
1
3
5
6

JavaScript do…while 循环

do…while循环在do语法中明确接受并执行一组动作。然后在while循环中声明此操作的条件。

这是它的样子:

 do{
actions
}
while (
consition
)

现在让我们使用这个循环方法遍历一个数组:

 do{
console.log(anArray[i])
i +=1
}
while (
i < anArray.length
)
Output:
1
3
5
6

熟悉 JavaScript 循环

尽管我们在这里重点介绍了各种 JavaScript 循环方法,但掌握编程中的迭代基础知识可以让您在程序中灵活而自信地使用它们。也就是说,这些 JavaScript 循环中的大多数都以相同的方式工作,只是它们的一般大纲和语法有一些不同。

然而,循环是大多数客户端数组渲染的基础。因此,您可以随意调整这些循环方法。例如,将它们与更复杂的数组一起使用,可以让您更好地理解 JavaScript 循环。