第一节
循环结构
问题
如果输出一句hello world,可以document.write("hello world");.
思考:现在要输出10次,应该怎么办?
写10次,....
分析:
对于我们来说这样费时费力，同时也会有很多的代码冗余，那么这个时候我们应该使用的就是js中的循环。
如果不用循环，但是我们要是打印100次hello world呢？
while循环语句(掌握)
图片.png
while循环只要条件为真，就会一直不断重复执行循环体内的代码
语法
//当循环条件为true时，执行循环体，
//当循环条件为false时，结束循环。
while(循环条件){
//循环体：需要循环执行的语句
}
注意: while循环只要条件为真，就会一直不断重复执行循环体内的代
例题
例1:输出十个hello
// 输出十个Hello
// 1 声明变量
var i = 0;
// 2条件为真,则向下执行
while(i<10){
console.log(i);
document.write('Hello world'+'<br />');
// 3 每循环一次i自加1
i++;
}
例2:输出1-10之间所有的数
/ 循环变量初始化
var num = 1;
// while循环
while(num <= 10){
document.write(num);
num++;
}
例3:循环表白,你爱我吗?
//1. 输入你爱我吗? y/n
var res = prompt('爱我吗? y/n');
//2. n y
// 条件的角度
while (res != 'y') {
res = prompt('再说一遍,你爱我吗? y/n')
}
do...while循环(掌握)
图片.png
do...while和while循环差不多，只是do...while会先无条件执行一次再判断
语法
【①循环变量初始化】
do{
// 循环体内执行的代码
【③循环变量更新】
}while(【②循环变量判断条件】);
例题
验证: do...while会先无条件执行一次，然后再判断
<script>
var num = 1;
while(num > 1)
{
document.write("while 哈哈，妹妹进来了！");
}
do{
document.write("do.while 哈哈，妹妹进来了！");
}while(num > 1);
</script>
循环表白你爱我吗?
// 循环表白的案例 do...while()
do {
var res = prompt('爱我吗');
} while(res != 'y')
for循环语句(重点)
示意图
图片.png
for循环语法：
//1. for循环使用分号分隔
//2. for循环有2个分号，两个分号不能少
for(初始化变量1;判断语句2;变量更新3){
//4循环体
}
执行顺序：1243 ---- 243 -----243(直到循环条件变成false)
- 初始化语句
- 判断语句
- 自增或者自减
- 循环体
图片.png
使用案例
例1: 输出1-10之间的所有数
<script>
/*
for(变量初始化; 判断条件; 变量更新)
{
// 循环体内执行的代码
}
*/
for(var num = 1; num <=10; num++)
{
document.write(num + "<br />");
}
</script>
例2 入职薪水10K，每年涨幅5%，50年后工资多少？
var a = 10;
var i=0;
while(i<49){
a = a + a * 0.05;
i++;
}
console.log(a)
// 使用for的写法
// var salary = 10;
// for(var i=1;i<=50;i++){
// // 涨幅5%,就是明年的工资是今年的1.05倍
// salary= salary*1.05;
// }
// console.log(salary);
例3 打印100以内 7的倍数
for(var i=1;i<=100;i++){
if(i%7==0){
console.log(i);
}
}
i--的使用
for(var i=10;i>0;i--){
循环体；
}
// // 倒着输出1-10之间的数
// for(var i=10;i>=1;i--){
// console.log(i);
// }
总结:for
for(初始化变量;循环条件;自增/自减){
循环体
}
break和continue(掌握)
break:
结束/中止for循环
立即跳出当前整个循环，即循环结束，开始执行循环后面的内容（直接跳传出大括号）
一般写在打印之后
continue:
结束本次循环,进行下一个循环
立即跳出当前循环，继续下一次循环（跳到i++的地方） (放打印代码前面)
一般写在打印之前
图片.png
双重for循环(重点)
for循环嵌套时，注意各个循环的计数器变量名不能重复，否则会变成死循环
例1:五行五列星星的打印
第一步:输出5x5的*形状
document.write('*****<br />');
document.write('*****<br />');
document.write('*****<br />');
document.write('*****<br />');
document.write('*****<br />');
第二步:使用for重复输出5行*
for(var i=0;i<5;i++){
document.write('*****<br />');
}
第三步:让使用for为每行输出五个*
for(var i=0;i<5;i++){
// 控制每行输出的个数
for(var j=0;j<5;j++){
document.write('*');
}
document.write('<br />');
}
例2:金字塔形状的打印
// ＊
// ＊＊
// ＊＊＊
// ＊＊＊＊
// ＊＊＊＊＊
// 多行多列的内容,可以使用循环的嵌套
// 外层循环控制行,内层控制列
for(var i=0;i<5;i++){
for(var j=0;j<i+1;j++){
document.write("*")
}
document.write("<br>")
}
例3:九九乘法表的打印
第一步:输出九行
第二步:每行输出九列
第三步:让列数和行数相等
第四步:实现数字的替换
// 打印九九乘法表
// 1*1=1
// 1*2=2 2*2=4
// 1*3=3 2*3=6 3*3=9
for(var i=1;i<=9;i++){
// 外层的for循环一次,内次的for就执行i次
// 设置j<=i;让内层的for随着外层的i变动循环的次数
for(var j=1;j<=i;j++){
document.write(j+'x'+i+'='+i*j+' ');
}
document.write('<br />');
}
for、while、do.....while的区别
1、同一个功能三种循环都可以实现
2、如果知道循环次数用for循环，不知道循环次数用while或者do..while循环
3、如果需要无条件先执行一次用do...while，否则用while
死循环
图片.png
无法靠自身控制结束的循环，称为死循环
但是可以利用死循环的原理，解决一些问题：
案例：篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的高度是0.1米。
不知道要循环几次的问题，利用死循环，每次判断一个条件，直到满足条件，利用break跳出循环
例1:给定条件永远成立,就一直执行
//死循环 ： 条件永远成立
var i = 1;
while(i<=100){
document.write(i);
}
例2:表达式指定不合适
var n=0;
for(var i=1;i>n;i++){
document.write('哈哈,死循环');
}
例2:缺少自增条件
for(var i=0;i<10;){
document.write('哈哈,死循环');
}
网友评论