JavaScript for 循环

最新推荐文章于 2023-06-13 16:37:55 发布

三季人 G

最新推荐文章于 2023-06-13 16:37:55 发布

阅读量841

点赞数 2

分类专栏：网络 JS 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/QYgujingjing/article/details/128765672

版权

网络同时被 2 个专栏收录

86 篇文章 0 订阅

订阅专栏

84 篇文章 0 订阅

订阅专栏

JavaScript for 循环

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

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

举例说明:

let str = '';

for (let i = 0; i < 9; i++) {
  str = str + i;
}

console.log(str);
// Expected output: "012345678"

语法

for (variable of iterable) {
    //statements
}

variable

在每次迭代中，将不同属性的值分配给变量。

iterable

被迭代枚举其属性的对象。

举例说明: 例如我们在一个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…in循环的定义

JavaScript的for循环会或迭代集合中的键。使用这些键，你就可以访问它在集合中代表的项。

集合的项可以是数组，也可以是对象，甚至可以是字符串。

for (let key in value) {
  //do something here
}

在上述代码块中，value是我们迭代的项的集合。它可以是对象、数组、字符串等等。key会是value每一项的键，在每次迭代中都会改变到列表中的下一个键。

注意，这里我们使用let或const来声明key。

在这里插入图片描述

在对象中使用for…in循环

在JavaScript中使用for…in循环迭代对象时，其迭代的键或者属性是对象自己的属性（在上面的示例中，由key变量表示）。

由于对象可能通过原型链继承数据项，其中包括对象的默认方法和属性，以及我们可能定义的对象原型，因此我们应该使用hasOwnProperty。

在下面的例子中，我们通过变量obj进行循环，并打印每一个属性和值：

const obj = {
  "a": "JavaScript",
  1: "PHP",
  "b": "Python",
  2: "Java"
};

for (let key in obj) {
  console.log(key + ": " + obj[key] )
}

// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"

请注意，键的迭代顺序是升序的（也就是说，从数字开始，按数字的顺序，然后是字母，按字母的顺序）。然而，这个输出的顺序与初始化对象时创建的项的索引顺序不同。

在数组中使用for…in循环

在JavaScript中使用for…in循环来迭代数组时，在这种情况下，key将是元素的索引。然而，索引可以按随机顺序迭代。

因此，如果我们上面展示的for…in循环语法结构中的value变量是一个包含五项的数组，那么key就不能保证是0到4。一些索引可能会在其他索引之前。关于何时可能发生这种情况的细节将在本文后面解释。

在下面的例子中，我们对arr变量进行循环：

const arr = ["JavaScript", "PHP", "Python", "Java"];

for (let key in arr) {
  console.log(key + ": " + arr[key])
}

// Output:
// "0: JavaScript"
// "1: PHP"
// "2: Python"
// "3:

在循环中，我们呈现每个数组元素的索引和值。

在字符串中使用for…in循环

你可以在JavaScript中使用for…in循环来循环字符串。然而，不推荐这么做，因为你将在字符串的索引上循环，而不是字符串本身。

在下面的例子中，我们对str变量进行循环：

const str = "Hello!";

for (let key in str) {
  console.log(key + ": " + str.charAt(key));
}

//Output
// "0: H"
// "1: e"
// "2: l"
// "3: l"
// "4: o"
// "5: !"

在这个循环中，我们要呈现每个字符的键或索引，以及该索引的字符。

让我们看看JavaScript for…in循环最适合的情况。