當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

跟班学习JavaScript第二天———流程控制、分支、循环、函数

發(fā)布時間：2023/12/8 javascript 46 豆豆

生活随笔收集整理的這篇文章主要介紹了跟班学习JavaScript第二天———流程控制、分支、循环、函数小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

復(fù)習(xí)：

1內(nèi)嵌到html標(biāo)簽中，配合使用

2在html標(biāo)簽中編寫js語句塊，語句塊必須寫在標(biāo)簽中，可以放在html的任意地方，

2.變量和常量

變量是程序運(yùn)行的一段內(nèi)存區(qū)域，用來存儲可以改變的數(shù)據(jù)

變量申明：

var 變量名 = 值

var 變量名；

變量名 = 值

常量是一段被初始化賦值之后，就不允許被修改的數(shù)據(jù)

常量申明：

const 常量名 = 值；

常量和變量可以賦的值：

在js中。數(shù)據(jù)分為兩大類型：

1.原始的基本數(shù)據(jù)類型

String 字符串

Number 數(shù)字類型

Boolean 布爾類型

Null 空類型

Undefined 未定義類型

類型之間的轉(zhuǎn)換：

number和boolean轉(zhuǎn)string類型：toString()

string和boolean轉(zhuǎn)number類型：Number(value)，如果字符串里面的數(shù)據(jù)是數(shù)字則直接轉(zhuǎn)成數(shù)字。但是會把左邊的0去掉，如果不是正常數(shù)據(jù)，則會轉(zhuǎn)成一個NaN的number類型的數(shù)據(jù)，如果是boolean轉(zhuǎn)number的話，true轉(zhuǎn)成1，false轉(zhuǎn)成0

number和string轉(zhuǎn)Boolean類型:Boolean(value)，如果是字符串里面是空字符則轉(zhuǎn)成false，否則是true，如果是數(shù)字類型，0為false，非零數(shù)字則轉(zhuǎn)成true

2.引用數(shù)據(jù)類型

3.運(yùn)算符

3.1算術(shù)運(yùn)算符

+、-、*、/、%

3.2賦值運(yùn)算符

=：賦值

+=：左右兩邊的和賦給左邊

-=：左右兩邊相減的結(jié)果賦值給左邊

3.3比較運(yùn)算符

==：比較數(shù)據(jù)是否相等

===：比較數(shù)據(jù)是否相等之外，還要比較數(shù)據(jù)的類型是否相等

3.4邏輯運(yùn)算符

&&、||、！、&、|

&&和&的區(qū)別：

**&&**判斷表達(dá)式1，如果為false，直接返回false，不再判斷表達(dá)式2；

**&**判斷表達(dá)式1為false時，依舊會去判斷表達(dá)式2，所以&&比&效率高

||和|的區(qū)別：

**||**判斷表達(dá)式1為true的話，直接返回true，不再判斷表達(dá)式2；

**|**判斷表達(dá)式1為true后，依舊會去判斷表達(dá)式2，所以||比|效率高

3.5位運(yùn)算

一個數(shù)亦或（^）同一個數(shù)量詞，得到的是它本身

//不借用第三方數(shù)據(jù)，交換兩個數(shù)據(jù) var a=20; var b= 30; a^=b; //a=a^b 20^30 b^=a; //b=b^a 30^20^30 20 a^=b; //a=a^b 20^30^20 30 console.log('a:'+a+'\nb:'+b)a=a^b^b //20^30^30=20

3.6三元運(yùn)算符

表達(dá)式1 and 表達(dá)式2 ? “true”:“false”;

x=5;y=8;

x>y?x:y x大于y結(jié)果為false，所以輸出y

**練習(xí)：**制作一個加密和解密的程序，比如原數(shù)據(jù)是5，輸出通過程序加密之后的數(shù)據(jù)是30，然后再輸出程序解密之后的數(shù)據(jù)為5

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script type="text/javascript">// 制作一個加密程序// 1.原始數(shù)據(jù)// 2.要有一個密鑰// 3.加密是用過密鑰進(jìn)行原數(shù)據(jù)改變// 4.解密把原數(shù)據(jù)改變后的數(shù)據(jù)進(jìn)行恢復(fù)const original = prompt('請輸入原始數(shù)據(jù)');// var num = original*6;// alert('加密過后的數(shù)據(jù)：'+num);// var result = num/6;// alert('解密后的數(shù)據(jù)：'+result);var num;num=(original*30)/5;alert("加密過后的數(shù)據(jù)："+num);var result;result=original^num^num;alert("解密過后的數(shù)據(jù)："+result);</script></head><body></body> </html>

