四、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>
代碼執行效果

以上內容純屬個人理解,由于水平有限,若有錯漏之處敬請指出斧正,小弟不勝感激。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容