JavaScrip之流程控制-循环

135 阅读2分钟

1. 循环

1.1 循环的目的

可以重复执行某些代码

1.2循环语句

  • for
  • while
  • do...while

2.for循环

2.1 for循环语法结构

1651116974(1).png

// for循环的执行过程
for(var i = 1; i <= 100; i++){
    console.log('你好!');
}
// 1. 首先执行计数器变量 var i = 1,但是只执行一次
// 2. 然后判断i<=100是否满足条件,满足条件执行循环体,不满足则退出循环
// 3. 最后执行 i++
// 4. 再次判断i<=100 
// 5. i++
// ...

2.2 断点调试

1651117565(1).png

2.3 重复不相同的代码

for(var i = 1;i <= 100; i++){
    console.log('这个人今年' + i + '岁。');
}

2.4 练习

//打印n行n列的一个*正方形
var rows = prompt('请输入行数');
var columns = prompt('请输入列数');
var str = '';
for(var i = 1; i <= rows; i++;){  //第一个for用来控制行数
    for(var j = 1; j <= columns; j++){  //用来控制列数
        str += '*';
    } 
    str += '\n';
}
//打印5x5的倒三角形
var str = '';
for(var i = 1; i <= 5; i++;){ //控制五行
    for(var k = 5; k <= i; k--){  //每一行少打印一个
        str += '*';
    }
    str += '\n'; //控制每一行结束换行
}
//打印等腰三角形
var str = '';
for(var i = 1; i <= 5; i++){
    for(var j = 1; j < 5; j++){
        str += ' ';   //控制每行需要打印多少个空字符
    }
    for(var k = i; k <= i*2-1; k++){
        str += '*';    //控制每行需要打印的*个数
    }
    str += '\n';
}
//打印正三角形
var str = '';
for(var i = 1; i <= 5; i++;){ //控制五行
    for(var k = 1; k <= i; k++){  //每一行少打印一个
        str += '*';
    }
    str += '\n'; //控制每一行结束换行
}
//九九乘法表
var = temp;
for(var i = 1; i <= 9; i++;){    
    //九行
    for(var j = 1; j <= i; j++){  
        //列数同行数一致
        temp = i * j;
        console.log(i+'x'+'j'+'='+temp)
    }
}

3. while循环

1651128580(1).png

var sum = 0;
while(var i =1 <= 100){
    sum += i;
    i++;
}
var msg = prompt('你爱我吗?');
//判断条件比for更复杂
while(msg !== '我爱你'){  
    msg = prompt('你爱我吗?');
}

4.do...while循环

执行思路:do...while是先执行一次循环体,再判断条件表达式,至少循环一次。

var i = 1;
do{
    console.log('how arw you?');
    i++;
}while(i <= 100)

4.1 总结

  • for、while、do while
  • 三个循环大部分情况下可以相互替换
  • while、do while可以做更复杂的判断条件
  • do while至少循环一次

6. continue\break

6.1 continue

跳出本次循环,继续下一次循环

6.3 break

跳出整个循环,结束循环