今天小編給大家分享一下如何掌握javascript流程控制結(jié)構(gòu)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、做網(wǎng)站、西固網(wǎng)絡(luò)推廣、微信小程序開發(fā)、西固網(wǎng)絡(luò)營(yíng)銷、西固企業(yè)策劃、西固品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供西固建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：chinadenli.net

流程控制語句

在一個(gè)程序執(zhí)行的過程，各條代碼的執(zhí)行順序?qū)Y(jié)果是有直接影響的，汗多時(shí)候我們要通過控制代碼的執(zhí)行順序來實(shí)現(xiàn)我們要完成的功能

簡(jiǎn)要理解：流程控制就是控制我們所寫的代碼按照什么樣的順序來執(zhí)行，以此達(dá)到我們的目的。

流程控制主要有三種結(jié)構(gòu)：分別是順序結(jié)構(gòu)，分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，這三種結(jié)構(gòu)代表代碼執(zhí)行的順序。

順序結(jié)構(gòu)

順序結(jié)構(gòu)是程序中最簡(jiǎn)單的，最基礎(chǔ)的流程控制，我們之前寫的代碼都屬于順序結(jié)構(gòu)(也就是從上往下依次執(zhí)行)，它沒有固定的語法結(jié)構(gòu)，程序會(huì)按照代碼的先后順序，依次執(zhí)行

分支結(jié)構(gòu)

由上到下執(zhí)行代碼的過程中，根據(jù)不同的條件，執(zhí)行不同的路徑代碼(執(zhí)行代碼多選一的過程)，從而得到不同的結(jié)果

1.21js語言提供了兩種分支結(jié)構(gòu)語句

• if語句

• switch語句

if語句

//條件成立執(zhí)行代碼，否則什么也不做

if(條件表達(dá)式){

//條件成立執(zhí)行的代碼語==條件表達(dá)式為真才執(zhí)行

}

語句可以理解為一個(gè)行為，循環(huán)語句和分支語句就是典型的語句，一個(gè)程序由很多個(gè)語句組成，一般情況下，會(huì)分割成一個(gè)一個(gè)的語句

代碼示范

		var age=19;
		if(age>=18){
		console.log('你已經(jīng)是成年人了');
            //輸出你已經(jīng)是成年人了，因?yàn)閍ge=19;,大于18就會(huì)執(zhí)行if里面的語句
		}
		
		var age=1;
		if(age>=18){
		console.log('你已經(jīng)是成年人了');
            //啥也不輸出。age=1;<18,不會(huì)執(zhí)行if里面的語句，故啥沒有
		}

執(zhí)行流程

if的加強(qiáng)版if else語句(雙分支語句)

語法結(jié)構(gòu)

//條件成立，執(zhí)行if里面代碼，否則執(zhí)行else里面的代碼

if(條件表達(dá)式){

//滿足條件執(zhí)行的代碼

}else{

//不滿足條件執(zhí)行的代碼

}

執(zhí)行流程

代碼示范

		var age=prompt('請(qǐng)輸入你的年齡');//用戶輸入
		if(age>=18){
			console.log('你可以喝酒了');
		}else{
			console.log('不好意思未成年人只能喝AD鈣');
		}
	//判斷年份是否為潤(rùn)年
		var year=prompt('請(qǐng)輸入年份：');
		if(year%4==0&&year%100!=0||year%400==0){
			alert('您輸入的年份是閏年');
		}else{
			alert('您輸入的年份是平年');
		}

if 語句的超級(jí)加強(qiáng)版 if else if(多分支語句)

語法結(jié)構(gòu)

//適用于檢查多重條件

if(條件表達(dá)式){

語句1;

}else if(條件表示式){

語句2;

}else if(條件表示式){

語句3;

……

}else{

//上述條件都不成立執(zhí)行此代碼

}

流程控制

代碼示范

	//迷你計(jì)算器  : 輸入兩個(gè)數(shù)以及運(yùn)算符號(hào)得出相應(yīng)
			
			var yi = +prompt('請(qǐng)輸入第一個(gè)數(shù)字'); //請(qǐng)用加減乘除隱式轉(zhuǎn)換成數(shù)字類型，或者用					praseInt(變量)或parsefloat(變量)整數(shù)和浮點(diǎn)數(shù)
			var fuhao = prompt('請(qǐng)輸入運(yùn)算符');
			var er = +prompt('請(qǐng)輸入第二個(gè)數(shù)字');
			if (fuhao == '+') {
				var shu = yi + er;
			} else if (fuhao == '-') {
				var shu = yi - er;
			} else if (fuhao == '/') {
				var shu = yi / er;
			} else if (fuhao == '*') {
				var shu = yi * er;
			} else if (fuhao == '%') {
				var shu = yi % er;
			} else {
				alert('請(qǐng)按要求輸入:');
			}
			alert(shu);

