Javascript 控制流详解：条件语句、循环语句

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

JavaScript的控制流语句允许你控制程序的执行顺序，包括条件执行、循环和异常处理等。以下是JavaScript中主要控制流语句的详解及示例代码。

一. 条件语句

if…else

用于基于不同的条件执行不同的代码块。

let age = 18;

if (age >= 18) {
    console.log("你已成年。");
} else {
    console.log("你还未成年。");
}

switch

用于多分支选择，基于不同的case执行相应代码。

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("今天是周一");
        break;
    case "Tuesday":
        console.log("今天是周二");
        break;
    default:
        console.log("今天是其他日子");
}

二、 循环语句

for

重复执行一段代码，直到满足特定条件。

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

while

当给定条件为真时，重复执行代码块。

let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}

do…while

与while相似，但至少执行一次循环体，即使初始条件为假。

let num = 0;
do {
    console.log(num);
    num++;
} while (num < 0);

三、循环控制语句

• break：立即退出循环。
• continue：跳过当前迭代，继续下一次循环。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        console.log("跳过了5");
        continue; // 跳过打印5
    }
    if (i > 7) {
        console.log("提前结束循环");
        break; // 结束循环
    }
    console.log(i);
}

四、注意事项

• 避免无限循环：确保循环条件最终能够变为false，避免造成浏览器或应用卡死。
• 清晰的逻辑：控制流语句应保持简洁明了，避免过深的嵌套，可以使用提前返回、函数分解等方式优化代码结构。
• 性能考量：在处理大量数据时，循环效率尤为重要，尽量减少不必要的计算和操作。
• 代码可读性：使用有意义的变量名，适当添加注释，使控制流逻辑易于理解和维护。

掌握控制流是编写逻辑清晰、高效JavaScript代码的关键。