循环在编程中用于自动执行重复性任务。
例如,假设我们要打印“ 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 (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循环迭代的对象的属性。
为了演示,我们将创建一个简单的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语句创建一个循环遍历可迭代对象,包括:内置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环路和do...while环路将在下一章来解释。