switch語句

switch語句也是多分支語句，它用于基于不同的條件；來執(zhí)行不同的代碼，當(dāng)要針對(duì)變量設(shè)置一系列的特定值時(shí)選用switch

switch(表示式){

case value1:

//表達(dá)式等于value1時(shí)要執(zhí)行的代碼

break;

case value2:

//表達(dá)式等于value2時(shí)要執(zhí)行的代碼

break;

default:

//表達(dá)式不等于任意一個(gè)value時(shí)要執(zhí)行的代碼

}

流程控制

代碼示范

		var fruit =prompt('請(qǐng)輸入你要買的水果：');
		switch(fruit){
			case '蘋果':
			alert('蘋果的價(jià)格是：3.5/斤');
			break;
			case '荔枝':
			alert('荔枝的價(jià)格是：10.5/斤');
			break;
			default:
			alert('沒有水果');
		}

注意

• 我們?cè)陂_發(fā)里表達(dá)式我們經(jīng)常寫成變量

• 當(dāng)fruit的值和case 里面的值匹配時(shí)必須是全等，也就是數(shù)據(jù)類型和值都必須一樣

• break 如果當(dāng)前的case里面沒有break 則不會(huì)退出switch 會(huì)繼續(xù)執(zhí)行下一個(gè)case

switch語句和if else if語句的區(qū)別

• 一般情況下，它們兩個(gè)語句可以相互轉(zhuǎn)換

• switch ……case 語句通常處理case為比較確定值的情況，而if ……else ……語句更加靈活，常用于范圍判斷(大于，等于某個(gè)范圍)

• switch語句進(jìn)行條件判斷后直接執(zhí)行到程序的條件語句，效率更高，而if ……else ……語句有幾種條件，就得判斷多次。

• 當(dāng)分支比較少時(shí)，if……else……語句的執(zhí)行效率比switch語句高

• 當(dāng)分支比較多時(shí)，switch語句的執(zhí)行效率比較高，而且結(jié)構(gòu)更清晰

循環(huán)結(jié)構(gòu)

循環(huán)的目的

在實(shí)際問題中，有許多具有規(guī)律性的重復(fù)操作，因此在程序中要執(zhí)行這類操作就要重復(fù)執(zhí)行某些語句

Js中的循環(huán)

在Js中，主要有三種類型的循環(huán)語句

• for循環(huán)

• while循環(huán)

• do ……while循環(huán)

for循環(huán)

在程序中，一組被重復(fù)執(zhí)行的語句被稱為循環(huán)體，能否繼續(xù)重復(fù)執(zhí)行，取決于循環(huán)終止的條件，由循環(huán)體及

循環(huán)終止條件組成的語句，被稱為循環(huán)語句

語法結(jié)構(gòu)

for循環(huán)主要用于把某些代碼重復(fù)若干次，通常跟計(jì)數(shù)有關(guān)。其語句結(jié)構(gòu)如下

for(初始化變量;條件表達(dá)式;操作表達(dá)式){

//循環(huán)體

}

流程控制

代碼示范

	for (var i=1;i<=10;i++){
				console.log('你喜歡我嗎？');
			}//計(jì)算班級(jí)總成績(jī)，以及平均分
		var num = prompt('請(qǐng)輸入班級(jí)的總?cè)藬?shù)')
			var sum = 0,
				average = 0;
			for (var i = 1; i <= num; i++) {
				var score = prompt('請(qǐng)輸入第' + i + '個(gè)學(xué)生的成績(jī)')
				//從prompt取過來的數(shù)據(jù)是字符串需要轉(zhuǎn)換成數(shù)字
				sum += parseInt(score);
			}
			average = sum / num;
			alert('班級(jí)的總成績(jī)：' + sum);
			alert('班級(jí)的平均分：' + sum);//一行打印5顆心
	for (var i=0;i<=4;i++){
			console.log('*');
			}

雙層for循環(huán)(循環(huán)嵌套)

循環(huán)嵌套是指在一個(gè)循環(huán)語句里再定義一個(gè)循環(huán)語句的語法結(jié)構(gòu)，例如在for循環(huán)里再嵌套一個(gè)for循環(huán)，這樣的for循環(huán)語句我們稱之為雙層for循環(huán)

• 我們把里面的循環(huán)稱之為內(nèi)層循環(huán)，外面的 稱之為外層循環(huán)

• 外層循環(huán)循環(huán)一次，內(nèi)層循環(huán)從頭到尾執(zhí)行一遍

