1循环

1.1 for循环

  • 语法结构

for循环主要用于把某些代码循环若干次,通常和计数有关系

  1. //语法结构
  2. for(初始化变量;条件表达式;操作表达式){
  3. //循环体
  4. }
名称 作用
初始化变量 通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量, 这个变量帮我们来记录次数。
条件表达式 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。
操作表达式 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。

执行过程:

  1. 初始化变量,初始化操作在整个 for 循环只会执行一次。
  2. 执行条件表达式,如果为true,则执行循环体语句,否则退出循环,循环结束。
  3. 执行操作表达式,此时第一轮结束。
  4. 第二轮开始,直接去执行条件表达式(不再初始化变量),如果为 true ,则去执行循环体语句,否则退出循环。
  5. 继续执行操作表达式,第二轮结束。
  6. 后续跟第二轮一致,直至条件表达式为假,结束整个 for 循环。

var i= 0;
if(i <10){
document.write(‘a’)
}
i++
//把条件判断放到 if 里面,条件判断成立,就执行{}中间的执行体
// i++,此时 i 变成 1,i=1;
先执行一遍(1),
判断(2)执行语句成不成立,条件成立就执行(3),
判断(2)执行语句成不成立,条件成立就执行(3),
……当有一次判断不成立,就停止

  1. 断点调试:
  2. 断点调试可以帮助观察程序的运行过程
  3. 打开浏览器>>>F12找到>>>Sources打开需要调试的文件,然后再程序的某一行设置断点,F5刷新网页(必须刷新才会显示);
  4. - 重复相同代码示例:
  5. ```javascript
  6. // 基本写法
  7. for(var i = 1; i <= 10; i++){
  8. console.log('Hello Word');
  9. }
  10. // 用户输入次数
  11. var num = prompt('请输入次数:');
  12. for ( var i = 1 ; i <= num; i++) {
  13. console.log('Hello Word');
  14. }

执行结果:

  • 重复不同代码示例:
    执行结果:
    1. // 基本写法
    2. for (var i = 1; i <= 100; i++) {
    3. console.log('第' + i + '只玫瑰');
    4. }

1.2双重for循环

  • 双重 for 循环语法

    1. for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    2. for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
    3. 需执行的代码;
    4. }
    5. }
    • 内层循环可以看做外层循环的语句
    • 内层循环执行的顺序也要遵循 for 循环的执行顺序
    • 外层循环执行一次,内层循环要执行全部次数
  • 打印五行五列星星
  1. var str = '';
  2. for (var j = 1; j <= 3; j++) {//代表行
  3. for (var i = 1; i <= 3; i++) {//代表列
  4. str += '☆'
  5. }
  6. // 每次满 5个星星 就 加一次换行
  7. str += '\n'
  8. }
  9. console.log(str);
  • 打印99乘法表
  1. str = '';
  2. for (var i = 1; i <= 9; i++) {
  3. for (var j = 1; j <= i; j++) {
  4. str += j + 'x' + i + '=' + i * j + '\t';
  5. }
  6. str += '\n';
  7. }
  8. console.log(str);

1.3 while循环

while循环一定有个表达式

  1. while 语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。
  2. while语句的语法结构如下:
  3. while (条件表达式) {
  4. // 循环体代码
  5. }

执行思路:

  1. **先判断条件是否成立**
  • 先执行条件表达式,如果结果为 true,则执行循环体代码;如果为 false,则退出循环,执行后面代码
  • 执行循环体代码
  • 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为 false 时,整个循环过程才会结束
    注意
  • 使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环
  1. //接受用户输入的账号密码 用户为admin 密码123456 提示登陆成功否则一直输入
  2. var user = prompt('输入账户');
  3. var passWord = prompt('输入密码');
  4. while (user != 'admin' || passWord != '123456') {
  5. user = prompt('输入账户');
  6. passWord = prompt('输入密码');
  7. }
  8. alert('登陆成功');

1.4 do while 循环

  1. do {
  2. // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
  3. } while(条件表达式);
  4. //案例:接受用户输入的账号密码 用户为admin 密码123456 提示登陆成功否则一直输入
  5. do {
  6. var user = prompt('输入账户');
  7. var passWord = prompt('输入密码');
  8. } while (user != 'admin' && passWord != '123456');
  9. alert('登陆成功');

执行思路:

  • 不管条件是否成立 先执行一次循环体代码
  • 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码
    注意:先再执行循环体,再判断,do…while循环语句至少会执行一次循环体代码

    1.4 do while 与 while的区别

    • while语句进入循环体前,先判断条件是否成立,如果成立进入循环体
    • do while先执行循环,体然后判断条件是否成立,如果成立则继续循环体,如果不成立跳出循环(不管条件是否成立都要先执行代码体)
    • do while 至少执行一次代码体;
    • while 可能一次都不执行

2、continue、break

  • continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。
  • break 关键字用于立即跳出整个循环(循环结束)。
  • 遇到break循环里的break后面代码不执行
  • 遇到continue循环里的continue后面代码不执行
  • switch里面的break 是无法结束循环语句