JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JavaScript For 循环

循环在编程中用于自动执行重复性任务。

例如,假设我们要打印“ Hello World” 10次。可以如下所示进行:

  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");

而在循环中,该语句只需编写一次,循环将执行10次,如下所示:

for (let i = 0; i < 10; i++) {
document.write("Hello World<br>");
}
测试看看

For 循环

for循环的语法如下:

for (initialization; condition; final-expression) {
    //待执行的语句
}

initialization在执行语句之前执行(一次)。

condition定义了执行语句的条件。

在执行完语句后,每次都会执行final-expression

for (var i = 0; i < 5; i++) {
    document.write("<br>The number is " + i);
}
测试看看

从上面的示例中,您可以阅读:

  • initialization 在循环开始之前设置变量(变量i = 0)。

  • condition 定义了循环运行的条件(我必须小于5)。

  • 每次执行循环中的代码块时,final-expression都会增加一个值(i ++)。

在下面的示例中,我们以升序循环遍历一个数组:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = '';
for (var i = 0; i < fruits.length; i++) {
    txt += fruits[i] + '<br>';
}
测试看看

在下面的示例中,我们以降序循环遍历一个数组:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = '';
for (var i = fruits.length -1; i >= 0; i--) {
txt += fruits[i] + '<br>';
}
测试看看

可选表达式

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

//在循环外声明变量
var i = 0;

//初始化循环
for (; i < 5; i++) {
document.write(i);
}
测试看看

在这种情况下,第一个; 表示该语句是指向初始化,条件还是最终表达式,即使省略它也是必要的。

下面,我们还可以从循环中删除条件。我们将使用一个if语句和break来告诉循环在i大于3时停止运行,这与true条件相反。

//在循环外声明变量
var i = 0;

//省略初始化和条件
for (; ; i++) {
if (i > 3) {
break;
}
document.write(i);
}
测试看看

注意:break如果省略该条件,则必须包含该语句,否则循环将永远无限循环运行,并可能导致浏览器崩溃。

最后,可以通过将最终表达式放在循环末尾来将其删除。两个分号仍必须包含在内,否则循环将无法运行。

//在循环外声明变量
var i = 0;

//省略所有表达式
for (; ;) {
if (i > 3) {
break;
}
document.write(i);
i++;
}
测试看看

从上面的示例可以看出,包括所有这三个语句通常会产生最简洁易读的代码。但是,知道以后可以省略语句是很有用的。

嵌套循环

您可以嵌套循环,即在另一个循环内循环。

嵌套循环在矩阵乘法中的大多数地方都使用,显示表格和许多其他地方:

var txt = "";
for (var row = 0; row < 10; row++) {
   for (var col = 0; col < row; col++) {
   txt += " * ";
   }
   txt += "<br>";
}
测试看看

For ...in循环

for...in循环迭代的对象的属性。

为了演示,我们将创建一个简单的myObj对象,其中包含一些name:value对。

var myObj = {
name: "VISHAL",
age: 22,
height: 175,
city: "New Delhi",
getNothing: function () {return "";}
};

for (let x in myObj) {
document.write(x);
}
测试看看

在每次迭代中,将来自对象的一个属性分配给x,并且此循环一直进行到对象的所有属性用尽为止。

以下示例实现一个for...in循环并打印Web浏览器的Navigator对象:

for (let x in navigator) {
document.write(x);
}
测试看看

For ... Of循环

for...of语句创建一个循环遍历可迭代对象,包括:内置String,Array,类似Array的对象和用户定义的可迭代对象。

let iterable = [10, 20, 30, 40, 50];

for (let x of iterable) {
document.write(x);
}
测试看看

在每次迭代中,将来自对象的一个元素分配给x,并且此循环持续进行到对象的所有元素用尽为止。

无论for...in和for...of循环迭代的东西。它们之间的主要区别在于它们迭代的内容:

  • for...in循环迭代的对象的枚举的属性,以任意的顺序

  • for...of循环迭代数据,该迭代的对象定义要遍历

While循环

在while环路和do...while环路将在下一章来解释。