我们先看几个关于while循环语句的简单问题。
问题一:
请用while求出1到100的和,并在控制台中打印出来。
我们很小的时候就听过数学家高斯计算1到100的和的故事,他可以很快的计算出1到100的和。高斯是这样算的:1+100=101,2+99=101······50+51=101。从1加到100有50组这样的数,所以50X101=5050
问题二:
让用户输入用户名和密码,如果正确,提示“用户名和密码正确”,程序结束。如果错误,就一直输入。
(正确的用户名是:ujiuye,密码是:666666)
问题三:
计算1到100相加的和,但是,如果这个数的个位数是9,那就不要把这个数加进去。
我们可以看出,上面这几个问题都分别重复做着一件事儿,就需要我们运行多次代码,假如您需要运行代码多次,且每次使用不同的值,因此,我们使用循环语句的话就很方便了。
循环语句是JavaScript中一类允许执行重复动作的语句,同条件语句一样,循环语句也是JavaScript的基本控制语句,在JavaScript中循环语句主要有:while循环和for循环两种形式,这几个问题中我们都使用while来解决。
下面我们来依次分析下:
Ø 问题一用到了while循环
while循环
while 循环会一直循环代码块,只要指定的条件为 true。
语法:
- while (条件) {
- 要执行的代码块
- }
while循环的执行流程:
当代码执行到while的时候,会先判断判断条件是否为true,如果为true,那么会执行while大括号中的代码块,代码块执行完毕以后,再次回到while中再进行判断,如果为true,再次执行while大括号中的代码块,并且再次回while,如果为false就不执行大括号中的代码块。
例如:
请用while求出1到100的和,并在控制台中打印出来。
- var i = 1;
- var sum = 0;
- while (i <= 100) {
- sum += i;
- i++;
- }
- console.log(sum);
上面代码运行的步骤:
执行var i= 1; var sum = 0;这两条语句,所以i的值是1,sum的值是0。
然后程序会验证下 i<=100 是否满足,1<=100是真,所以执行一次循环体。
执行完循环体之后,sum的值是1,i的值是2。
然后程序会验证下 i<=100 是否满足,2<=100是真,所以执行一次循环体。
执行完循环体之后,sum的值是3,i的值是3。
然后程序会验证下 i<=100 是否满足,3<=100是真,所以执行一次循环体。
执行完循环体之后,sum的值是6,i的值是4。
然后程序会验证下 i<=100 是否满足,4<=100是真,所以执行一次循环体。
执行完循环体之后,sum的值是10,i的值是5。
然后以此类推。。。
直到i的值是101的时候,程序会验证下 i<=100 是否满足,101<=100是假,所以不执行循环体,程序跳出循环。
Ø 问题二用到了break语句
break 语句
作用:“跳出”循环。
break 语句会中断循环,并继续执行循环之后的代码。
例如:
让用户输入用户名和密码,如果正确,提示“用户名和密码正确”,程序结束。如果错误,就一直输入。
(正确的用户名是:ujiuye,密码是:666666)
我们使用上面刚提到的while循环和break解答。
- var name = prompt("请输入用户名");
- var password = prompt("请输入密码");
- while(true){
- if(name == "ujiuye" && password == "666666"){
- alert('用户名和密码正确');
- break;
- }else{
- name = prompt("请输入用户名");
- password = prompt("请输入密码");
- }
- }
这里面的break就是跳出循环语句的。
Ø 问题三用到了continue语句
continue 语句
作用:“跳过”循环中的一个迭代。
continue 语句中断(循环中)的一个迭代,如果发生指定的条件。然后继续循环中的下一个迭代。
例如:
计算1到100相加的和,但是,如果这个数的个位数是9,那就不要把这个数加进去。
我们用上面提到的while和continue语句完成。
- var i = 1;
- var sum = 0;
- while(i<=100){
- if(i % 10 == 9){
- i++;
- continue;
- }
- sum += i;
- i++;
- }
- console.log(sum);
判断下这个数的个位数是不是9,如果i%10==9,那么这个数的个位数就是9,就不需要把这个数加进入了,使用continue来结束本次循环,然后继续循环中的下一个迭代。