Javascript-4.流程控制语句_console.log(6)-CSDN博客

本文链接：https://blog.csdn.net/m0_65769258/article/details/122146099

前言

1.调试代码，找出代码中的问题经常使用debugger来打断点，而要能在准确位置打上断点, 就必须熟悉程序的执行流程。

2.流程控制语句有三种:顺序结构，分支结构和循环结构。

一.顺序结构（默认）

1.程序默认从上到下一句一句代码执行，这就是顺序结构。

2.若是某一行代码出现了错误，则后面的代码无法执行

<script> 
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(a);//报错
    console.log(4);
    console.log(5);
    console.log(6);
    debugger;
    console.log(7);
    console.log(8);
</script>
    
<script> 
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(a);
    console.log(4);
    console.log(5);
    console.log(6);
	// 上面打印了一个没有声明的变量, 所以出错了, 程序终止运行, 不会停在这里
    debugger;
    console.log(7);
    console.log(8);
</script>

二.分支结构

1.if else

if(条件) {
  // 条件为true执行这里的代码  
} else {
  // 条件为false执行这里的代码
}

2.三目运算符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var islogin = false;
        var text = '';
        text = islogin?'138*****000':'立即登录';
        console.log('text',text);//控制台输出立即登录
    </script>
</body>

</html>

3.switch

多重判断的分支结构, 主要用于多种一一对应的情况, 判断条件通常只有一个变量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var num = prompt('数字');//prompt输入进来的是一个字符串
        switch (num*1) {         //需要转数字
            case 1:
                alert(num);
                break;
            case 2:
                alert(num);
                break;
            case 3:
                alert(num);
                break;
            case 4:
                alert(num);
                break;
            default:
                alert('sb');
        }
    </script>
</body>

</html>

三.循环结构

1.标准for循环四部分（四部分不是必须的，只要能够正常运行，少那个都可以）

(1)循环变量初始值 var i = 0;

(2)循环条件 i<3;

(3)改变循环条件 i++

(4)循环体 {...}内的代码就是循环体

循环运行规律:

第一轮先执行第一部分, 再执行第二部分, 然后执行第四部分, 最后执行第三部分, 简称1243
第二轮开始先执行第二部分(第一部不再执行), 然后执行第四部分, 最后执行第三部分,直到结束, 简称243

<script>
    // 第1次 i=0 0<3=>true, 所以打印0
    // 第2次 i=1 1<3=>true, 所以打印1
    // 第3次 i=2 2<3=>true, 所以打印2
    // 第4次 i=3 3<3=>false, 终止循环
    for (var i = 0; i < 3; i++) { 
        console.log(i);
    }
</script>

2.应用

1.应用demo

//利用循环计算0-10相加总和
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var sum = 0;
        for (var i=0;i<=10;i++){
            sum =sum + i;
        }
        console.log('sum=',sum);
    </script>
</body>
</html>




//利用循环输出多个字符串
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var str = "";
      for (var i = 0; i < 10; i++) {
        str = str + `<li>我爱web前端</li>`;
        console.log(str);
      }
      document.write("<ul>");
      document.write(str);
      document.write('</ul>');
    </script>
  </body>
</html>

2.练习

1.练习1: 计算1~100的和并输出到页面上

2.练习2: 使用for循环在网页上打印一个ul列表,列表有5个li,li的内容任意

进阶: 给li内容添加序号(从1开始);

//练习1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var sb =0;
        for(var i=1;i<=100;i++){
            sb += i;
          
        }
        console.log(sb);
      
    </script>
</body>
</html>


//练习2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str ='';
        for(var i=0;i<5;i++){
            str +=`<li>${i+1}.xxxxxxxxxx</li>`;
        }
        document.write(str);
    </script>
</body>
</html>

3.continue和break

for循环添加continue,continue后面的语句不再执行.直接进入下一次循环.
for循环添加break后,当符合break条件,推出循环.

 <!-- continue -->
    <script>
        for(var i=0;i<10;i++){
            if (i ==5) {
                continue;
            };//输出了1234  6789,5没有输出
            console.log(i);
        }
    </script>
  <!-- break -->
    <script>
        for(var i=0;i<10;i++){
            if(i === 5){
                break;
            };//输出1234 ,到五就跳出去了.不玩了
            console.log(i)
        }
    </script>

5.while和do while

do while至少执行一次,因为先执行后判断

//while
<script>
        var i=0;
        while(i<10){
            console.log(i);
            i++
        }//控制台打印出0-9
</script>




//do-while
<script>
        var i=10;
        do{
            console.log(i);
            i++;
        }while(i<10);//控制台打印10,虽然不符合条件,但至少循环一次
</script>

6.for循环进阶应用

数组遍历
对象遍历

for循环进阶应用

(1)将数组成员输出到页面上

成员为基本数据类型

<script>
        //数组的循环
        var list =[1,2,3,4,5];
        var str ='';
        for(var i=0;i<list.length;i++){
            str +=`<li>${list[i]}</li>`;
        }
        document.write(str);
</script>

(2)将数组成员输出到页面上

成员为引用类型

<script>
        // 数组的循环
        var list = [{
                username: '张三1',
                age: 18
            },
            {
                username: '张三2',
                age: 19
            },
            {
                username: '张三3',
                age: 20
            },
            {
                username: '张三4',
                age: 21
            },
            {
                username: '张三5',
                age: 22
            },
        ];
        var str ='';
        for (var i=0;i<list.length;i++){
            str +=`<li><span>${list[i].username}</span>
                <span>${list[i].age}</span></li>`
        }
        document.write(str);
    </script>

(3)对象遍历

<script>
        var obj ={
            name: '张三',
            age: 18,
            addr:  '湖南长沙',
            hobby: '篮球,足球,羽毛球'
        }
        var str ="";
        for(var  i in obj){
            str +=`<li><span>${i}</span>
                <span>${obj[i]}</span></li>`
         
        }
        document.write(str);
</script>