每个 JavaScript 循环类型解释: [With Codeblocks and Examples]

JavaScript 是最常用的编程语言之一。 打算成为 JavaScript 工程师的开发人员必须学习循环的基础知识、它们的类型以及它们的工作原理。

JavaScript 循环是一种用于根据特定条件执行重复任务的工具。 另一方面,“迭代”是一个通用术语,意思是在循环的上下文中重复。 循环将继续迭代,直到满足停止条件。

为了更好地理解它,您可以将其视为一种计算机化游戏,指示您向北走 X 步,然后向左走 Y 步。

您可以表示向北走 7 步;

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

当上面的代码块被执行时,你会得到这个;

为什么通常使用循环?

  • 执行重复性任务:您可以使用循环来执行指令,直到满足特定条件。
  • 遍历对象或数组:使用循环,您可以遍历对象的属性或数组的元素,从而允许您对每个属性或元素执行某些操作。
  • 过滤数据:您可以使用循环根据特定条件过滤数据。

JavaScript 循环有不同的形式; 为、同时、做……同时、为……的和为……在。 让我们详细探讨它们并演示它们是如何工作的。

For循环

for 循环将重复,直到指定条件的计算结果为真。 for 循环具有三个可选表达式,后跟一个代码块。

for (initialization; condition; finalExpression) {

  // code

}
  • 初始化表达式出现在第一个循环执行之前。 该表达式通常会初始化一个或多个计数器。
  • 在 for 循环运行之前,每次都会检查条件表达式。 每次表达式的计算结果为真时,循环或语句中的代码都会执行。 另一方面,当表达式的计算结果为 false 时循环停止。 但是,如果省略表达式,表达式将自动计算为真。
  • finalExpression 在每次循环迭代后执行。 该表达式主要用于递增计数器。

您可以使用 {},块语句,对多个语句进行分组和执行。 如果您想在条件表达式计算结果为 false 之前提前退出循环,请使用 break 语句。

