一篇文章教你用JavaScript使用流程控制列印九九乘法表

2022-02-22 16:00:08

一、選擇結構

概念：選擇結構語句需要根據給出的條件進行判斷來決定執行對應的程式碼。

if單分支語句

概念：if條件判斷語句也被稱為單分支語句，當滿足某種條件時，就進行某種處理。

舉例：只有年齡大於等於18週歲，才輸出已成年，否則無輸出。

if…else雙分支語句

概念：if…else語句也稱為雙分支語句，當滿足某種條件時，就進行某種處理，否則進行另一種處理。

舉例：判斷一個學生的年齡，大於等於18歲則是成年人，否則是未成年人。

if…else if…else多分支語句

概念：if…else if…else語句也稱為多分支語句，可針對不同情況進行不同的處理。

舉例：對一個學生的考試成績進行等級的劃分，分數在90——100分為優秀，分數在80——90分為優秀為良好，分數在70——80分為中等，分數在60——70分為及格，分數小於60則為不及格。

注意

“if…else if…else”語句在使用時，“else if”中間要有空格，否則程式會報語法錯誤。

switch多分支語句

概念：switch語句也是多分支語句，功能與if系列條件語句相同，不同的是它只能針對某個表示式的值作出判斷，從而決定執行哪一段程式碼。

特點：程式碼更加清晰簡潔、便於閱讀。

舉例：根據學生成績score進行評比（滿分為100分）。

二、迴圈結構

概念：所謂迴圈語句就是可以實現一段程式碼的重複執行。

舉例：連續輸出1~100之間的數位。

while迴圈語句

概念：while迴圈語句是根據迴圈條件來判斷是否重複執行一段程式碼。

注意

需要注意的是，若迴圈條件永遠為true時，則會出現死迴圈，因此在開發中應根據實際需要，在迴圈體中設定迴圈出口，即迴圈結束的條件。

do…while迴圈語句

do…while迴圈語句的功能與while迴圈語句類似，唯一的區別在於，while是先判斷條件後執行迴圈體，而do…while會無條件執行一次迴圈體後再判斷條件。

for迴圈語句

概念：for迴圈語句是最常用的迴圈語句，它適合迴圈次數已知的情況。

for關鍵字後面小括號“()”中包括了三部分內容：

初始化表示式。迴圈條件。操作表示式。

它們之間用“;”分隔，{}中的執行語句為 ③迴圈體。

注意

for迴圈語句小括號“()”內的每個表示式都可以為空，但是必須保留分號分割符。當每個表示式都為空時，表示該for迴圈語句的迴圈條件永遠滿足，會進入無限迴圈的狀態，此時如果要結束無限迴圈，可在for語句迴圈體中用跳轉語句進行控制。

三、跳轉語句

概念：跳轉語句用於實現程式執行過程中的流程跳轉。

常用的跳轉語句：有break和continue語句。

break與continue的區別：break語句可應用在switch和迴圈語句中，其作用是終止當前語句的執行，跳出switch選擇結構或迴圈語句，執行後面的程式碼。而continue語句用於結束本次迴圈的執行，開始下一輪迴圈的執行操作。

其他功能：break和continue語句還可跳轉到指定的標籤語句處，實現巢狀語句的多層次跳轉。

label表示標籤的名稱，如start、end等任意合法的識別符號。
statement表示具體執行的語句，如if、while、變數的宣告等。
標籤語句必須在使用之前定義，否則會出現找不到標籤的情況。

【案例】列印金字塔

程式碼實現思路：

分析金字塔組成：由空格和星星“*”組成的三角形。
分析“*”和空格的分佈規律（假設最上面的一個星星作為金字塔的第一層）。
每層中星星的數量 = 當前層數2 -1。例如當前為第4層，則星星數= 42-1=7。
每層星星前的空格 = 金字塔層數 – 當前層數。例如當前行數為第3層，則空格數=5-3=2。

程式碼實現

	<script>
	var level = prompt('請設定金字塔的層數');
	// 獲取輸入的純數位，其餘情況皆轉為NaN
	level = parseInt(level);
	// 判斷使用者輸入的資料是否合法
	if (isNaN(level)) {
	alert('金字塔的層數必須是純數位');
	}
	// 迴圈遍歷金字塔的層數
	for(var i = 1; i <= level; ++i){
	// 輸出星星前的空格
	var blank = level - i;
	for(var k=0; k < blank; ++k){
	document.write('&nbsp;');
	}
	// 列印星星
	var star = i*2 - 1;
	for(var j = 0; j < star; ++j){
	document.write('*');
	}
	// 換行
	document.write('<br>');
	}
	</script>

四、動手實踐九九乘法表

九九乘法表體現了數位之間乘法的規律，成為了學生在學習數學時必不可少的一項內容。

程式碼實現

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>九九乘法表</title>
	<style>
	table{border-collapse:collapse;}
	table td{border:2px solid #ccc;padding:3px 6px;}
	</style>
	</head>
	<body>
	<table>
	<script>
	for (var i = 1; i < 10; ++i) { // 遍歷表中所有的行
	document.write('<tr>');
	for (var j = 1; j <= i; ++j) { // 遍歷每行中的列
	// 拼接單元格
	document.write('<td>');
	document.write(j);
	document.write('×');
	document.write(i);
	document.write('=');
	document.write(j * i);
	document.write('</td>');
	}
	document.write('</tr>');
	}
	</script>
	</table>
	</body>
	</html>