JavaScript for 循环

循环可以将代码块执行指定的次数。

JavaScript 循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

我们可以这样输出数组的值：

一般写法：

document.write(cars[0] + "<br>");

document.write(cars[1] + "<br>");

document.write(cars[2] + "<br>");

document.write(cars[3] + "<br>");

document.write(cars[4] + "<br>");

document.write(cars[5] + "<br>");

使用for循环

for (var i=0;i<cars.length;i++)

{

document.write(cars[i] + "<br>");

}

不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3)

{

被执行的代码块

}

语句 1 （代码块）开始前执行 starts.

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

实例

for (var i=0; i<5; i++)

{

x=x + "该数字为 " + i + "<br>";

}

从上面的例子中，您可以看到：

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件（i 必须小于 5）。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。

语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的，也就是说不使用语句 1 也可以。

您可以在语句 1 中初始化任意（或者多个）值：

实例:

for (var i=0,len=cars.length; i<len; i++)

{

document.write(cars[i] + "<br>");

}

同时您还可以省略语句 1（比如在循环开始前已经设置了值时）：

实例:

var i=2,len=cars.length;

for (; i<len; i++)

{

document.write(cars[i] + "<br>");

}

语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

	如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。

语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。

语句 3 也可以省略（比如当循环内部有相应的代码时）：

实例:

var i=0,len=cars.length;

for (; i<len; )

{

document.write(cars[i] + "<br>");

i++;

}

for/In 循环

JavaScript for/in 语句循环遍历对象的属性：

实例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

{

txt=txt + person[x];

}

您将在有关 JavaScript 对象的章节学到更多有关 for / in 循环的知识。

While 循环

我们将在下一章为您讲解 while 循环和 do/while 循环。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

avaScript 语言中的 for 循环用于多次执行代码块，它是 JavaScript 中最常用的一个循环工具，还可用于数组的遍历循环等。

我们为什么要使用 for 循环呢？打个比方，例如我们想要控制台输出1到1000之间的所有数字，如果单写输出语句，要写1000句代码，但是如果使用 for 循环，几句代码就能实现。总之，使用 for 循环能够让我们写代码更方便快捷（当然啦，否则要它干嘛）。

for 循环语法

语法如下所示：

for(变量初始化; 条件表达式; 变量更新) {
    // 条件表达式为true时执行的语句块
}

变量初始化，表示代码块开始前执行。
条件表达式，定义运行循环代码块的条件。
变量更新，在循环代码块每次被执行之后再执行。

示例：

例如我们在一个HTML文件中，编写如下代码，实现计算1到100的总和：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<script>
  var result = 0;
  for(var i = 1; i <= 100; i++) {
    result = result + i;
  }
  alert(result);
</script>
</body>   
</html>

在浏览器中打开这个文件，会弹出一个弹出层，弹出层中显示的是1到100的总和：

上述代码中，我们声明了一个变量 result 并给它赋值为 0，表示初始的总和为 0 。

然后在 for 循环中三个语句：

变量初始化 i = 1，表示从 1 开始计算。
条件表达式 i <= 100，表示只要 i 小于等于 100 循环就会一直执行，当 i 大于 100 循环会停止。
变量更新 i++，之前我们学运算符的时候学过，这是递增运算符 ++，表示为其操作数增加 1。

此时我们可以一点点来看这个 for 循环：

第一次循环： result = 0 + 1   // 此时result值为0，  i的值为1
第二次循环： result = 1 + 2   // 此时result值为0+1，i的值为2
第三次循环： result = 3 + 3   // 此时result值为1+2，i的值为3
第四次循环： result = 6 + 4   // 此时result值为3+3，i的值为4
第五次循环： result = 10 + 5  // 此时result值为6+4，i的值为5
...

我们只需要搞清楚 for 循环中的执行原理，不需要手动来计算求和，只要写好代码，执行代码后计算机会很快会告诉我们1到 100 的总和。

再补充一下，上述代码中result = result + i，我们也可以写成 result += i，这是我们之前学过的加赋值运算符，还记得吗？

示例：

再来看一个例子，例如我们可以使用 for 循环来实现数组遍历，首先定义一个数组 lst：

var lst = ["a", "b", "c", "d", "e"];

在写 for 循环时，首先就是要搞清楚小括号里面的三个语句，因为我们可以通过数组中元素的下标索引来获取元素的值，而数组的索引又是从 0 开始，所以变量初始化可以设置为i = 0。第二个条件表达式，因为数组中最后一个索引为 lst.length - 1，所以只要小于等于 lst.length - 1，循环就会一直执行。而i <= lst.length - 1 就相当于 i<lst.length。第三个变量更新，当循环每循环一次，索引值就加一，所以为 i++。

所以循环可以像下面这样写：

for(i = 0; i<lst.length; i++){
    console.log(lst[i]);  // 输出数组中的元素值，从索引为0的值开始输出，每次加1，一直到lst.length-1
}

输出：

a
b
c
d
e

其实遍历数组还有一种更好的方法，就是使用 for...in 循环语句来遍历数组。

for...in 循环

for...in 循环主要用于遍历数组或对象属性，对数组或对象的属性进行循环操作。for...in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

语法如下：

for (变量 in 对象) {
    // 代码块
}

for 循环括号内的变量是用来指定变量，指定的可以是数组对象或者是对象属性。

示例：

使用 for...in 循环遍历我们定义好的 lst 数组：

var lst = ["a", "b", "c", "d", "e"];
for(var l in lst){
    console.log(lst[l]);
}

输出：

a
b
c
d
e

除了数组，for...in 循环还可以遍历对象，例如我们遍历侠侠的个人基本信息：

var object = {
    姓名:'侠侠',
    年龄:'22',
    性别:'男',
    出生日期:'1997-08-05',
    职业:'程序员',
    特长:'跳舞'
}

for(var i in object) {
    console.log(i + ":" + object[i]);
}

输出：

姓名: 侠侠
年龄: 22
性别: 男
出生日期: 1997-08-05
职业:程序员
特长:跳舞

动手小练习

请自定义一个长度为7的数组，然后通过 for 循环将数组中的元素遍历出来。
求和：1~100的奇数和。
求和：1~100的偶数和。
使用对象定义一个人的个人信息（包括姓名、性别、年龄、出生日期、兴趣爱好、职业、特长等），然后使用 for...in 循环将这些信息遍历输出。

lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<script type='text/javascript'>
//入口函数
window.onload=function(){
alert('hello')
}

/* 在控制台输出内容按fn+f12 */
console.log('my world')

//一.循环事件
/*1.循环遍历1-100*/
for(var i=0;i<=100;i++){
console.log(i);
}

// 2.实现1-100之间的累加求和
var sum = 0;
for(var j = 1;j <= 100;j ++){
sum += j;
}
console.log(sum)

//3.实现1-100之间偶数的和
var sum = 0;
for(var k = 0;k <= 100;k++){
if(k % 2 == 0){
sum += k
}
}
console.log(sum);

//4.循环遍历一组数组
var names=['jack','mike','milk','hook','nike']
console.log(names.length)
for(var o=0;o<=names.length;o++){
console.log('第'+(o+1)+'个人名为*'+names[o])
}

</script>
</head>
<body>

<button onclick="alert('hello wrold')">点击</button>
</body>
</html>

在线咨询

上一篇：Html+CSS - 1段CSS让表格更漂亮建议收藏
下一篇：Html之position粘性定位

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript for 循环

for 循环语法

示例：

for...in 循环

动手小练习

您的项目需求