乐趣区

关于前端:JavaScript中的for循环

jiezi

JavaScript 语言中的 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
职业: 程序员
专长: 跳舞

入手小练习

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