四、JavaScript的分支语句，和循环语句

一、分支语句

逻辑判断语句，用于基于不同条件来执行不同的动作。

1、if语句

只有当条件为true时该语句才会执行代码，只判定单一情况，用法如下：

    var score = 50;
    
    if (score >= 60) {
        console.log('及格')
    }

2、if...else...语句

当条件为true时执行代码否则执行其他代码。

    var score = 50;
    
    if (score >= 60) {
        console.log('及格')
    } else {
        console.log('不及格');
    }

3、if...else if ... else if ...else ...语句

使用该语句来选择多个代码块之一来执行。

    if (score >= 80) {
        console.log('优秀');
    } else if (score >= 60) {
        console.log('及格');
    } else if (score >= 30) {
        console.log('不及格');
    } else {

    }

4、switch break语句

switch(开关) break(中断) default(默认) 使用该语句来选择多个代码块之一来执行。通常会声明一个变量然后将表达式的值与结构中的每个case(情况)值作比较如果存在匹配则与该case值关联的代码会被执行要使用break来组织代码自动向下一个case运行。

    var level = 'A';

    switch (level) {
        case 'A': {
            console.log('上天');
            break;
        }
        case 'B': {
            console.log('上火啦');
            break;
        }
        case 'C': {
            console.log('上吊了');
            break;
        }
        default:
            console.log('去屎吧');
    }

二、循环语句

即重复执行一段代码，循环语句有三个参数，声明初始变量，判断条件，每次变化条件。

1、while循环

指定条件为真时循环执行。

    var i = 0;
    
    while (i < 10) {
        console.log('haha') // 当i小于10时此代码便会被重复执行
        i++;
    }

控制台打印结果

2、do....while循环

先执行后判断，至少执行一次执行后如果条件为真，便会重复执行。

    // do..while 先执行，后判断，至少执行一次
    // do {
    //     console.log('haha')  //当i小于10时此代码便会被重复执行
    //     i++
    // } while (i < 10);

    do {
        console.log('haha') // 此时条件为假，故只会执行一次
        i++
    } while (i > 10);

3、for循环

条件满足时重复执行代码

    for (var i = 10; i < 15; i++) {
        console.log('i=' + i);
    }

控制台打印效果

4、for/in循环

主要用于遍历json对象此处不作描述，在学习面向对象时会再做介绍。

5、练习

1、练习添加多个标题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box">


        </div>
    </body>
    <script type="text/javascript">

        var box = document.getElementsByClassName('box')[0];
        for (var i = 0; i < 10; i++) {

            box.innerHTML += '<h1>我是一个大标题</h1>';
        }
    </script>
</html>

代码执行效果

2、制作九九乘法表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>乘法口诀表</title>
    </head>
    <body>

    </body>
    <script type="text/javascript">
        window.onload = function () {


            // for循环嵌套，打印乘法口诀表
            for (var i = 1; i < 10; i++) {
                for (var j = 1; j <= i; j++) {
                    var res = j * i;
                    if (res < 10) {
                        res += '  ';
                    }
                    var str = j + " * " + i + " = " + res + "  ";

                    document.write("<span>" + str + "</span>");
                }
                document.write("<br/>");
            }

        }
    </script>
</html>