JS for循环的多方面详解

JS for循环是JS语言中非常重要的循环语句之一。它允许我们对一个代码块进行多次不断的执行。下面从多个方面对JS for循环进行详细的阐述，以此加深读者对该语言的理解和应用。

一、JS for循环案例

首先，我们来看一段JS for循环的经典案例：

for (let i = 0; i < 10; i++) {
  console.log(i);
}

上述代码的意思是定义了一个从0开始，每次增加1，直到小于10的变量i。在循环过程中，我们可以通过console.log(i)语句来打印出i的值。这段代码的执行结果如下：

可以看到，JS for循环可以非常方便地对多个代码块进行多次执行，极大地方便了开发。

二、JS中for循环

JS中的for循环包含三个重要的部分：循环起始语句，循环终止判断语句和循环增量表达式。下面是一个完整的for循环语句：

for (循环起始语句; 循环终止判断语句; 循环增量表达式) {
  循环代码块
}

其中，循环起始语句是在循环开始前仅执行一次的代码，通常用来定义变量；循环终止判断语句用来判断循环是否应该继续执行，如果为false，则循环语句终止。循环增量表达式则是在每次循环执行后被执行的代码表达式。

三、JS for循环不停

在JS中，我们可以使用break语句来退出for循环语句，也可以使用continue语句来跳过循环的当前迭代。下面是一个用来控制for循环停止的案例：

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

在上述代码中，我们使用if语句来判断i的值是否等于5，如果等于5，则通过break语句来退出for循环。因此，当i等于5时，for循环不会继续执行。

另外一个常用的语句是continue语句。使用continue语句可以让我们跳过循环内的某一次迭代。下面是一个展示如何使用continue语句的例子：

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

在上述代码中，我们使用if语句来判断i的值是否等于5，如果等于5，则通过continue语句来跳过这次的循环迭代。因此，当i等于5时，这次的for循环不会执行console.log(i)语句。

四、JS for循环语句

JS for循环语句可以被用来循环一个对象、一个数组中的每一个元素，同时还可以改变数组中的每一个元素、删除数组中的某一个元素等。下面是一个JS for循环语句的例子：

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

for (let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] + 1;
}

console.log(arr);

在上述代码中，我们首先定义了一个数组arr，并且用for循环来循环数组中的每一个元素，并将其加1。最终，我们通过console.log(arr)语句来输出数组arr的所有值。该代码执行结果如下：

[2, 3, 4, 5, 6]

五、JS for循环输出问题

如果我们在循环过程中使用了console.log()语句打印输出，那么我们很有可能发现输出的值并不符合预期。例如，我们可以使用下面这个JS for循环来输出数字1到5：

for (let i = 1; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 0);
}

然而，上面的代码执行的结果并不是1到5，而是5个数字5。这是因为JS中的setTimeout是在一个新的执行栈中运行的，所以循环中的console.log(i)语句会在循环结束后才会执行，此时i已经变成了5。

为了解决这个问题，我们可以使用let关键字来声明i变量。下面是一个改进后的版本：

for (let i = 1; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 0);
}

在这个代码片段中，我们将let关键字用来声明i变量，这样每次循环时都会创建一个新的变量实例，从而解决了前面的问题。

六、JS for循环99乘法表代码

JS for循环在处理数组、对象等方面非常实用，同时也可以用来输出常见的乘法表。下面是一个JS for循环输出99乘法表的完整代码示例：

for (let i = 1; i <= 9; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += j + "x" + i + "=" + (i * j) + "";
  }
  console.log(row);
}

在这个代码片段中，我们使用for循环语句来输出99乘法表，首先遍历1到9的每一个数字，然后在内部使用另一个for循环来输出乘法表的每一行。最终，我们通过console.log(row)语句来输出整个乘法表。运行上述代码后，可以得到如下输出结果：

1x1=1
1x2=22x2=4
1x3=32x3=63x3=9
1x4=42x4=83x4=124x4=16
1x5=52x5=103x5=154x5=205x5=25
1x6=62x6=123x6=184x6=245x6=306x6=36
1x7=72x7=143x7=214x7=285x7=356x7=427x7=49
1x8=82x8=163x8=244x8=325x8=406x8=487x8=568x8=64
1x9=92x9=183x9=274x9=365x9=456x9=547x9=638x9=729x9=81

七、JS forEach循环遍历数组

除了使用for循环语句来循环数组外，我们还可以使用JS中的forEach方法来遍历数组。下面是一个使用JS forEach循环遍历数组的例子：

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

arr.forEach(num => {
  console.log(num);
});

在上述代码中，我们首先定义了一个数组arr，然后在forEach方法内部传递了一个匿名函数。这个函数接受数组中的每个元素作为参数，并执行console.log(num)语句来输出数组中的每个元素。最终，我们可以在控制台中看到数组中的每个元素被输出：

八、总结

JS for循环是JS语言中最常用的循环语句之一，可以帮助我们对多个代码块进行多次循环执行，同时还可以处理数组、对象等。在使用JS for循环时，需要注意使用break、continue等语句来进行控制，以及使用let关键字来避免出现变量共享的问题。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/180011.html