代碼示范

	//低級(jí)：5行5列
	var str='';
			for  (var i=0;i<=4;i++){
				for (var j=0;j<=4;j++){
					str+='*';
				}
				str+='\n';
			}
			console.log(str);

	//高級(jí)：n行n列
	var rows = prompt('請(qǐng)輸入行數(shù)：');
			var cols = prompt('請(qǐng)輸入列數(shù)');
			var str='';
			for (var i = 1; i <= rows; i++) {
				for (var j = 1; j <= cols; j++) {
				str+='*';
				}
				str+='\n';
			}
			console.log(str);

	//打印倒三角型形
		var str='';
			for (var i=1;i<=10;i++){
				for (var j=i;j<=10;j++){
					str+='*';
				}
				str+='\n';
			}
			console.log(str);
   /*   1	********** 10 
		2	*********9
		3	********8
		4	*******7
		5	******6
		6	*****5
		7	****4
		8	***3
		9	**2
		10	*1  *///核心算法：var j=i;j<=10;j++//思路：先分析結(jié)果，觀察行與列關(guān)系。再確定內(nèi)層循環(huán)的算法//打印正三角形，同上思路。
			var str='';
			for (var i=1;i<=9;i++){
				for (var j=1;j<=i;j++){
					str+='*';
				}
				str+='\n';
			}
			console.log(str);//打印九九乘法表，就是把正三角形的星號(hào)換成等式
			var str = '';
			for (var i = 1; i <= 9; i++) {
				for (var j = 1; j <= i; j++) {
					/* str+='*'; */
					str += i + '*' + i + '=' + i * j + ' \t';
				}
				str += '\n';
			}
			console.log(str);//切記：外層循環(huán)循環(huán)一次，內(nèi)層循環(huán)從頭到尾執(zhí)行一遍，只是打印圖形的本質(zhì)

for循環(huán)小結(jié)

• for循環(huán)可以重復(fù)執(zhí)行某些重復(fù)的代碼

• for循環(huán)可以超重復(fù)執(zhí)行不同的代碼，因?yàn)槲覀冇杏?jì)數(shù)器

• for循環(huán)可以重復(fù)執(zhí)行某些操作，比如算術(shù)運(yùn)算加法操作

• 雙層for循環(huán)：外層循環(huán)循環(huán)一次，內(nèi)層循環(huán)從頭到尾執(zhí)行一遍

• for循環(huán)的循環(huán)條件是和數(shù)字直接相關(guān)的循環(huán)

while循環(huán)

while語句可以在條件表達(dá)式為真的前提下，循環(huán)執(zhí)行指定的一段代碼，直到表達(dá)式不滿足條件時(shí)結(jié)束循環(huán)

while語句的語法結(jié)構(gòu)

while(條件表達(dá)式){

//循環(huán)體語句;

}

執(zhí)行思路：

• 先執(zhí)行條件表達(dá)式，如果條件為true，則執(zhí)行循環(huán)體代碼，反之，則退出循環(huán)，執(zhí)行后面的代碼

• 執(zhí)行循環(huán)體代碼

• 循環(huán)體代碼執(zhí)行完畢后，程序會(huì)繼續(xù)判斷執(zhí)行條件表達(dá)式，如果條件還是為true則繼續(xù)執(zhí)行循環(huán)體，直到循環(huán)條件為false時(shí)，整個(gè)循環(huán)體過程才會(huì)結(jié)束

流程控制圖如下

代碼示范

			var num=1; //初始化變量
			while(num<=10){//條件表達(dá)式
				console.log('Hello world');
				num++;//操作表達(dá)式
			}

注意：

• while里面也有操作表示式， 完成計(jì)數(shù)器的更新，防止死循環(huán)(我沒加操作表達(dá)式，去運(yùn)行代碼結(jié)果谷歌瀏覽器界面黑了)

• 里面應(yīng)該也有計(jì)數(shù)器初始化變量

• while循環(huán)在某種程度上可以與for循環(huán)等價(jià)，只需要把while里面初始化變量;條件表達(dá)式;操作表達(dá)式；放到for循環(huán)里就可以了

代碼示范

			//打印人的一生，從1歲到120歲
 			var age = 1;
			while (age <= 120) {
				console.log('這個(gè)人今年' + age + '歲了');
				age++;
			}
			//2.計(jì)算1~100之間的所有整數(shù)和
			var sum = 0,
				i = 1;
			while (i <= 100) {
				sum += i;
				i++;
			}
			console.log(sum); 
			//3.單出一個(gè)對(duì)話框，你愛我嗎?如果輸入我愛你，就提示結(jié)束，否則一直詢問
			var message='你愛我嗎';
			while(message!=='我愛你'){
				message=prompt('你愛我嗎？');
			}
			alert('我也愛你啊');

do ……while循環(huán)

