个性化阅读
专注于IT技术分析

JS循环语句 – JavaScript教程

点击下载

上一章JavaScript教程请查看:JS数组排序

在本教程中,你将学习如何在JavaScript中使用循环语句来重复一系列操作。

JavaScript中不同类型的循环

循环用于一次又一次地执行相同的代码块,只要满足一定的条件。循环背后的基本思想是自动化程序中的重复任务,以节省时间和精力,JavaScript现在支持五种不同类型的循环:

  • while循环遍历一个代码块,只要指定的条件的值为true。
  • do…while——循环遍历一段代码;然后对条件进行评估。如果条件为真,则只要指定的条件为真,就会重复该语句。
  • for循环遍历一个代码块,直到计数器达到指定的数字。
  • for…in循环遍历对象的属性。
  • for…of对于迭代对象(如数组、字符串等)的循环。

在下面的部分中,我们将详细讨论这些循环语句。

while循环

这是JavaScript提供的最简单的循环语句。

只要指定条件的值为true, while循环就会遍历代码块,一旦条件失败,循环就会停止。while循环的一般语法是:

while(condition) {
    // 执行代码
}

下面的示例定义了一个循环,只要变量i小于或等于5,这个循环就会继续运行。每次循环运行时,变量i将增加1

var i = 1;
while(i <= 5) {    
    document.write("<p>number is " + i + "</p>");
    i++;
}

注意: 确保循环中指定的条件最终为false,否则,循环将永远不会停止迭代,这就是所谓的无限循环。一个常见的错误是忘记增加计数器变量(在我们的例子中是变量i)。

do…while循环

do-while循环是while循环的一个变体,它在每次循环迭代结束时计算条件。在do-while循环中,代码块执行一次,然后对条件求值,如果条件为真,则只要对指定条件求值为真,就重复语句。do-while循环的一般语法是:

do {
    // 执行代码
}
while(condition);

下面示例中的JavaScript代码定义了一个从i=1开始的循环,然后它将打印输出并将变量i的值增加1,在条件被求值之后,只要变量i小于或等于5,循环就会继续运行。

var i = 1;
do {
    document.write("<p>number is " + i + "</p>");
    i++;
}
while(i <= 5);

while和do…while循环的区别

while循环与do-while循环有一个重要的区别——使用while循环,在每次循环迭代开始时测试要评估的条件,因此如果条件表达式的评估结果为false,则将永远不会执行循环。

另一方面,对于do-while循环,即使条件表达式的计算结果为false,也总是执行一次循环,因为与while循环不同,条件是在循环迭代的末尾而不是在开始时计算的。

for循环

只要满足某个条件,for循环就会重复一个代码块。它通常用于执行某个代码块若干次,它的语法是:

for(initialization; condition; increment) {
    // 执行代码
}

for循环语句的参数有以下含义:

  • initialization初始化——它用于初始化计数器变量,并在循环体的第一次执行之前无条件地执行一次。
  • condition条件——它在每次迭代的开始进行评估。如果计算结果为true,则执行循环语句。如果计算结果为false,则循环执行结束。
  • increment增量——每次循环运行时,它都会用一个新值更新循环计数器。

下面的示例定义了一个从i=1开始的循环,这个循环将继续下去,直到变量i的值小于等于5,变量i将在每次循环运行时增加1:

for(var i=1; i<=5; i++) {
    document.write("<p>number is " + i + "</p>");
}

for循环对于遍历数组特别有用。下面的示例将向你展示如何打印JavaScript数组中的每个项或元素。

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// 循环迭代
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}

for…in循环

for-in循环是一种特殊类型的循环,它遍历对象的属性或数组的元素。forin循环的一般语法是:

for(variable in object) {
    // 执行代码
}

它包含当前属性的名称或当前数组元素的索引。

下面的示例将向你展示如何循环遍历JavaScript对象的所有属性。

var person = {"name": "Clark", "surname": "Kent", "age": "36"};
 
// 循环迭代
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}

类似地,你可以循环遍历数组的元素,就像这样

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// 循环
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}

注意:对于索引顺序很重要的数组,不应该使用for-in循环进行迭代,最好使用带有数字索引的for循环。

ES6的for…of循环

ES6引入了一个新的for-of循环,它允许我们很容易地遍历数组或其他可迭代对象(例如字符串),此外,循环内的代码针对iterable对象的每个元素执行。

下面的示例将向你展示如何使用此循环遍历数组和字符串。

// 遍历数组
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// 遍历字符串
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

要了解其他ES6特性,请参阅JavaScript ES6特性一章。

注意:for…of循环不和对象一起用,因为他们是不可迭代的,如果希望遍历对象的属性,可以使用for-in循环。

赞(0)
未经允许不得转载:srcmini » JS循环语句 – JavaScript教程

评论 抢沙发

评论前必须登录!