八、深入JavaScript的條件語句和循環語句(四)

@Author:Runsen
@Date:2020/5/26

作者介紹:Runsen目前大三下學期,專業化學工程與工藝,大學沉迷日語,Python, Java和一系列數據分析軟件。導致翹課嚴重,專業排名中下。.在大學60%的時間,都在CSDN。決定今天比昨天要更加努力。

JavaScript也是一種編程語言,當然也要對應的條件語句和循環結構,在本篇文章中,就深入JavaScript的條件語句和循環結構.。

條件語句

條件語句是一種特殊的語句,它是根據不同的條件執行不同的動作。

它總共有三種寫法:

if語句、switch語句、三元運算符

if語句

if (條件) {
    條件爲 true 時執行的代碼
}

寫個小例子:

var a = 'Runsen';
if (a.length > 0) {
    alert(a);
}

switch語句

switch(表達式) {
     case m:
        代碼塊
        break;
     case n:
        代碼塊
        break;
     default:
        默認代碼塊
}

比如下面的例子

<div id="test"></div>
<script>
var time = 1,day;
switch (time) {
    case 1:
        day = "星期一";
        break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
        break;
    case 7:
        day = "星期日";
}
document.getElementById("test").innerHTML = "今天是" + day;
</script>

三元運算符

三元運算符一般用於比較簡單的條件賦值,它等同於if else,寫法如下:

變量名 = (condition) ? value1:value2;

var a = 'Runsen',b;
b = a.length > 0 ? a : '空字符串';
alert(b);

意思就是如果 a.length > 0,將1<2的結果賦值給b,也就是b=Runsen

循環語句

循環的話有多種。

for循環

比如最簡單的就是1到100的累加

var sum = 0;
for (var i = 1; i <= 100; i++) {
	sum += i;
}

while循環

語法

while(條件表達式){
	語句...
}

比如,下面通過prompt在彈出框輸入的,然後判斷是不是等於100

while(prompt("請輸入數字100") != 100){
	console.log("輸入錯誤");
};
console.log("輸入100");

for in 循環

和for循環類似,for-in循環主要用於遍歷對象。語法:

for(var keys in Object){
   執行語句
}

比如下面的demo例子

for(var keys in [1,2,3,4]){
   console.log(keys); // 0,1,2,3
   console.log([1,2,3,4][keys]);//1,2,3,4
};

for of

for-of循環是es6新增的循環方式,可以遍歷數組,還可以遍歷類數組對象和其他可迭代對象。

for(var s of str){
   執行語句
}

比如下面的demo例子

for(var keys of [1,2,3,4]){
   console.log(keys); // //1,2,3,4
};

練習

打印九九乘法表

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            width: 2000px;
        }

        span {
            display: inline-block;
            width: 80px;
        }
    </style>
    <script type="text/javascript">

        /*
         * 1.打印99乘法表
         *   1*1=1
         *   1*2=2 2*2=4
         *   1*3=3 2*3=6 3*3=9
         *   1*4=4 2*4=8 3*4=12 4*4=16
         *                      ....9*9=81
         */

        //創建外層循環,用來控制乘法表的高度
        for (var i = 1; i <= 9; i++) {
            //創建一個內層循環來控制圖形的寬度
            for (var j = 1; j <= i; j++) {
                document.write("<span>" + j + "*" + i + "=" + i * j + "</span>");
            }

            //輸出一個換行
            document.write("<br/>");
        }
    </script>
</head>

<body>
</body>

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章