JavaScript循环语句概念和分类

15 JavaScript学习:循环_代码块

JavaScript中的循环语句用于重复执行特定的代码块,直到指定的条件不再满足。下面是JavaScript中常用的循环语句以及它们的概念和分类:

  1. for 循环:for循环通过指定起始条件、循环条件和递增/递减步长来进行迭代。它适用于已知迭代次数的情况。
for (let i = 0; i < 5; i++) {
    // 执行代码块
}
  1. while 循环:while循环在每次迭代之前检查循环条件。只有当条件为真时,循环体内的代码才会执行。它适用于不确定迭代次数的情况。
while (condition) {
    // 执行代码块
}
  1. do…while 循环:与while循环类似,不同之处在于do…while循环会先执行一次代码块,然后再检查循环条件是否满足。它确保循环体内的代码至少被执行一次。
do {
    // 执行代码块
} while (condition);
  1. for…in 循环:for…in循环用于遍历对象的可枚举属性,对数组来说也可以使用,但不推荐。
for (let key in object) {
    // 执行代码块
}
  1. for…of 循环:for…of循环用于遍历可迭代对象(如数组、字符串、Map、Set等)的元素。
for (let element of iterable) {
    // 执行代码块
}

循环语句的选择取决于具体的需求和情况。通常来说,for循环适用于已知迭代次数的情况,while和do…while适用于不确定迭代次数的情况,而for…in和for…of适用于遍历集合或对象的情况。

while循环

15 JavaScript学习:循环_学习_02

在JavaScript中,while循环是一种常用的循环语句,适用于当条件为真时重复执行代码块。while循环的结构如下:

while (condition) {
    // 执行代码块
}
  • 首先,判断condition是否为真(即条件是否满足)。
  • 如果条件为真,则执行循环体内的代码块。
  • 执行完毕后再次检查条件,如果仍然为真,则继续重复以上步骤直至条件为假。

以下是一个简单的示例,展示了如何使用while循环来计算1到5的和:

let sum = 0;
let i = 1;

while (i <= 5) {
    sum += i;
    i++;
}

console.log(sum); // 输出:15

在这个示例中,我们初始化变量sum为0,变量i为1。然后通过while循环,每次迭代将i加到sum中,并递增i,直到i超过5时循环结束。最终输出的结果为1到5的和为15。

需要注意的是,在使用while循环时需要小心避免无限循环,即条件永远为真导致循环无法停止。确保在循环体内有递增或递减的步骤,以让条件在某个时刻变为假。

do…while循环

do...while 循环是 JavaScript 中的另一种常见循环语句,它与 while 循环类似,但有一个关键区别:do...while 循环会先执行一次代码块,然后再检查循环条件是否满足。这确保了循环体内的代码至少被执行一次。do...while 循环的结构如下:

do {
    // 执行代码块
} while (condition);
  • 首先,执行循环体内的代码块。
  • 执行完毕后,检查 condition 是否为真。
  • 如果条件为真,则继续重复执行循环体内的代码块。
  • 如果条件为假,则循环结束。

以下是一个简单的示例,演示了如何使用 do...while 循环来计算1到5的和:

let sum = 0;
let i = 1;

do {
    sum += i;
    i++;
} while (i <= 5);

console.log(sum); // 输出:15

在这个示例中,无论条件是否满足,循环体内的代码块至少会执行一次。然后,通过检查条件 i <= 5,确定是否继续执行循环。

do...while 循环通常用于需要至少执行一次循环体内代码的情况,然后根据条件决定是否继续执行。与 while 循环相比,do...while 循环在执行循环体前先检查条件,因此即使条件一开始就不满足,循环体也会执行一次。

for…i循环

for 循环是 JavaScript 中最常用的循环语句之一,它允许在一定次数的循环中重复执行代码块。for 循环的结构如下:

for (initialization; condition; iteration) {
    // 执行代码块
}
  • initialization:在循环开始前执行的表达式,通常用于初始化计数器或者声明变量。
  • condition:在每次循环迭代前被求值的表达式。如果该表达式的值为 true,则继续循环;如果为 false,则退出循环。
  • iteration:在每次循环之后执行的表达式,通常用于递增或递减计数器。

以下是一个简单的示例,演示了如何使用 for 循环来计算1到5的和:

let sum = 0;

for (let i = 1; i <= 5; i++) {
    sum += i;
}

console.log(sum); // 输出:15

在这个示例中,for 循环首先初始化变量 i 为1,然后在每次循环迭代时检查 i <= 5 是否为真,如果为真则执行循环体内的代码块,并递增 i。当 i 超过5时,循环结束。

for 循环通常用于已知循环次数的情况下,因为其结构明确地指定了初始化、条件和迭代步骤。相比之下,whiledo...while 循环更适合在条件为真时重复执行代码块,或者在需要至少执行一次循环体的情况下使用。

for…in循环

for...in 循环是 JavaScript 中用于遍历对象属性的一种循环语句。它会枚举对象的可枚举属性,并对每个属性执行指定的代码块。for...in 循环的结构如下:

for (variable in object) {
    // 执行代码块
}
  • variable:在每次循环迭代中,将会赋值为当前属性的名称。
  • object:要遍历的对象。

