HTML5学堂-码匠 HTML5学堂

您当前位于:ECMAScript 基础语法 ——> while和do while循环语句的区别

while和do while循环语句的区别

2016/01/03 11:57:46 | 作者:HTML5学堂(码匠) | 分类:ECMAScript 基础语法 | 关键词:JavaScript,while,do while,循环

while和do while循环语句

HTML5学堂:在JS的循环语句当中,for、for-in的确是使用管比较频繁的,但是额外还有两种循环语句,一种是while语句,一种是do-while语句,今天主要讲解这看两种语句,并比较一下它们与for的区别。

学过计算机都会接触到循环,循环有很多种,今天我们就来看看while和do while的区别吧

while语句

语法:while(判断条件){}

while循环满足条件后执行大括号内的内容,下面我们来直接看下demo只有当达到条件时累加才会被执行

demo:

  1.     var sum = 0;//声明变量sum用于累加求和
  2.     var i = 1;//声明变量i用于条件判断
  3.     while(i<=100) {
  4.         sum = sum +i;
  5.         i++;
  6.     }
  7.     console.log(sum);//5050
  8.     console.log(i);//101

可以看到当大于100的时候while不满足条件因此没有执行累加,最后结果就为1加到100的结果

do while语句

语法:do {执行} while(条件)

do while循环在字面上就能与while循环区分开来,do while不管结果如何,先do了再进行判断,典型的先斩后奏型,因此第一次执行时无论是否满足条件do里面的代码都将被执行

例如以下demo

  1.     var i = 1;
  2.     do {
  3.         console.log(i); // 1
  4.         i++;
  5.     } while (i < 0);
  6.     console.log(i); // 2

可以看得出来,i不小于0,但是do内的代码还是执行了一次,最终i变为2,因此do while在执行过程中do内代码必定被执行至少一次。

for循环

前端开发中for循环用的较为频繁,for循环类似while循环。

语法:for(初始化;判断语句;表达式){}

用for循环写一个1加到100的程序

  1.     var sum = 0; // 用于存储计算总和
  2.     for (var i = 1; i <= 100; i++) {
  3.         sum = sum + i;
  4.     };
  5.     console.log(sum); // 5050
  6.     console.log(i); // 101

将for循环与while循环对比可以发现,for循环将初始化,条件和表达式都放在一起了使大括号内容可以变得更精简。

实际开发中应尽可能的减少循环操作,如果是从一百个数据内找一个符合条件的内容,适当合理的中断循环是非常必要的,当数据较多时,遍历一次数据耗时会很长,重复的遍历查找会成倍的增加不必要的执行时间,直接影响了页面的性能,使页面响应变慢。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端