AI智能
改变未来

javascript循环(3)


 javascript基础知识及变量(1)

 javascript之流程控制语句(2)

 javascript循环(3)

 javascript数组 (4)

 javascript函数(5)

javascript作用域(6)

js中的循环语句

  • for循环
  • while循环
  • do while循环

何为循环?

在程序中,反复被执行的语句叫做循环体,循环体是否能被重复执行,却决于循环的终止条件。由循环体及循环的终止条件等组成的语句叫做循环语句。

循环的目的

可以重复执行某些代码

for循环

目的:可以重复执行某些代码,通常跟计数有关.

语法

[code]    for(初始化变量;条件表达式;操作表达式) {//循环体}
  • 初始化变量:通常被用来计数,使用var来声明变量
  • 条件表达式:取决于循环体的终止条件
  • 操作表达式:用来更新初始化变量

for循环的执行过程

[code]    <script>for (var i = 1; i <= 100; i++) {//在控制台打印100遍的\"hello 尧子陌\"console.log(\"hello 尧子陌\")}</script>

执行原理

[code]              var i = 1最终能被执行一次,初始化变量执行完毕后,执行i<=100,满足则进入循环体执行循环里的语句,不满足则跳出循环体,若满足条件执行循环体的代码之后,再执行操作表达式,满足执行循环体代码,不满足跳出循环。

for循环的特殊用处

断点调试

断点调试:在程序的某一行设置断点,以便于观察程序是怎样的运行过程。

步骤:

  • 按f12键进入sources(根源),在需要设置断点的当前行设置断点操作,刷新浏览器
  • 按F11进行下一步操作

通过watch可以更好的观察变量的值的变化

通过变量来控制循环的次数

在js中,可以通过prompt输入的值保存成变量来控制循环的次数

[code]    <script>/**1.弹出一个输入框,用户输入值,把这个数值保存成变量2.通过变量名来控制循环的次数*/var userName = parseInt(prompt(\"请输入任意正整数\"));for (var i = 1; i <= userName; i++) {console.log(\'Hello\')}</script>

通过for循环可执行不同的代码

输入一个人的1岁~100岁,并提示出生及死亡。

[code]<script>for (var i = 1; i <= 100; i++) {if (i == 1) {console.log(\'今年一岁了,你出生了\')} else if (i == 100) {console.log(\'今年100岁了,你已经死亡了\')} else {console.log(\'今年\' + i + \'岁了\')}}</script>

for循环可以执行某些相同的操作

例如:求1~100累加的和

[code]<script>//求1~100之间累加的和var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(\'sum最终的值\', sum); //5050</script>

思路如下

  • 要循环100次,需要一个计数器i
  • 需要一个存储结果的值为sum
  • 公式sum= sum+i

案例

求1~100之间的平均数

[code]<script>//需要声明一个求和的变量及求平均数的变量var sum = 0,average = 0for (var i = 0; i <= 100; i++) {sum += i;}// 平均值为var average = sum / 100;console.log(\'1~100之间的平均数:\' + average) //50.5</script></head>

求1~100之间所有偶数和奇数的和

思路如下

如何判断一个数为偶数呢?

答案:能被2整除且余数为0,则代表为偶数,反之则为奇数

[code]<script>//需要声明一个偶数及奇数的变量var even = 0,odd = 0;for (var i = 0; i <= 100; i++) {if (i % 2 == 0) {even += i;} else {odd += i;}}console.log(\'1~100之间所有偶数的和:\', even)console.log(\'1~100之间所有奇数的和:\', odd)</script>

求1~100之间能被3整除的和

[code]<script>//需要声明一个变量来保存能被3整出的和的结果var result = 0;for (var i = 1; i <= 100; i++) {if (i % 3 == 0) {result += i}}console.log(\'1~100之间能被3整除的和:\', result)</script></head>

学生案例

弹出输入框,输入班级总人数,求出总成绩及平均成绩sum

分析

1.弹出输入框,用户输入班级的总人数(userName)

2.依次输入学生的成绩(保存起来为sorce),,需要用到for循环,弹出的输入框的次数跟班级总人数有关.条件表达式i<=userName

3.程序内部处理,计算总成绩(sum),之后再计算平均值(average)

[code]<script>//要求:计算学生的总成绩及平均数var userName = Number(prompt(\"输入班级的总人数\"));var sum = 0;var average = 0;、for (var i = 1; i <= userName; i++) {var sorce = Number(prompt(\'请输入第\' + i + \"个学生成绩\"));sum += sorce;}//学生的总成绩console.log(\"班级的总成绩\", sum);//学生的平均成绩var average = sum / userName;console.log(\'班级的平均成绩:\', average)</script>

打印N行的星星案例

注意事项

  • 通过prompt输入的值可控制打印星星的个数
  • 采用字符串追加的方式,在控制台打印星星。
[code]<script>var userName = prompt(\'请输入星星的个数\');var str = \"\" //声明一个变量来存储空字符串for (var i = 1; i <= userName; i++) {str += \"★\";};console.log(str)</script>

双重for循环

在for循环的基础上嵌套一个for循环,称为双重for循环

语法

[code]for(外循环初始化变量;外循环条件表达式;外循环操作表达式) {for(内循环初始化变量;内循环条件表达式,内循环操作表达式) {//执行的语句}}

注意事项

  • 内循环可以看作外循环执行的语句
  • 外循环执行一次,内循环执行全部
[code]<script>//外层循环for (var i = 1; i <= 3; i++) {console.log(\'外层循环执行的:\' + i + \'次\')for (var j = 1; j <= 3; j++) {console.log(\'内层循环执行的:\' + j + \'次\')}}</script>

打印5行5列的星星

[code]<script>var str = \"\";for (var i = 1; i <= 5; i++) {for (var j = 1; j <= 5; j++) {str += \"★\"}str += \"\\n\"}console.log(str)</script>

输入N行N列的♥

[code]<script>//用户输入的行数var rows = prompt(\"请输入行数\");//用户输入的个数var cols = prompt(\'请输入个数\');//声明一个空字符串var str = \'\';//进行for循环for (var i = 1; i <= rows; i++) {for (var j = 1; j < cols; j++) {str = str + \"♥\"}str = str + \'\\n\'}console.log(str)</script>

打印倒三角形

核心算法 j = i; j <= 10; j++

[code]<script>var str = \'\'for (var i = 1; i <= 10; i++) {for (var j = i; j <= 10; j++) {str = str + \"★\"}str = str + \"\\n\"}console.log(str)</script>

打印正三角形

核心思路:j = 1; j <= i; j++

[code]<script>var str = \'\'for (var i = 1; i <= 10; i++) {for (var j = 1; j <= i; j++) {str = str + \"★\"}str = str + \"\\n\"}console.log(str)</script>

打印九九乘法表

[code]    <script>var str = \"\"for (var i = 1; i <= 9; i++) {for (var j = 1; j <= i; j++) {str = str + j + \"*\" + i + \"=\" + i * j + \"\\t\"}str = str + \"\\n\"}console.log(str)</script>

for循环总结

  • for循环可以重复某些代码的操作
  • for循环可以重复执行某些不同的代码的操作,因为有计数器
  • for循环可以重复执行某些操作,比如算数运算符加法操作
  • 双重for循环,外循环执行一次,内循环全部执行

while循环

语法

[code]while(条件表达式) {//循环体代码操作表达式}

注意

[code]- 当while的参数的条件表达式为true的时侯,则执行循环体代码。当条件为false的时候,则退出循环体。- 当执行完循环体代码之后,操作表达式会自增或自减操作。会继续判断条件表达式是否为真假,若为真,则继续执行循环体的代码,若为false,则退出循环体,重复执行- while可以做更复杂的条件判断。

案例

控制台打印100遍hello word

[code]<script>var i = 1;while (i <= 100) {console.log(\'hello word\');i++}</script>

打印人的一生 从1岁到100岁 并提示出生 死亡的信息。

[code]<script>var i = 1;while (i <= 100) {if (i == 1) {console.log(\'恭喜你,你出生了\')} else if (i == 100) {console.log(\'恭喜你,你死亡了\')} else {console.log(\'你今年\' + i + \'岁\')}i++}</script>

计算1~100之间所有整数的和

[code]<script>//求和的变量var sum = 0;var i = 1;while (i <= 100) {sum = sum + i;i++}console.log(sum)</script>

\’你爱我吗\’之循环案例

[code]要求:弹出输入框,显示\'你爱我吗\'。用户输入我爱你,则提示询问,否则会一直询问下去。
[code]<script>var message = prompt(\'你爱我吗\');while (message !== \'我爱你\') {message = prompt(\'你爱我吗\')};alert(\'我也爱你 小颖\')</script>

do while循环

[code]- do while循环可以看作while循环的变体,do while循环的代码至少会执行一次,再进行自增或自减操作去判断条件表达式是否为真,若为true,则执行循环体,若为false,则退出循环体复制代码

语法

[code]var i =1;do {//循环体语句操作表达式}while(条件表达式)复制代码

do while案例

打印人的一声,从1岁到100岁,并提示出生 死亡的信息.

[code]<script>var i = 1;do {if (i == 1) {console.log(\'恭喜你,你出生了\')} else if (i == 100) {console.log(\'很遗憾,你已经死亡了\')} else {console.log(\'你已经\' + i + \'岁\')}i++} while (i <= 100);</script>

打印1~100所有整数的和

[code]<script>//声明一个求和的变量var sum = 0,i = 1;do {sum = sum + i;i++} while (i <= 100);console.log(sum)</script>

\”你爱我吗\”之循环案例

要求:弹出输入框,显示\’你爱我吗\’。用户输入我爱你,则提示询问,否则会一直询问下去。

[code]<script>do {var message = prompt(\'你爱我吗\')} while (message !== \'我爱你\')alert(\"我也爱你\")</script>

循环的总结

  • JS中的循环:for循环 while循环 di while循环
  • 在特殊情况下,三者可以相互替换
  • do while是while的变体,和while的区别是执行顺序不一样,while循环先判断后执行,do while循环至少执行一次
  • 重点放在for循环

continue break的区别

continue

continue:跳出本次循环 继续执行下次循环

求1~100能被7整除的和

如何判断能被7整除,余数等于0即可

[code]<script>var sum = 0;for (var i = 0; i <= 100; i++) {if (i % 7== 0) {continue}sum = sum + i;}console.log(sum)</script>

break

立刻跳出整个循环,不再执行后面的语句

i等于3的时候,跳出整个循环

[code]<script>for (var i = 1; i <= 10; i++) {if (i == 3) {break}console.log(i)}</script>

简易ATM机

要求

在这个案例中,我使用的是最简单的switch语句

[code]<script>//简易ATM机var corpus = 100; //本金var userName = Number(prompt(\'请输入你要的操作\\n1.存钱\\n2.取钱\\n3.显示余额\\n4.退出\'))switch (userName) {case 1:var depvar = Number(prompt(\"请问需要存多少钱?\"));corpus = corpus + depvar;alert(\'余额为\' + corpus)break;case 2:var taken = Number(prompt(\"请问需要取多少钱?\"));if (taken > corpus) {alert(\'余额不足\')} else if (taken < corpus) {corpus = corpus - taken;alert(\'余额为\' + corpus)}break;case 3:alert(corpus);breakcase 4:if (userName == 4) {alert(\'退出成功\')}breakdefault:alert(\"输入错误\");break;}</script>

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » javascript循环(3)