@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>