以下是一个简单的示例,演示了如何使用 for...in 循环遍历对象的属性:

let person = {
    name: 'Alice',
    age: 30,
    gender: 'female'
};

for (let key in person) {
    console.log(key + ': ' + person[key]);
}

在这个示例中,for...in 循环遍历了 person 对象的所有属性,对每个属性执行了一段代码,输出了属性名和属性值。

需要注意的是,for...in 循环不仅会遍历对象自身的可枚举属性,还会遍历对象的原型链上的可枚举属性。因此,在使用 for...in 循环时,通常需要通过 hasOwnProperty 方法来检查属性是否是对象自身的属性,以避免遍历到继承的属性。

for...in 循环通常用于遍历对象的属性,特别是在处理未知数量的属性时非常实用。但在遍历数组时,推荐使用传统的 for 循环或者 forEach 方法。

for…of循环

for...of 循环是 JavaScript 中用于遍历可迭代对象的一种循环语句。它可以遍历数组、字符串、Map、Set 等可迭代对象,并对每个元素执行指定的代码块。for...of 循环的结构如下:

for (variable of iterable) {
    // 执行代码块
}

- `variable`:在每次循环迭代中,将会赋值为当前元素的值。
- `iterable`:要遍历的可迭代对象。

以下是一个简单的示例,演示了如何使用 for...of 循环遍历数组:

let arr = [1, 2, 3, 4, 5];

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

在这个示例中,for...of 循环遍历了数组 arr 的所有元素,并对每个元素执行了一段代码,输出了数组中的每个元素的值。

需要注意的是,for...of 循环只能遍历可迭代对象的值,而不能直接访问对象的键。如果需要遍历对象的键值对,可以使用 for...in 循环或者 Object.entries 方法。

for...of 循环通常用于遍历数组或其他可迭代对象的值,相比传统的 for 循环,它的语法更加简洁清晰,并且可以避免下标的管理。但需要注意的是,for...of 循环无法遍历普通的对象,因为普通对象不是可迭代的。

比较continue和break

continuebreak 是两种常用的控制流程的语句,它们用于在循环中进行条件控制和流程控制。

  1. continue语句:
  • continue 语句执行时,它会立即停止当前循环的迭代,并跳到下一次迭代。
  • forwhiledo...while 循环中,当 continue 语句执行时,循环会跳过当前迭代中的剩余代码,并开始下一次迭代。
  • continue 主要用于在不满足特定条件时跳过当前循环迭代,继续执行下一次迭代。
  • 通常用于处理特定条件下的特殊情况,或者遍历数组、对象等数据结构时跳过某些元素的处理。
  1. break语句:
  • break 语句执行时,它会立即终止当前所在的循环,并跳出该循环的执行流程,继续执行循环后面的代码。
  • forwhiledo...while 循环中,当 break 语句执行时,循环会立即停止执行,程序流程会跳出该循环,执行循环后面的代码。
  • break 主要用于在满足某些条件时立即终止循环的执行,提前跳出循环。
  • 通常用于在搜索特定条件或达到特定情况时停止循环,或者遍历数组、对象等数据结构时满足某个条件就终止循环。

比较:

  • continue 用于跳过当前迭代,继续执行下一次迭代;而 break 用于立即终止当前循环,跳出循环体。
  • continue 适用于特定条件下需要跳过某些迭代的情况,而 break 适用于需要提前结束整个循环的情况。
  • 在某些情况下,continuebreak 可以结合使用,根据不同的条件进行不同的控制流程。

比较for和while

forwhile 是 JavaScript 中两种常见的循环结构,它们都用于重复执行一段代码,但在语法和使用上有一些区别。

  1. for 循环
  • for 循环通常用于已知循环次数的情况,它的语法结构包括初始化、条件判断和迭代器。
  • 语法结构:
for (初始化; 条件判断; 迭代器) {
    // 执行代码块
}
  • 初始化:循环开始前执行的语句,通常用于初始化计数器或设置初始条件。
  • 条件判断:在每次迭代开始前都会检查的条件,如果条件为真,则继续执行循环体内的代码块;如果条件为假,则结束循环。
  • 迭代器:在每次迭代结束后执行的语句,通常用于更新计数器或迭代器变量。
  1. while 循环
  • while 循环用于在条件为真时重复执行一段代码,它的语法结构只包括条件判断。
  • 语法结构:
while (条件判断) {
    // 执行代码块
}
  • 条件判断:在每次迭代开始前都会检查的条件,如果条件为真,则继续执行循环体内的代码块;如果条件为假,则结束循环。

比较:

  • for 循环适用于已知循环次数的情况,例如遍历数组或执行固定次数的操作。
  • while 循环适用于条件未知、需要在满足特定条件时重复执行的情况,例如处理用户输入或实现动态条件下的循环。
  • for 循环的结构更加紧凑,适用于需要在有限次数内迭代的情况;而 while 循环则更加灵活,适用于处理未知次数的迭代。
  • 通常情况下,for 循环用于遍历数组等已知长度的数据结构,而 while 循遍历只关注条件是否满足,不关注循环长度。

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

15 JavaScript学习:循环_学习_03