JavaScript循环语句详解：for、while与do...while用法

JavaScript循环语句概述

若需计算1+2+3的和，可直接编写表达式：

1 + 2 + 3; // 6

计算1+2+3+...+10虽可行，但处理1+2+3+...+10000则无法直接写表达式。为实现成千上万次重复运算，需使用循环语句。JavaScript提供两种循环：for循环，依据初始、结束及递增条件执行语句块；

var x = 0;
var i;
for (i=1; i<=10000; i++) {
  x = x + i;
}
x; // 50005000

下面具体分析for循环的控制条件构成：

• i=1 为初始条件，将变量i初始化为1； • i<=10000 为判断条件，只要满足该条件则继续循环，否则退出； • i++ 为递增条件，每次循环后i自增1，随着循环次数增加，i终将不再满足i<=10000，从而终止循环。

练习

请使用for循环计算1 * 2 * 3 * ... * 10的乘积结果。

for循环最常见的应用场景是通过索引遍历数组：

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
  x = arr[i];
  alert(x);
}

for循环中的三个条件部分均可省略。若省略了退出循环的判断条件，则必须借助break语句来手动退出，否则将导致死循环：

var x = 0;
for (;;) { // 将无限循环下去
  if (x > 100) {
    break; // 通过if判断来退出循环
  }
  x ++;
}

for ... in

for循环的一个变体是for ... in循环，它用于依次遍历对象的所有属性：

var o = {
  name: 'Jack',
  age: 20,
  city: 'Beijing'
};
for (var key in o) {
  alert(key); // 'name', 'age', 'city'
}

若需过滤掉对象继承自原型的属性，可使用hasOwnProperty()方法进行判断：

var o = {
  name: 'Jack',
  age: 20,
  city: 'Beijing'
};
for (var key in o) {
  if (o.hasOwnProperty(key)) {
    alert(key); // 'name', 'age', 'city'
  }
}

由于Array本质上也是对象，且其每个元素的索引被视为对象的属性，因此for ... in循环可以直接用于遍历Array的索引：

var a = ['A', 'B', 'C'];
for (var i in a) {
  alert(i); // '0', '1', '2'
  alert(a[i]); // 'A', 'B', 'C'
}

需要注意的是，for ... in遍历Array时返回的索引值是String类型而非Number类型。

while

当已知循环的初始条件和结束条件时，for循环非常适用。而对于那些条件不明确或逻辑复杂的场景，省略条件的for循环可能使代码可读性降低，此时使用while循环更为合适。

while循环仅包含一个判断条件：只要条件为真，就持续执行循环体；条件为假时则退出。例如，计算100以内所有奇数之和，可使用while循环实现：

var x = 0;
var n = 99;
while (n > 0) {
  x = x + n;
  n = n - 2;
}
x; // 2500

在循环体内，变量n不断自减2，直至变为-1时不再满足while条件，循环随之结束。

do ... while

最后一种循环结构是do { ... } while()循环。它与while循环的唯一区别在于判断时机：while在每次循环开始前判断，而do...while在每次循环执行完毕后判断：

var n = 0;
do {
  n = n + 1;
} while (n < 100);
n; // 100

使用do { ... } while()循环时需格外小心，因为无论条件是否满足，循环体至少会执行一次，而for和while循环可能一次都不执行。

练习

请利用循环遍历数组中的每个名字，并输出格式为Hello, xxx!的信息。

请分别尝试使用for循环和while循环，并以正序和倒序两种方式进行遍历。

小结

循环是让计算机执行重复任务的有效手段。然而，若代码编写存在逻辑错误，可能导致程序陷入“死循环”，即无限循环下去。JavaScript中的死循环会导致浏览器无法正常渲染页面或执行逻辑，部分浏览器会直接崩溃，部分则会在一段时间后提示用户强制终止JavaScript执行。因此，务必高度重视死循环问题。

编写循环代码时，必须谨慎设定初始条件和判断条件，特别是边界值。需特别注意i < 100与i <= 100在判断逻辑上的差异。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。