流程控制語句

分支語句

基礎(chǔ)分支語句（判斷語句）

if(表達(dá)式) {執(zhí)行語句}（多選一）

執(zhí)行語句要執(zhí)行的話，表達(dá)式的結(jié)果必須為true

單分支語句（判斷語句）

if(表達(dá)式) {語句1}else{語句2}（二選一）

表達(dá)式結(jié)果為true，執(zhí)行表達(dá)式1，若不成立則執(zhí)行表達(dá)式2

案例：成年可以進(jìn)入網(wǎng)吧，未成年不可進(jìn)入網(wǎng)吧

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>分支語句</title><script type="text/javascript">var a = prompt("請輸入你的年齡");if (a > 18) {alert('你已成年了，歡迎進(jìn)入XXX');} else {alert('未成年禁止進(jìn)入');}</script></head><body></body> </html>

多分支語句（多判斷條件）

if(表達(dá)式1) {語句1}else if (表達(dá)式2){語句2}else if(表達(dá)式3) {語句2}…… else{語句n} 逐步判斷

判斷多個表達(dá)式，如果表達(dá)式成立即可執(zhí)行后面的語句，若是不成立就判斷下個else if后面的表達(dá)式

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var num = prompt('請輸入學(xué)生人數(shù)');if (0 < num && num <= 20) {alert('將進(jìn)入1號教室');} else if (20 < num && num <= 50) {alert('將進(jìn)入2號教室');} else if (50 < num && num <= 80) {alert('將進(jìn)入3號教室');} else if (80 < num && num <= 200) {alert('將進(jìn)入4號教室')} else {alert('場地有限，滿足不了');}</script></head><body></body> </html>

案例：根據(jù)學(xué)生人數(shù)選擇教教室，每個教室能容納的人數(shù)不同

案例：判斷閏年

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 閏年：能被4整除且不能被100整除，或者能被400整除var year = prompt("請輸入年份");if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {alert(year + "是閏年");} else {alert(year + '是平年');}</script></head><body></body> </html>

練習(xí)：根據(jù)用戶輸入的月份，打印出細(xì)節(jié)，比如：一到三月是春，四到六是夏，七到九是秋，十到十二是冬。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var m = prompt('請輸入要查詢的月份');if (0 < m && m < 4) {alert("現(xiàn)在是春季");} else if (3 < m && m < 7) {alert("現(xiàn)在是夏季");} else if (6 < m && m < 10) {alert("現(xiàn)在是秋季");} else if (9 < m && m < 13) {alert("現(xiàn)在是冬季");} else {alert("沒有這個月份，請輸出正確的月份");}</script></head><body></body> </html>

特殊的分支語句

switch() {

case ‘值’:

執(zhí)行語句;

break;

……

default:

執(zhí)行語句

}

注意：switch() 括號里面的變量值的類型要與case后面的值的類型相同，是全比較（===）

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">//因?yàn)閜rompt()接受得到的值是String類型的，case后面的值是數(shù)字類型的，所以要把w轉(zhuǎn)成數(shù)字型；或者讓case后面的加引號，變成字符串型var w = prompt('請輸入相應(yīng)的星期日');w = Number(w);switch (w) {case 1:alert('今天是星期一');break;case 2:alert('今天是星期二');break;case 3:alert('今天是星期三');break;case 4:alert('今天是星期四');break;case 5:alert('今天是星期五');break;case 6:alert('今天是星期六');break;case 7:alert('今天是星期天');break;default:alert('沒有這個星期數(shù)');}</script></head><body></body> </html>

num與case后面的值匹配，匹配成功就輸出，若是都不匹配，就輸出default后面的執(zhí)行語句
switch(num)里面的num在js里面可以傳任意值
如果我們的判斷條件是一個區(qū)間，這種情況就可以適使用if，如果我們的判斷條件是固定的值，就用switch
注意事項(xiàng)：必須傳入一個值和case后面的值去比較，然后每個case中的執(zhí)行語句后面必須加上break

