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

r囧r小猫 2024-05-28 10:14 75阅读 0赞

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

![在这里插入图片描述][4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]

#### 文章目录 ####

*   *  一. 条件语句
     *   *  if...else
         *  switch
     *  二、 循环语句
     *   *  for
         *  while
         *  do...while
     *  三、循环控制语句
     *  四、注意事项

--------------------

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代码的关键。

[4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/2443da0752544942aa72f463786c4157.png
[744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/30f8ff79343f4d5fb9b4841ad07baa2b.png