JavaScript 中的 5 种循环类型

循环是用于循环通过一组指令直到满足某些条件

假设我们页面中有100个按钮，我们想要给每一个按钮都添加上同样的事件，我们肯定不能一个个的获取元素然后再给元素一个一个的添加事件，这样可能会有几千行的代码。最常见的做法是啥？我们需要去循环元素数组，再循环中给元素添加点击事件。知道我们已经遍历完100个按钮元素，程序终止执行！

1.while循环

它是最流行的循环之一，并执行一组给定的指令，直到满足条件。下面给出了while循环的基本语法。

while(condition) {
    statement
}

在执行语句之前检查条件，如果结果为真，则执行它，当它变为假时停止执行。假设我们想使用 while 循环打印从 1 到 5 的数字，那么可以这样完成

let num = 1;
while (num < 6) {
    console.log(num);
    num++
}

编程时进入无限while循环是很常见的，因此在执行之前必须非常小心地检查条件。

2.for循环

这是另一种广泛使用的循环，其语法看起来像这样

for (initialStatement ; conditionalStatement ; incrementStatement) {
    statement
}

这里 initialStatement 是第一个运行的东西，创建的任何变量都是块范围的，这意味着它们不能从 for 循环外部访问。接下来是 conditionalStatement，如果它为 true，则返回 true 或 false，然后执行语句，否则循环终止。最后，我们有 incrementStatement，它在语句执行后运行，基本上增加或减少在初始语句中创建的变量。

假设我们要使用 for 循环打印 1 - 5 的数字，那么可以按如下方式完成

for (let num = 0 ; num < 6 ; num++) {
    console.log(num);
}

3. 做…while循环

do…while 循环与 while 循环非常相似，结构如下

do {
  statement
} while (condition);

在 do…while 循环中，首先发生的是语句被执行。一旦发生这种情况，就会检查条件，如果结果为真，则再次执行该语句并继续执行，直到条件变为假。与 while 循环不同，do…while 循环至少执行一次。

假设我们想使用 do-while 循环打印从 1 到 5 的数字，那么可以这样完成。

let num = 1;
do {
    console.log(num);
    num++
} while (num < 6);

4. for…in 循环

它与对象一起使用，结构如下

for (variable in object) {
 statement
}

此循环遍历对象的变量属性，该属性可能是对象的键或索引，具体取决于对象的数据类型。例如，对于数组，它是它的索引，对于一个对象，它是循环迭代的键。

与数组一起使用

const arr = [1 , 2 , 3];

for (let num in arr) {
    console.log(num);
}

输出 -> 0、1、2

与对象一起使用

const food = {
    a: "apple",
  b: "banana"
}
for (let ele in food){
    console.log(ele);
}

输出->“a”，“b”

5. for…of 循环

它是最后一种循环，可以与数组、映射、字符串等可迭代对象一起使用，它的语法是这样的

for (variable of iterableObject) {
 statement
}

与 for…in 循环不同，此循环通过对象属性值。让我们用一个例子来比较两者

const arr = [1 , 2 , 3];

for (let ele of arr){
    console.log(ele);
}

输出-> 1 , 2 , 3

如果我们使用 for…in 循环，那么输出将是 0 , 1 , 2 看看区别。假设我们有一个字符串，我们可以很容易地使用这个循环打印它的每个字符

const string = “cat”;
for (const value of string) {
 console.log(value);
}

输出->“c”、“a”、“t”