JavaScript中的for循环

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

for 循环语法

语法如下所示：

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

示例：

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

欢迎大家来到IT世界,在知识的湖畔探索吧! 
    <script> var result = 0; for(var i = 1; i <= 100; i++) { result = result + i; } alert(result); </script> 

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

然后在 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：

欢迎大家来到IT世界,在知识的湖畔探索吧!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 } 

输出：

欢迎大家来到IT世界,在知识的湖畔探索吧!a b c d e 

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

for…in 循环

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

语法如下：

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

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

示例：

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

欢迎大家来到IT世界,在知识的湖畔探索吧!var lst = ["a", "b", "c", "d", "e"]; for(var l in lst){ console.log(lst[l]); } 

输出：

a b c d e 

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

欢迎大家来到IT世界,在知识的湖畔探索吧!var object = { 姓名:'侠侠', 年龄:'22', 性别:'男', 出生日期:'1997-08-05', 职业:'程序员', 特长:'跳舞' } for(var i in object) { console.log(i + ":" + object[i]); } 

输出：

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

动手小练习

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