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>