for 循环代码示例

  • 使用for循环进行迭代;
  • for (let i = 0; i < 7; i++) {
    
      console.log(i);
    
    }

    在这个代码块中;

    • 变量 i 被初始化为零(设 i=0)。
    • 条件是 i 应该小于 7 (i=7)。
    • 如果 i 的值小于 7 (i<7>.
    • 迭代将在每次迭代后将 1 加到 i 的值 (++1)。

  • 使用 break 语句在条件计算为 false 之前退出循环;
  • for (let i = 1; i < 11; i += 2) {
    
      if (i === 9) {
    
        break;
    
      }
    
      console.log('Total developers: ' + i);
    
    }
    • 代码块从 1 迭代到 10 (i<11)。
    • 循环初始化一个值为 1 的变量 i(令 i = 1)。
    • 如果 i 的值小于 11 (i < 11),循环条件将继续执行。
    • i 的值在每次迭代后增加 2 (i += 2)。

    if 语句评估 i 的值是否为 9。 如果条件为真,则执行 break 语句,然后循环终止。

    (图像)

    For…of 循环

    for…of 循环遍历可迭代对象,例如 Map、Array、Arguments 和 Set。 此循环调用自定义迭代挂钩,其中包含针对每个不同属性的值执行的语句。

    for…循环的基本结构是;

    for (variable of object)
    
      statement

    for…of 循环的例子

  • For…of 循环遍历数组
  • const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
    
    for (let i of frontendLanguages) {
    
      console.log(i);
    
    }

    在这段代码中;

    • 我们定义一个名为 frontendLanguages 的数组
    • 该数组具有三个元素; “HTML”、“CSS”、“JavaScript”和“React”。
    • for…of 循环遍历 frontendLanguages 中的每个元素。
    • 代码块中的 i 在每次迭代期间占用每个元素的值以及打印在控制台上的值。

  • For…of 循环遍历集合
  • const s = new Set();
    
    s.add(2);
    
    s.add("grey");
    
    for (let n of s) {
    
      console.log(n);
    
    }

    在这段代码中;

    • 我们声明了一个变量 s,我们使用 Set() 构造函数将其分配给一个新的 Set。
    • 使用 add() 方法将两个元素添加到代码中
    • for….of 遍历元素对象。
    • 在执行 console.log(n) 语句之前,循环将当前元素分配给 n。

  • For…of 循环遍历 Map
  • const m = new Map();
    
    m.set(4, "rabbit");
    
    m.set(6, "monkey");
    
    m.set(8, "elephant");
    
    m.set(10, "lion");
    
    m.set(12, "leopard");
    
    for (let n of m) {
    
      console.log(n);
    
    }

    在这个代码块中;

    • 我们使用 Map() 构造函数来创建一个新的 Map 对象。
    • 声明了一个变量 m。
    • 使用 .set() 方法,我们添加了五个键值对。
    • for…of 循环遍历 Map 对象 m 的元素。

    对于…在循环中

    for…in 循环用于迭代对象的属性。 for…in 循环的基本结构是;

    for (property in object) {
    
      // code
    
    }

    您可以使用 for…in 循环来遍历数组和类数组对象。

    const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
    
    for (const vegetable in shoppingList) {
    
      console.log(vegetable);
    
    }

    在这个代码块中;

    • 我们引入一个 JavaScript 对象并将其命名为 shoppingList。
    • 我们使用 for 循环使用 in 运算符迭代 shoppingList 上的每个属性。
    • 在每次迭代中,循环分配 shoppingList 中的当前属性名称。

    尽管

    while 循环评估一个条件,如果它发现它为真,则代码块执行。 但是,如果条件为假,循环结束,代码块将不会被执行。

    这是 while 循环的基本结构;

    while (condition)
    
        Statement

    测试条件必须出现在循环语句执行之前。 您可以使用 {} 或块语句执行多个语句。

    while 循环的例子

    let n = 0;
    
    while (n < 9) {
    
      console.log(n);
    
      n++;
    
    }

    在这段代码中;

    • 变量 n 初始化为零值(令 n=0)。
    • 只要 n 的值小于 9 (n<9),循环就会执行
    • n的值显示在控制台上,每次迭代后加1(n++)
    • 代码将在 8 点停止执行。

    做… While 循环

    do…while 循环迭代直到特定条件的计算结果为 false。

    do…while 语句的一般结构是;

    do
    
      statement
    
    while (condition);

    该语句执行一次但在检查条件之前。 如果条件为真,语句将执行。 但是,如果评估的条件为假,执行将停止,并且控制传递到 do..while 之后的语句。 do…while 循环中的代码保证至少运行一次,即使条件计算结果为真。

    do…while 的例子

    let n = 0;
    
    do {
    
      n += 1;
    
      console.log(n);
    
    } while (n < 7);

    在这段代码中;

    • 我们引入一个变量 n 并将其初始值设置为 0(令 n=0)。
    • 我们的变量 n 进入一个 do…while 循环,在每次迭代后它的值递增 1 (n+=1)
    • 记录 n 的值。
    • 只要 n 的值小于 7 (n<7),循环就会继续执行。

    当您运行此代码时,控制台将显示 n 的值,从 1 开始到 7,因为循环执行了 7 次。

    嵌套循环

    嵌套循环是我们在循环中有循环的情况。 例如,我们可以将一个 for 循环嵌套在另一个 for 循环中。

    for (let outer = 0; outer < 5; outer += 2) {
    
      for (let inner = 0; inner < 6; inner += 2) {
    
        console.log(`${outer}-${inner}`);
    
      }
    
    }
    • 有两个变量; outer 和 inner 都用零值初始化。
    • 每次迭代后,两个变量都递增 2
    • 外循环和内循环各迭代三次。

    循环控制语句

    循环控制语句,有时称为“跳转语句”,会中断程序的正常流程。 Break 和 continue 是循环控制语句的示例。

    中断语句

    Break 语句会立即终止循环,即使条件尚未满足也是如此。

    for (let n = 1; n <= 26; n++) {
    
      if (n === 13) {
    
        console.log("Loop stops here. We have reached the break statement");
    
        break;
    
      }
    
      console.log(n);
    
    }

    呈现的代码将显示为;

    继续声明

    Continue 语句用于跳过某段代码,对新的循环进行迭代。

    for (let n = 0; n <= 10; n++) {
    
      if (n === 5) {
    
        continue;
    
      }
    
      console.log(n);
    
    }

    呈现的代码将显示为;

    结论

    以上是您将在原生 JavaScript 及其框架/库中遇到的常见循环。 正如突出显示的那样,每种循环类型都有其用例和不同的行为。 如果您选择了错误的循环类型,您可能会遇到错误,并且您的代码可能会显示出意想不到的行为。

    如果您正在处理 JavaScript 框架或库,请始终查看其文档并使用内置循环。

      关于在 Excel 中共同创作你需要知道的一切