关于前端的碎碎念3-JavaScript基础7-JavaScript中的For 循环和while循环
【摘要】 本节介绍Javasctipt中的For 循环和while循环
说完css装修，我们终于要给房子打造一些功能啦~follow me~
本节介绍Javasctipt中的For 循环和while循环
所谓循环，就是重复执行一段代码。
前面我们已经看到了，if else和switch是JavaScript具有了判断的能力，但是老实说，电脑的判断能力和人比起来差远了。电脑更擅长一件事情——不停地重复。我们在JavaScript中把这叫做循环(loop)。
for循环的简单例子——菜鸟报数
在了解for循环的语法之前，还是让我们来看一个简单的例子吧：有十个菜鸟报数，“菜鸟1号、菜鸟2号”。有了for循环，很少的代码就可以实现十个菜鸟的报数。
<script type="text/javaScript">
var i=1;
for (i=1;i<=10;i++)
{
document.write("菜鸟"+i+"号<br />");
}
</script>结果如下：
for循环的工作方式
在上面那个例子中，循环恰好执行了10次，那么和“for (i=1;i<=10;i++)”一句中的10是不是10次的意思呢？下面我们就来看看for循环的工作机制。
首先"i=1"叫做初始条件，也就是说从哪里开始，特别的，我们的例子从i=1开始。
出现在第一个分号后面的"i<=10"表示判断条件，每次循环都会先判断这个条件是否满足，如果满足则继续循环，否则停止循环，继续执行for循环后面的代码。你可能想问了，我们设定了i=0，岂不是永远都小于等于10吗？来看第三个部分。
最后的"i++"表示让i在自身的基础上加1，这时每次循环后的动作.也就是说，每次循环结束，i都会比原来大1，执行若干次循环之后，i<=10的条件就不满足了，这时循环结束。for循环后面的代码将得到执行。
for循环总结
至此，我们可以吧for循环总结如下：
for(初始条件;判断条件;循环后动作)
{
循环代码
}
（1）初始条件是初始循环的表达式，它在循环开始的时候被执行一次（）
（2）终止条件是什么时候终止循环，这个表达式在每次循环的过程中被计算一次。当表达式结构为false的时候，这个循环结束
（3）增量式循环一次增加多少（步长）的表达式
（4）循环体是被重复执行的语句块
一个小例子：计算从1到100之间的整数运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//定义变量存储1-100之间的所有整数的总和
var sum = 0;
//定义变量存储1-100之间的所有整数总和的平均值
var average = 0;
//定义变量存储1-100之间的所有偶数的和
var even = 0;
//定义变量存储1-100之间的所有7的倍数的和
var result7 = 0;
//定义一个for循环进行以上四个值的计算
for (var i = 0; i <= 100; i++) {
sum=sum+i;
if (i%2==0){
even=even+i;
}
if(i%7==0){
result7=result7+i;
}
}
average=sum/100;
//输出结果
document.write("1-100之间的所有整数的总和是" + sum+"<br>");//5050
document.write("1-100之间的所有整数总和的平均值是" + average+"<br>");//50.5
document.write("1-100之间的所有偶数的和是" + even+"<br>");//2550
document.write("1-100之间的所有7的倍数的和是" + result7+"<br>");//735
</script>
</head>
</html>运算结果
JavaScript While循环
while循环重复执行一段代码，直到某个条件不再满足。
循环的另一种方法
其实while循环和for循环的作用都是重复执行代码，例如下面这段代码，和上一节for循环的输出结果完全没有区别。先来读读例子的代码，下面会解释为什么这个循环会和上一节的for循环等价。
<script type="text/javaScript">
var i=0;
while (i<=10)
{
document.write("菜鸟"+i+"号");
document.write("<br />");
i=i+1;
}
</script>while循环的工作机制
让我们来看看while循环的执行过程：
while(判断条件)
{
循环代码
}
运算结果
看起来好像比for循环少了点东西啊，只有一个判断条件啊。其实这个循环也是有初始条件的，只不过在之前就已经定义好了，例如上面例子中的"var i=0;"，至于变量i的增大，则是放到了循环体里面，其实这个过程和for没有什么区别，也是变量i不断变大，直到判断条件不满足，则循环结束。
注意：
n次循环,如果i从0开始，则循环条件为i<n
n次循环,如果i从1开始，则循环条件为i<=n 也等价于i<n+1
i=0,1,2,3,4 因为i是控件循环次数的，所以i又叫循环变量
do while结构
do wile结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件。例子如下：
<script type="text/javaScript">
i = 0;
do
{
document.write("菜鸟 " + i +"号");
document.write("<br />");
i++;
}
while (i <= 5)
</script>运行结果：
总结：do-while语句与while语句的区别在于，先执行循环体中的语句在计算条件表达式，所以do-while语句的循环体至少被执行一次。而对于while语句来说，需要先计算条件表达式然后才会执行循环体，所以对于while语句如果条件表达式一开始结果就为false，那么一次也不会执行。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）