練習(xí)：判斷用戶輸入的1-7彈出對應(yīng)的星期，如果輸出的不是1-7，就彈出不是

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var w = prompt('請輸入相應(yīng)的數(shù)字');switch (w) {case '1':alert('今天是星期一');break;case '2':alert('今天是星期二');break;case '3':alert('今天是星期三');break;case '4':alert('今天是星期四');break;case '5':alert('今天是星期五');break;case '6':alert('今天是星期六');break;case '7':alert('今天是星期天');break;default:alert('沒有這個星期數(shù)');}</script></head><body></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var num = 2;switch(num) {case 1:alert('1');break;case 2:alert('2');break;case 3:alert('3');break;default:alert("null");}</script></head><body></body> </html>

循環(huán)語句

在生活中，我們可能需要程序來描述重復(fù)操作某一件事情，類似于跑二十圈，我們就是重復(fù)的執(zhí)行跑步的操作

for循環(huán)

屬于開發(fā)過程中，常用的分支之一，特點(diǎn)是分支條件豐富，可以提供復(fù)雜循環(huán)終止或者開始條件

for(表達(dá)式1;表達(dá)式2;表達(dá)式3) {

? 循環(huán)體，執(zhí)行語句

}

注意：寫for循環(huán)之前一定要先確定開始循環(huán)的條件，終止的條件，每次循環(huán)執(zhí)行的操作

1.執(zhí)行表達(dá)式1：var i=1;

2.執(zhí)行表達(dá)式2,：i<=20;判斷是否成立，

3.執(zhí)行循環(huán)體：alert(‘跑了’+i+‘圈’);

4.執(zhí)行表達(dá)式3：i++,i=2

2.執(zhí)行表達(dá)式2，i<=20;判斷是否成立

……一直循環(huán)2，3，4這三步，直到表達(dá)式2的結(jié)果為false，就結(jié)束循環(huán)

練習(xí)：

