js怎么使用循环语句

JavaScript中的循环语句有助于我们在编写代码时高效地执行重复操作。for循环、while循环、do…while循环是JavaScript中最常用的循环语句。本文将详细介绍这三种循环语句的用法，并提供一些实际应用的示例和注意事项。

一、FOR循环

基本语法

for循环是最常见的循环形式。其基本语法如下：

for (initialization; condition; increment) {

    // code to be executed
}

• initialization: 初始化计数器变量，只执行一次。
• condition: 每次循环前判断，如果条件为真，则执行循环体。
• increment: 每次循环后执行，更新计数器。

示例

for (let i = 0; i < 5; i++) {

    console.log(i);
}

在这个例子中，i从0开始，每次循环自增1，直到i小于5为止。

高级用法

可以用for循环遍历数组或对象属性：

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

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

对于对象，可以使用for...in循环：

let obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key + ": " + obj[key]);
    }
}

二、WHILE循环

基本语法

while循环在每次迭代前都会检查条件，如果条件为真，则执行循环体。其基本语法如下：

while (condition) {

    // code to be executed
}

示例

let i = 0;

while (i < 5) {
    console.log(i);
    i++;
}

在这个例子中，i从0开始，每次循环自增1，直到i小于5为止。

高级用法

while循环适用于当条件不确定，需要在循环内部改变条件的情况：

let n = 0;

let x = 0;
while (n < 3) {
    n++;
    x += n;
}
console.log(x); // 输出6

三、DO…WHILE循环

基本语法

do...while循环与while循环类似，但它会至少执行一次循环体，然后再检查条件。其基本语法如下：

do {

    // code to be executed
} while (condition);

示例

let i = 0;

do {
    console.log(i);
    i++;
} while (i < 5);

在这个例子中，i从0开始，每次循环自增1，直到i小于5为止。

高级用法

do...while循环在需要至少执行一次循环体时非常有用：

let text = "";

let i = 0;
do {
    text += "The number is " + i + "n";
    i++;
} while (i < 5);
console.log(text);

四、嵌套循环

基本语法

嵌套循环是指在一个循环体内再使用一个循环。其基本语法如下：

for (let i = 0; i < 5; i++) {

    for (let j = 0; j < 5; j++) {
        // code to be executed
    }
}

示例

for (let i = 0; i < 3; i++) {

    for (let j = 0; j < 3; j++) {
        console.log("i: " + i + ", j: " + j);
    }
}

在这个例子中，内外两个循环分别执行3次，共会输出9次。

高级用法

嵌套循环在处理多维数组时非常有用：

let matrix = [

    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log("Element: " + matrix[i][j]);
    }
}

五、循环中断与继续

break语句

break语句可以提前退出循环：

for (let i = 0; i < 5; i++) {

    if (i === 3) {
        break;
    }
    console.log(i);
}
// 输出：0, 1, 2

continue语句

continue语句可以跳过当前循环，继续下一次迭代：

for (let i = 0; i < 5; i++) {

    if (i === 3) {
        continue;
    }
    console.log(i);
}
// 输出：0, 1, 2, 4

六、性能与优化

减少不必要的计算

在循环中，尽量减少不必要的计算，提高性能：

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

let len = array.length;
for (let i = 0; i < len; i++) {
    console.log(array[i]);
}

在这个例子中，我们将array.length存储在变量len中，以避免每次循环都计算数组长度。

使用合适的循环类型

选择合适的循环类型，根据实际情况选择for、while或do...while循环，以提高代码的可读性和效率。

七、实战案例

数组去重

使用循环实现数组去重：

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

let uniqueArray = [];
for (let i = 0; i < array.length; i++) {
    if (uniqueArray.indexOf(array[i]) === -1) {
        uniqueArray.push(array[i]);
    }
}
console.log(uniqueArray); // 输出：[1, 2, 3, 4, 5]

求数组元素的和

使用循环计算数组元素的和：

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

let sum = 0;
for (let i = 0; i < array.length; i++) {
    sum += array[i];
}
console.log(sum); // 输出：15

生成乘法表

使用嵌套循环生成乘法表：

for (let i = 1; i <= 9; i++) {

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

八、循环的常见错误

死循环

死循环是指循环条件永远为真，导致程序无法退出循环。常见原因包括条件错误和计数器未更新：

let i = 0;

while (i < 5) {
    console.log(i);
    // i++ 被遗忘，导致死循环
}

数组越界

数组越界是指访问数组不存在的元素，常见原因包括循环条件错误或索引错误：

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

for (let i = 0; i <= array.length; i++) {
    console.log(array[i]); // 当 i 为 5 时，array[5] 不存在，导致越界
}

九、总结

本文详细介绍了JavaScript中常用的三种循环语句：for循环、while循环和do...while循环，并讨论了它们的基本语法和高级用法。通过实战案例和常见错误的解析，读者可以更好地理解和使用循环语句。选择合适的循环类型、优化循环性能以及避免常见错误，是编写高效、健壮代码的关键。

相关问答FAQs：

1. 使用循环语句的目的是什么？
循环语句是用于重复执行特定代码块的一种方法，可以减少重复的代码，提高代码的效率和可读性。

2. 有哪些类型的循环语句可以在JavaScript中使用？
JavaScript中有三种常用的循环语句：for循环、while循环和do-while循环。每种循环语句都适用于不同的场景和需求。

3. 如何使用for循环语句在JavaScript中执行循环？
使用for循环语句可以在JavaScript中实现循环。语法是：for (初始化; 条件; 步进) {执行的代码块}。在初始化中设置循环变量的初始值，条件用于判断是否继续执行循环，步进用于更新循环变量的值。通过控制循环变量的变化来控制循环的次数。

4. 如何使用while循环语句在JavaScript中执行循环？
使用while循环语句可以在JavaScript中实现循环。语法是：while (条件) {执行的代码块}。在循环开始之前，首先判断条件是否为真，如果为真则执行代码块，然后再次判断条件，如此重复直到条件为假时结束循环。

5. 如何使用do-while循环语句在JavaScript中执行循环？
使用do-while循环语句可以在JavaScript中实现循环。语法是：do {执行的代码块} while (条件)。与while循环不同的是，do-while循环先执行一次代码块，然后再判断条件是否为真，如果为真则继续执行代码块，如此重复直到条件为假时结束循环。

6. 循环语句中可以使用break和continue关键字吗？
是的，循环语句中可以使用break和continue关键字。break用于提前结束整个循环，continue用于跳过当前循环的剩余代码并进入下一次循环。这两个关键字可以在循环中根据需要灵活使用，以满足特定的需求。

7. 循环语句中的循环变量可以在循环外部访问吗？
在JavaScript中，循环变量的作用域通常是在循环内部。这意味着循环变量只能在循环内部访问，并且在循环结束后将不再可用。如果需要在循环外部访问循环变量，可以在循环外部定义一个变量，并在循环内部更新该变量的值。