do……while 語句其實(shí)就是while語句的一個(gè)變種，該循環(huán)會(huì)先執(zhí)行一次代碼塊，然后對(duì)條件表達(dá)式進(jìn)行判斷，如果條件為真，就會(huì)重復(fù)執(zhí)行循環(huán)體，否則退出循環(huán)

do……while語句的語法結(jié)構(gòu)如下

do {

//循環(huán)體代碼- 條件表達(dá)式為true時(shí)重復(fù)執(zhí)行循環(huán)體代碼

}

執(zhí)行思路：

• 先執(zhí)行一次循環(huán)體代碼

• 再執(zhí)行條件表達(dá)式，如果結(jié)果為true，則繼續(xù)執(zhí)行循環(huán)體代碼，如果為false，則退出循環(huán)，繼續(xù)執(zhí)行后面的代碼

注意：先執(zhí)行循環(huán)體語句，再判斷，我們就會(huì)發(fā)現(xiàn)do……while循環(huán)語句至少會(huì)執(zhí)行一次循環(huán)體。

流程控制

代碼示范

			//打印人的一生，從1歲到120歲
			var age = 1;
			do {
				console.log('這個(gè)人今年' + age + '歲了');
				age++;
			} while (age <= 120);
			//2.計(jì)算1~100之間的所有整數(shù)和
			var sum = 0,
				i = 1;
			do {
				sum += i;
				i++;
			} while (i <= 100)
			console.log(sum);
			//3.單出一個(gè)對(duì)話框，你愛我嗎?如果輸入我愛你，就提示結(jié)束，否則一直詢問
			var message = '你愛我嗎';
			do {
				message = prompt('你愛我嗎？');
			} while (message !== '我愛你');
			alert('我也愛你啊');

循環(huán)小結(jié)

• JS中循環(huán)有for,while,do……while

• 三種循環(huán)很多情況下都可以相互交替使用

• 如果是用來計(jì)次數(shù)，跟數(shù)字有關(guān)的，三者使用基本相同，更推薦使用for

• while,do……while可以做更加復(fù)雜的判斷條件，比for循環(huán)靈活一些

• while和do…… while執(zhí)行順序不一樣，while先判斷后執(zhí)行，do……while先執(zhí)行一次，再判斷執(zhí)行

• while和do…… while執(zhí)行次數(shù)不一樣，do……while至少會(huì)執(zhí)行一次循環(huán)體，而while可能一次也不執(zhí)行

• 重點(diǎn)學(xué)習(xí)for循環(huán)語句，因?yàn)樗鼘懛ǜ?jiǎn)潔

continue 和break

continue關(guān)鍵字用于立即跳出本次循環(huán)，繼續(xù)下一次循環(huán)(本次循環(huán)體中continue之后的代碼就會(huì)少執(zhí)行一次)。

如：吃5個(gè)包子，第三個(gè)有蟲子，就扔掉第三個(gè)，繼續(xù)吃第四個(gè)第五個(gè)包子

代碼示范

		for (var i = 1; i <= 5; i++) {
				if (i == 3) {
					continue;
				}
				console.log('我吃了第' + i + '個(gè)包子');
			}
			
			結(jié)果： //我吃了第1個(gè)包子
			      //我吃了第2個(gè)包子
			      //我吃了第4個(gè)包子
			      //我吃了第5個(gè)包子

break關(guān)鍵字

break關(guān)鍵字用于立即跳出整個(gè)循環(huán)(循環(huán)結(jié)束)

如：吃五個(gè)包子，吃到第三個(gè)又發(fā)現(xiàn)了一條蟲，就沒胃口吃了。

代碼示范

			for (var i = 1; i <= 5; i++) {
				if (i == 3) {
					break;
				}
				console.log('我吃了第' + i + '個(gè)包子');
			}
		結(jié)果;//我吃了第1個(gè)包子
			//我吃了第2個(gè)包子

命名規(guī)范及其語法

標(biāo)識(shí)符命名規(guī)范

• 變量，函數(shù)名必須有意義

• 變量的名稱一般用名詞

• 函數(shù)的名稱一般用動(dòng)詞

單行注釋規(guī)范

			for (var i = 1; i <= 5; i++) {
				if (i == 3) {
					continue; //單行注釋前面 注意前面有個(gè)空格
				}
				console.log('我吃了第' + i + '個(gè)包子');
			}

操作符規(guī)范

//操作符的左右兩側(cè)各保留一個(gè)空格
	for (var i = 1; i <= 5; i++) {
				if (i == 3) {
					break;
				}
				console.log('我吃了第' + i + '個(gè)包子');
			}

以上就是“如何掌握javascript流程控制結(jié)構(gòu)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：如何掌握javascript流程控制結(jié)構(gòu)
當(dāng)前鏈接：http://chinadenli.net/article12/ppccdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站改版、企業(yè)網(wǎng)站制作、營(yíng)銷型網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)