求1-10的和

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 1-10的和var sum = 0;for (var i = 1; i <= 10; i++) {// 1+2+3+4+5+6+7+8+9+10=55sum += i;}alert('sum：' + sum);alert('1-10的平均數(shù)：'+sum/10);</script></head><body></body> </html>

練習(xí)：求1-100中所有的奇數(shù)的和，和所有偶數(shù)的和

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var oddnum = 0;var evennum = 0;for (var i = 1; i <= 100; i++) {if (i % 2 == 0) {evennum += i;} else {oddnum += i;}}alert('100以內(nèi)所有的偶數(shù)和：' + evennum);alert('100以內(nèi)所有的奇數(shù)和：' + oddnum);</script></head><body></body> </html>

嵌套循環(huán)：在一些特殊的場景下，我們可能一個for循環(huán)無法實(shí)現(xiàn)效果，需要在for循環(huán)中套入for循環(huán)

練習(xí)：打印出九九乘法表（必要掌握）

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">document.write("<h1>九九乘法表</h1>");for(var x=1;x<=9;x++) {for(var y=1;y<=x;y++) {document.write(x+'*'+y+'='+(x*y));document.write("&nbsp&nbsp");}document.write("<br/>");}</script></head><body></body> </html>

while循環(huán)

語法：

while(循環(huán)條件) {

循環(huán)體

}

while循環(huán)的弊端：變量的申明在循環(huán)的外面，循環(huán)結(jié)束變量還在

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var run = 1;while(run<10) {alert("跑了"+run+'圈');run++;}</script></head><body></body> </html>

do {

循環(huán)體

}while(循環(huán)條件)

不管while中的表達(dá)式是否成立，do中的循環(huán)體都會先執(zhí)行一次

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 跑10圈之后就結(jié)束var run = 1;do {alert("跑了"+run+'圈');run++;}while(run<11)</script></head><body></body> </html>

練習(xí)：

1.1-100的和

2.1-100的和的平均數(shù)

3.1-100的所有偶數(shù)和

4.1-100的所有奇數(shù)和

5.1-100的能被4整除的數(shù)的和

for循環(huán)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 1-100的和var sum = 0;var oddnum = 0;var evennum = 0;var sumf = 0;// forfor (var i = 1; i <= 100; i++) {sum += i;if (i % 2 == 0) {evennum += i;} else {oddnum += i;}if (i % 4 == 0) {sumf += i;}}alert('1-100的和為:\n' + sum);alert('1-100的平均值:\n' + (sum / 100));alert("1-100的所有偶數(shù)和:\n" + evennum);alert("1-100的所有奇數(shù)和:\n" + oddnum);alert("1-100的能被4整除的數(shù)的和:\n" + sumf);</script></head><body></body> </html>

while循環(huán)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>while</title><script type="text/javascript">// 1-100的平均值var sum = 0;var oddnum = 0;var evennum = 0;var sumf = 0;var i=1;while (i<=100){// 1-100的和sum+=i;if (i % 2 == 0) {evennum += i;} else {oddnum += i;}if (i%4==0) {sumf+=i;}i++;}alert('1-100的和為:\n' + sum);alert('1-100的平均值:\n' + (sum / 100));alert("1-100的所有偶數(shù)和:\n" + evennum);alert("1-100的所有奇數(shù)和:\n" + oddnum);alert("1-100的能被4整除的數(shù)的和:\n" + sumf);</script></head><body></body> </html>

JS函數(shù)

把具備一定功能或者一定業(yè)務(wù)邏輯的代碼放在一起，給它取一個名字，這個有名字的代碼塊就叫做函數(shù)，通過函數(shù)我們可以大大的減少重復(fù)的代碼，減少代碼量

函數(shù)語法聲明：(function：函數(shù)的關(guān)鍵詞，用來描述函數(shù)的)

1.變量形式的聲明：

? var fun = function() {

? 執(zhí)行內(nèi)容;

}

2.函數(shù)形式的聲明：

? function fun2() {

? 執(zhí)行內(nèi)容;

}

函數(shù)的調(diào)用

直接在js的代碼塊中，通過函數(shù)名()調(diào)用，若是不調(diào)用，函數(shù)就只加載，不執(zhí)行

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var fun= function() {alert("變量聲明的函數(shù)");}function c() {alert('函數(shù)形式的聲明');}fun();c();</script></head><body></body> </html>

練習(xí)：編寫一個函數(shù)，該函數(shù)打印九九乘法表，然后再調(diào)用該函數(shù)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">function m() {for(var x=1;x<=9;x++) {for(var y=1;y<=x;y++) {document.write(x+'*'+y+'='+(x*y));document.write("&nbsp&nbsp&nbsp&nbsp");}document.write("<br/><br/>")}}m();</script></head><body></body> </html>

函數(shù)種類：

1.按照參數(shù)類型劃分

? 無參函數(shù)和有參函數(shù)

無參函數(shù)：函數(shù)的方法中沒有傳遞任何參數(shù)，無需傳遞數(shù)據(jù)，直接調(diào)用

var fun= function() {}

有參函數(shù)：函數(shù)的方法中需要傳遞參數(shù)，在調(diào)用時需要傳遞一個參數(shù)給函數(shù)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">var run = function(num) {alert("跑了"+num+"圈");}run(5);run(10);</script></head><body></body> </html>

形參和實(shí)參：

? 形參：定義一個范型的參數(shù)，沒有實(shí)際的值，可以是任何類型

? 實(shí)參：在函數(shù)中實(shí)際使用的參數(shù)值。

練習(xí)：班上有5位同學(xué)，要求編寫一個函數(shù)記錄每個同學(xué)的姓名，分?jǐn)?shù)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">function result(n,f) {document.write(n+'的分?jǐn)?shù)為:&nbsp&nbsp&nbsp&nbsp'+f+"<br/>");}result("張三",88);result("李四",89);result("王五",80);result("周六",85);result("田七",87);</script></head><body></body> </html>

2.按照返回值區(qū)分

有返回值的函數(shù)：調(diào)用函數(shù)處理完畢之后，函數(shù)返回一個數(shù)據(jù)。

函數(shù)的返回值通過return關(guān)鍵字返回

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 編寫一個函數(shù)，比較之間的最大數(shù)function max(num1,num2) {if(num1>num2) {return num1;}else if(num1<num2) {return num2}else {return num1;}}var maxnum = max(10,10);alert(maxnum);</script></head><body></body> </html>

無返回值的函數(shù)：調(diào)用函數(shù)處理完畢之后，函數(shù)不返回任何數(shù)據(jù)。

總結(jié)

以上是生活随笔為你收集整理的跟班学习JavaScript第二天———流程控制、分支、循环、函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：中国数字标牌行业市场供需与战略研究报告
下一篇：在线时间戳转换工具，纯JS 实现