一、分支語句
邏輯判斷語句,用于基于不同條件來執行不同的動作。
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>
代碼執行效果
以上內容純屬個人理解,由于水平有限,若有錯漏之處敬請指出斧正,小弟不勝感激。