一篇文章带你了解JavaScript While 循环

开发 前端
本文基于JavaScript基础。主要介绍了While循环的基础应用,以及其中另外一种do ... while循环,同时介绍了while和do ... while循环之间的区别。和For和While循环分别的优缺点进行了详细的讲解。

[[406778]]

循环可以执行一个代码块,只要指定条件为真,循环就可以执行代码块。

一、While循环

while只要指定条件的值为真,循环就会执行指定语句。

while循环的语法

  1. while (condition) { 
  2. statement 
  3.    // 只要条件为真,就执行代码 

例:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua;"
  6. <h1>JavaScript while 语句</h1> 
  7.  
  8. <p>只要n小于5,就遍历一段代码:</p> 
  9.  
  10. <script> 
  11. var n = 0; 
  12.  
  13. while (n < 5) { 
  14. document.write("<br>The number is " + n); 
  15. n++; 
  16. </script> 
  17.  
  18. </body> 
  19. </html> 

首先,在循环开始之前设置一个变量(var n = 0;)。

然后,定义循环运行的条件。只要变量小于5,循环就会继续,每次执行循环时,变量将增加一个(n ++) 一旦变量不小于5,条件为false,循环将结束。

注意:

如果要使用带有条件的变量,请在循环之前对其进行初始化,然后在循环内对其进行递增。如果忘记增加变量,循环将永远不会结束。这将使您的浏览器崩溃。

二、无限循环

无限循环顾名思义,是一个循环,将永远保持运行。

如果不小心造成无限循环,可能会导致浏览器或计算机崩溃。重要的是要意识到无限循环,以便您可以避免它们。

当while语句的条件设置为true时,会发生一个常见的无限循环。

  1. while (true) { 
  2.     statement 
  3.   // 永远执行代码 

无限循环将永远运行,但是可以使用break关键字终止程序。

三、Do ... While循环

该do...while循环是while循环另外一种形式。在检查条件是否为真之前,此循环将执行一次代码块,然后只要条件为真,它将重复该循环。

该do...while循环的语法如下:

  1. do { 
  2.    statement 
  3.   // 要执行的语句 
  4. while (condition); 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua;"
  6. <h1>JavaScript do...while</h1> 
  7.  
  8. <p>只要n小于5,就遍历一段代码:</p> 
  9.  
  10. <script> 
  11. var n = 0; 
  12.  
  13. do { 
  14. document.write("<br>数字: " + n); 
  15. n++; 
  16. while (n < 5); 
  17. </script> 
  18.  
  19. </body> 
  20. </html> 

不要忘记增加条件中使用的变量,否则循环将永远不会结束。

注意:即使条件为false,这个循环也总是至少执行一次,因为代码块是在条件测试之前执行的。

  1. var n = 5; 
  2. do { 
  3.   document.write("<br>数字是 " + n); 
  4.   n++; 
  5. while (n < 3);  // false 

四、循环对比

1.while和do ... while循环之间的区别

while循环不同于do…while循环以一种重要的方式使用while循环,在每次循环迭代开始时测试要计算的条件,因此如果条件表达式的计算结果为false,则将永远不会执行循环。

另一方面,使用do ... while循环,即使条件表达式的计算结果为false,该循环也将始终执行一次,因为与while循环不同,条件是在循环只回执行末尾而不是在开始时计算的。(参考百度)。

2. For和While循环对比

for循环使用循环从fruits数组中获取水果名称。

例:

  1. var fruits = ['strawberry''Mango''Banana''pineapple']; 
  2. var txt = ''
  3. for (var i = 0; i < fruits.length; i++) { 
  4.     txt += fruits[i] + '<br>'

while循环使用循环从fruits数组中获取水果名称。

例 :

  1. var fruits = ['strawberry''Mango''Banana''pineapple']; 
  2. var txt = ''
  3. var i = 0; 
  4.  
  5. while (i < fruits.length) { 
  6.    txt += fruits[i] + '<br>'
  7.    i++; 

将发现while循环与for循环非常相似,只是省略了初始化和最终表达式。

五、总结

本文基于JavaScript基础。主要介绍了While循环的基础应用,以及其中另外一种do ... while循环,同时介绍了while和do ... while循环之间的区别。和For和While循环分别的优缺点进行了详细的讲解。

代码很简单。希望能够帮助你更好的学习。

 

责任编辑:姜华 来源: 前端进阶学习交流
相关推荐

2021-08-13 15:09:47

JavaScriptWhile循环

2021-03-05 18:04:15

JavaScript循环代码

2024-01-30 13:47:45

2023-09-06 14:57:46

JavaScript编程语言

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2023-07-30 15:18:54

JavaScript属性

2021-01-26 23:46:32

JavaScript数据结构前端

2021-03-09 14:04:01

JavaScriptCookie数据

2021-06-24 09:05:08

JavaScript日期前端

2021-04-20 10:00:47

JavaScript类型基础

2021-11-16 07:54:33

JavaScript导航HTML

2021-07-02 10:00:50

JavaScriptObject 函数

2020-10-22 09:08:34

JavaScript

2020-10-20 15:37:48

了解JavaScrip

2023-06-15 10:11:08

JavaScript函数表达式

2023-07-06 14:40:38

2021-04-30 09:44:30

JavaScript 前端Window Hist

2020-10-27 11:24:29

avaScript m

2021-04-06 20:57:31

JavaScript弹出框窗口

2021-03-23 10:01:41

JavaScript事件监听开发技术
点赞
收藏

51CTO技术栈公众号