2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > JavaScript循环语句for while 与break continue配合案例详解

JavaScript循环语句for while 与break continue配合案例详解

时间:2022-07-27 14:48:31

相关推荐

JavaScript循环语句for while 与break continue配合案例详解

目录

for循环

语法:

for循环案例

1.简单的for循环

2.使用for循环打印星星

3.使用for循环打印等腰三角形

4.倒三角,与拼成菱形

5.输出1000以内的水仙花数

6.输出九九乘法表

while循环

语法:

do while语法:

三者区别:

案例使用while循环打印直角三角形

break 和continue

break

continue

区别

本文章主要配合案例,来讲解JavaScript中的循环语句for和while,并且讲解break和continue的作用与区别。

for循环

语法:

for(初始化的变量;条件语句;自增自减){

//循环体

}

初始化的变量:一般声明一个计数器,设置初始值

条件语句:判断语句

自增自减

for循环案例

1.简单的for循环

for (var a = 1; a <= 10; a++) {console.log("我是第" + a + "个*");}

输出结果:

2.使用for循环打印星星

3行星星,每行星星有15个

外部循环控制行,内部循环控制每行有多少个星星(使用*代替星星)

var str = "";for (var a = 3; a >= 0; a--) {for (var b = 15; b >= 0; b--) {str += "*";}str += "\n";}console.log(str);

3.使用for循环打印等腰三角形

kong是空格,等腰三角形左边空白部分使用空格来填充,输出内容就是空格+星号。

外层循环控制行数,输出的空格依次递减而星号依次增加来拼成一个等腰三角形。

for (var a = 1; a <= 5; a++) {var str = "";var kong = "";var aaa = "";for (var z = 0; z < 5 - a; z++) {kong += " ";}for (var b = 1; b <= a * 2 - 1; b++) {str += "*";}aaa = kong + str;console.log(aaa);

4.倒三角,与拼成菱形

倒三角与等腰三角形相反,输出的空格依次递增,而星号依次递减来拼成一个倒的等腰三角形

for (var a = 5; a >= 0; a--) {var str = "";var kong = "";var aaa = "";for (var z = 0; z < 5 - a; z++) {kong += " ";}for (var b = 1; b <= a * 2 - 1; b++) {str += "*";}aaa = kong + str;console.log(aaa);}

菱形:正三角形和倒三角形拼接就变成了一个菱形,就是将上面两个for循环代码写在相邻的位置就可以了。

5.输出1000以内的水仙花数

水仙花数是指一个 n 位数(n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身(例如:1^3 + 5^3+ 3^3 = 153)。

我们使用for循环遍历100到999的数字,分别提取其个,十,百位,使用if语句判断这个数字是否是它的每个位上的数字的 n 次幂之和等于它本身,如果成立就输出这个数字,否则进入下一个循环。

for (var b = 100; b <= 999; b++) {var c = parseInt(b / 100);//提取数字的百位var d = parseInt((b / 10) % 10);//提取数字的十位var e = parseInt(b % 10);//提取数字的个位if (b == c * c * c + d * d * d + e * e * e) {console.log("水仙花数为" + b);}}

6.输出九九乘法表

外部循环控制行数,内部根据行数(i的值)来相乘。

var jieguo = "";var zonghe = "";document.write("<br>");for (var i = 1; i <= 9; i++) {for (var j = 1; j <= i; j++) {jieguo = j + "*" + i + "=" + i * j + "\b";document.write(jieguo);zonghe += jieguo;}zonghe += "\n";document.write("<br>");}console.log(zonghe);

打的空格转义字符突然变成了这样,凑合看吧。

先使用了document.write来显示在页面,再用了console.log打印在控制台。

while循环

语法:

while (条件语句) {

//循环体

}

var num=0while(num<10){console.log('执行了一次')num++}

当num=0时,满足条件时,返回true执行循环体,然后自增

当num=1时,满足条件时,返回true执行循环体,然后自增

。。。。。

当num=10时,条件不满足,返回false,跳出循环

注意:一定要有结束条件

do while语法:

do{

//循环体

}while( 条件判断)

var i=0do {console.log(i);i++} while (i<10);

执行思路:

当i=0时,打印0,i自增,进行条件判断,满足条件返回true,再进入循环

当i=1时,打印1,i自增,进行条件判断,满足条件返回true,再进入循环

。。。。

当i=9时,打印9,i自增,进行条件判断,不满足条件返回false,退出循环

三者区别:

- for 当条件满足就可以执行

- while 当条件满足就可以执行

- do while 先执行一次,再判断

案例使用while循环打印直角三角形

会了for循环,while循环自然不在话下。

var q = 1;var w = "";var z = "";while (q < 10) {w += "*";q++;z += w;z += "\n";}console.log(z);

break 和continue

break

break跳出整个程序,即使后面条件满足也不会再执行

for (var i = 0; i < 10; i++) {console.log(i);if (i === 6) {break;}}

执行思路:

当i=0时,满足循环条件,打印i,进行if判断0===6,返回false,不走if内部的语句

当i=1时,满足循环条件,打印i,进行if判断1===6,返回false,不走if内部的语句

.。。。。

当i=6时,满足循环条件,打印i,进行if判断6===6,返回true,走if内部的语句break,跳出整个程序(同时结束循环)

continue

continue跳出当前循环,后面的条件满足继续循环

for (var i = 0; i < 10; i++) {if (i === 6) {continue}console.log(i);}

执行思路:

当i=0时,满足循环条件,打印i,进行if判断0===6,返回false,不走if内部的语句

当i=1时,满足循环条件,打印i,进行if判断1===6,返回false,不走if内部的语句

。。。。

当i=6时,满足循环条件,打印i,进行if判断6===6,返回true,走if内部的语句continue,跳出当前循环程序,i继续自增,满足循环条件,后面继续循环,直到循环条件不满足,跳出循环

区别

综上所述,

- break跳出整个程序,即使后面条件满足也不会再执行

- continue跳出当前循环,后面的条件满足继续循环

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。