Javascript基礎(chǔ):運(yùn)算符與流程控制詳解
1. 運(yùn)算符(操作符)
「運(yùn)算符」是用于實(shí)現(xiàn)賦值、比較和執(zhí)行算數(shù)運(yùn)算等功能的符號(hào)。常用運(yùn)算符分類如下
- 算數(shù)運(yùn)算符
- 遞增和遞減運(yùn)算符
- 比較運(yùn)算符
- 邏輯運(yùn)算符
- 賦值運(yùn)算符
1.1 算數(shù)運(yùn)算符
| 運(yùn)算符 | 描述 | 案例 |
|---|---|---|
| + | 加 | 10+20=30 |
| - | 減 | 10-20=-10 |
| * | 乘 | 10*20=200 |
| / | 除 | 10/20=0.5 |
| % | 取余(取模) | 返回除法的余數(shù)9%2=1 |
//alert(1 + 1);
console.log(1 + 1); //運(yùn)算符的左右兩側(cè)都要敲空格
//alert(1 - 1); //0
//alert(1 * 1); //1
//alert(1 / 1); //1
1. % 取余(取模)
//alert(4 % 2); //0 //alert(5 % 3); //2 //alert(3 % 5); //3 注意?。。。。。。。。?!
2.浮點(diǎn)數(shù) 算數(shù)運(yùn)算里面會(huì)有問題
var result = 0.1 + 0.2; // 結(jié)果不是 0.3,而是:0.30000000000000004 console.log(0.07 * 100); // 結(jié)果不是 7, 而是:7.000000000000001
浮點(diǎn)數(shù)值的最高精度是17位小數(shù),但是在進(jìn)行算數(shù)運(yùn)算時(shí)其精確度遠(yuǎn)遠(yuǎn)不如整數(shù),所以不要直接判斷兩個(gè)浮點(diǎn)數(shù)是否相等!
3. 我們不能直接拿浮點(diǎn)數(shù)來(lái)進(jìn)行相比較 是否相等
var num = 0.1 + 0.2; alert(num == 0.3); //false 要轉(zhuǎn)化為2進(jìn)制,精確度會(huì)有誤差
- 表達(dá)式與返回值
- 表達(dá)式:由數(shù)字、運(yùn)算符和變量組成的式子。
- 返回值:每一個(gè)表達(dá)式經(jīng)過相應(yīng)的運(yùn)算之后,會(huì)有一個(gè)最終結(jié)果,稱為表達(dá)式的返回值
// 是由數(shù)字、運(yùn)算符、變量等組成的式子 我們稱為表達(dá)式 1+1 // alert(1 + 1); //2 就是返回值 //寫法 //1 + 1=2 // 在我們程序里面 2 = 1 + 1 把我們右邊表達(dá)式計(jì)算完畢把返回值給左邊 var num = 1 + 1; // alert(num); //2
1.2 遞增和遞減運(yùn)算符
如果需要反復(fù)給數(shù)字變量添加或減去1,可以使用遞增( + + )和遞減( - - )運(yùn)算符來(lái)完成。
在javascript 中,遞增( + + )和遞減( - - )運(yùn)算符既可以放在變量前面,也可以放在變量后面。放在變量前面時(shí),稱為前置遞增( 遞減 )運(yùn)算符,放在后面是后置遞增( 遞減 )運(yùn)算符
注意:遞增和遞減運(yùn)算符必須配合變量使用。
前置遞增運(yùn)算符使用口訣:先自加,后返回值
<script>
//1. 想要一個(gè)變量自己加1 num=num+1 比較麻煩
var num = 1;
num = num + 1; // ++num
num = num + 1;
//alert(num); //3
//2. 前置遞增運(yùn)算符 ++寫在變量前面
var age = 20;
++age; //類似于 age = age + 1
//alert(age); //21
// 3. 先加1 后返回值
var p = 10;
alert(++p + 10); //21
</script>
前置遞增運(yùn)算符使用口訣:先返回值原值 后自加1
<script>
var num = 10;
num++; // num = num + 1 ++num
// alert(num); //11
//1. 前置自增和后置自增如果單獨(dú)使用 效果是一樣的
//2. 后置自增 口訣:先返回值原值 后自加1
var age = 10;
//alert(age++ + 10); //20
//alert(age); //11
//alert(age + 10); //21
</script>
案例:
<script>
var a = 10;
++a; //++a = 11 a=11 ++a 是表達(dá)式
var b = ++a + 2; // a=12 a++ = 12 前置:先自加,后返回值
//alert(b); //14
var c = 10;
c++; //c++ = 11 c = 11
var d = c++ + 2; //c++ = 11 c = 12 后置:先原值返回,后自加
//alert(d); //13
var e = 10;
var f = e++ + ++e; // e++ =10 e=11 ++e=12
console.log(f); //22
// 后置自增 先表達(dá)式返回原值 后面變量再自加1
// 前置自增 先自加,后運(yùn)算
// 單獨(dú)使用 ,運(yùn)行結(jié)果相同
// 開發(fā)時(shí),大多數(shù)使用后置遞增/減,并且代碼獨(dú)占一行,例如:num++;或者num--
</script>
1.3 比較運(yùn)算符
比較運(yùn)算符是兩個(gè)數(shù)據(jù)進(jìn)行比較時(shí)所使用的運(yùn)算符,比較運(yùn)算符,會(huì)返回一個(gè)布爾值(true/false)作為比較運(yùn)算的結(jié)果。
| 運(yùn)算符 | 描述 | 案例 |
|---|---|---|
| + | 加 | 10+20=30 |
| - | 減 | 10-20=-10 |
| * | 乘 | 10*20=200 |
| / | 除 | 10/20=0.5 |
| % | 取余(取模) | 返回除法的余數(shù)9%2=1 |
<script>
// alert(3 >= 5); //false
// alert(2 <= 5); //true
//1. 我們程序員里面的等于符號(hào)是 == 默認(rèn)轉(zhuǎn)換數(shù)據(jù)類型 會(huì)把字符串型的數(shù)據(jù)轉(zhuǎn)換為數(shù)字型
// 只要求值相對(duì)
//alert(3 == 5); //false
//alert('pink老師' == '劉德華'); //false
//alert(18 == 18); //true
//alert(18 == '18'); //true
//alert(18 != 18); //false != 不等于
//2. 我們程序員里面有全等 一模一樣 要求兩側(cè)的值,還有數(shù)據(jù)類型完全一致才可以 true
//alert(18 === 18); //true
//alert(18 === '18'); //false
</script>
| 符號(hào) | 作用 | 用法 |
| = | 賦值 | 把右邊給左邊 |
| == | 判斷 | 判斷兩邊值是否相等(注意此時(shí)有隱式轉(zhuǎn)換) |
| === | 全等 | 判斷兩邊的值和數(shù)據(jù)類型是否完全相等 |
1.4 邏輯運(yùn)算符
概念:邏輯運(yùn)算符是用來(lái)進(jìn)行布爾值運(yùn)算的運(yùn)算符,其返回值也是布爾值。后面開發(fā)中經(jīng)常用于多個(gè)條件的判斷
<script>
// 1. 邏輯 與&&(and) 兩側(cè)都為true 結(jié)果才是true 只要一側(cè)結(jié)果為false 結(jié)果就為false
//alert(3 > 5 && 3 > 2); //false
//alert(3 < 5 && 3 > 2); //true
// 2. 邏輯或|| (or) 兩側(cè)都為 false 結(jié)果才是假 false ,只要一側(cè)為true ,結(jié)果就是true
//alert(3 > 5 || 3 > 2); //true
//alert(3 > 5 || 3 < 2); //false
//3. 邏輯非 ! (not)
alert(!true); //false
</script>
練習(xí):
<script>
var num = 7;
var str = "我愛你~中國(guó)~";
alert(num > 5 && str.length >= num); //true
alert(num < 5 && str.length >= num); //false
alert(!(num < 10)); //false
alert(!(num < 10 || str.length == num)); //false
</script>
短路運(yùn)算(邏輯中斷):(js API)
當(dāng)有多個(gè)表達(dá)式(值)時(shí),左邊的表達(dá)式值可以確定結(jié)果時(shí),就不再繼續(xù)運(yùn)算右邊的表達(dá)式的值;
3. 邏輯與短路運(yùn)算 如果表達(dá)式1 結(jié)果為真 則返回表達(dá)式2 如果表達(dá)式1為假 那么返回表達(dá)式1
alert(123 && 456); //456 除了0之外,所有的數(shù)字都為真
alert(0 && 456); // 0
alert(0 && 1 + 2 && 456 * 56789); // 0
alert('' && 1 + 2 && 456 * 56789); // ''
如果有空的或者否定的為假 其余是真的 : 0 '' null undefined NaN
4. 邏輯或短路運(yùn)算 如果表達(dá)式1 結(jié)果為真 則返回的是表達(dá)式1 如果表達(dá)式1 結(jié)果為假 則返回表達(dá)式2
alert(123 || 456); // 123
alert(123 || 456 || 456 + 123); // 123
alert(0 || 456 || 456 + 123); // 456
邏輯中斷很重要 它會(huì)影響我們程序運(yùn)行結(jié)果
var num = 0;
//alert(123 || num++); //123 num++不會(huì)運(yùn)行
//alert(num); // 0
1.5 賦值運(yùn)算符
| 運(yùn)算符 | 描述 | 案例 |
|---|---|---|
| = | 直接賦值 | var userName = 'fan' |
| += -= | 加減一個(gè)數(shù)后 再賦值 | var age=5; age+=5 |
| *= /= %= | 乘、除、取模后再賦值 | var age=5; age*=5 |
<script>
var num = 10;
// num = num + 1; //num++
// num = num + 2 //num+=2;
var num = 10;
num += 5;
// alert(num); //15
var num = 10;
num -= 5;
// alert(num); //5
var age = 2;
age *= 3;
// alert(age); //6
var age = 6;
age /= 3;
// alert(age); //2
var age = 4;
age %= 2;
// alert(age); //0
</script>
1.6 運(yùn)算符優(yōu)先級(jí)
| 優(yōu)先級(jí) | 運(yùn)算符 | 順序 |
|---|---|---|
| 1 | 小括號(hào) | () |
| 2 | 一元運(yùn)算符 | ! ++ -- |
| 3 | 算數(shù)運(yùn)算符 | 先* / % 后+ - |
| 4 | 關(guān)系運(yùn)算符 | > >= < <= |
| 5 | 相等運(yùn)算符 | == != === !== |
| 6 | 邏輯運(yùn)算符 | 先&& 后|| |
| 7 | 賦值運(yùn)算符 | = |
| 8 | 逗號(hào)運(yùn)算符 | , |
<script>
// 一元運(yùn)算符:++num !num 二元運(yùn)算符: 2 + 3
// 練習(xí)1
console.log(4 >= 6 || '人' != '阿凡達(dá)' && !(12 * 2 == 144) && true) //true
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); //true
console.log('-------------------');
// 練習(xí)2
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); //false
var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); //true
var c = 2 === "2";
console.log(c); //false
var d = !c || b && a;
console.log(d); //true
</script>
2. 流程控制
「流程控制」在一個(gè)程序執(zhí)行的過程中,各條代碼的執(zhí)行順序?qū)Τ绦虻慕Y(jié)果是有直接影響的。很多時(shí)候我們要通過控制代碼的執(zhí)行順序來(lái)實(shí)現(xiàn)我們要完成的功能。流程控制主要有三種結(jié)構(gòu),分別是順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu),代表三種代碼執(zhí)行的順序。
分支流程控制:
2.1 if 的語(yǔ)法結(jié)構(gòu)
if (條件表達(dá)式) {
//執(zhí)行語(yǔ)句
}
2. 執(zhí)行思路 如果
if 里面的條件表達(dá)式結(jié)果為真 true 則執(zhí)行大括號(hào)里面的 執(zhí)行語(yǔ)句
如果if 條件表達(dá)式結(jié)果為假 則不執(zhí)行大括號(hào)里面的語(yǔ)句 則執(zhí)行if 語(yǔ)句后面的代碼
3. 體驗(yàn)代碼:
if (3 < 5) {
alert('沙漠駱駝');
}
案例:
<script>
// 彈出 prompt 輸入框,用戶輸入年齡, 程序把這個(gè)值取過來(lái)保存到變量中
// 使用 if 語(yǔ)句來(lái)判斷年齡,如果年齡大于18 就執(zhí)行 if 大括號(hào)里面的輸出語(yǔ)句
var age = prompt('請(qǐng)輸入年齡');
if (age >= 18) {
alert('可以進(jìn)入網(wǎng)吧')
}
</script>
2.2 if else雙分支語(yǔ)句
<script>
// 1. 語(yǔ)法結(jié)構(gòu) if 如果 else 否則
// if (條件表達(dá)式) {
// // 執(zhí)行語(yǔ)句1
// } else {
// // 執(zhí)行語(yǔ)句2
// }
// 2. 執(zhí)行思路 如果表達(dá)式結(jié)果為真 那么執(zhí)行語(yǔ)句1 否則 執(zhí)行語(yǔ)句2
// 3. 代碼驗(yàn)證
var age = prompt('請(qǐng)輸入您的年齡:');
if (age >= 18) {
alert('我想帶你去網(wǎng)吧偷耳機(jī)');
} else {
alert('滾, 回家做作業(yè)去');
}
// 5. if里面的語(yǔ)句1 和 else 里面的語(yǔ)句2 最終只能有一個(gè)語(yǔ)句執(zhí)行 2選1
// 6. else 后面直接跟大括號(hào)
</script>
案例:閏年
// 算法:能被4整除且不能整除100的為閏年(如2004年就是閏年,1901年不是閏年)或者能夠被 400 整除的就是閏年
// 彈出prompt 輸入框,讓用戶輸入年份,把這個(gè)值取過來(lái)保存到變量中
// 使用 if 語(yǔ)句來(lái)判斷是否是閏年,如果是閏年,就執(zhí)行 if 大括號(hào)里面的輸出語(yǔ)句,否則就執(zhí)行 else里面的輸出語(yǔ)句
// 一定要注意里面的且 && 還有或者 || 的寫法,同時(shí)注意判斷整除的方法是取余為 0
var year = prompt("請(qǐng)輸入要檢測(cè)的年份:")
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert(year + '是閏年')
} else {
alert(year + '是平年')
}
2.3 if else if語(yǔ)句(多選1)
<script>
// 1. 多分支語(yǔ)句 就是利用多個(gè)條件來(lái)選擇不同的語(yǔ)句執(zhí)行 得到不同的結(jié)果 多選1 的過程
// 2. 是多分支語(yǔ)句
// 3. 語(yǔ)法規(guī)范if else if語(yǔ)句
if (條件表達(dá)式1) {
//語(yǔ)句1;
} else if (條件表達(dá)式2) {
//語(yǔ)句2;
} else if (條件表達(dá)式3) {
//語(yǔ)句3;
} else {
//最后語(yǔ)句;
}
// 4. 執(zhí)行思路
// 如果條件表達(dá)式1 滿足就執(zhí)行 語(yǔ)句1 執(zhí)行完畢后,退出整個(gè)if 分支語(yǔ)句
// 如果條件表達(dá)式1 不滿足,則判斷條件表達(dá)式2 滿足的話,執(zhí)行語(yǔ)句2 以此類推
// 如果上面的所有條件表達(dá)式都不成立,則執(zhí)行else 里面的語(yǔ)句
// 5. 注意點(diǎn)
// (1) 多分支語(yǔ)句還是多選1 最后只能有一個(gè)語(yǔ)句執(zhí)行
// (2) else if 里面的條件理論上是可以任意多個(gè)的
// (3) else if 中間有個(gè)空格了
</script>
案例:成績(jī)
<script>
// 偽代碼 按照從大到小判斷的思路
// 彈出prompt輸入框,讓用戶輸入分?jǐn)?shù)(score),把這個(gè)值取過來(lái)保存到變量中
// 使用多分支 if else if 語(yǔ)句來(lái)分別判斷輸出不同的值
var score = prompt('請(qǐng)輸入分?jǐn)?shù):');
if (score >= 90) {
alert('A');
} else if (score >= 80) { //不用寫:90>score>=80 能運(yùn)行下面,一定是小于90的
alert('B');
} else if (score >= 70) {
alert('C');
} else if (score >= 60) {
alert('D');
} else {
alert('E'); //要帶引號(hào),不然以為是一個(gè)變量,就要聲明了
}
</script>
2.4 三元表達(dá)式
<script>
// 1. 有三元運(yùn)算符組成的式子我們稱為三元表達(dá)式
// 2. 一元運(yùn)算符:++num 二元運(yùn)算符: 3 + 5 三元運(yùn)算符: ? :
// 3. 語(yǔ)法結(jié)構(gòu)
// 條件表達(dá)式 ? 表達(dá)式1 : 表達(dá)式2
// 4. 執(zhí)行思路
// 如果條件表達(dá)式結(jié)果為真 則 返回 表達(dá)式1 的值 如果條件表達(dá)式結(jié)果為假 則返回 表達(dá)式2 的值
// 5. 代碼體驗(yàn)
var num = 10;
var result = num > 8 ? '是的' : '不是' // 我們知道表達(dá)式是有返回值的,賦值給result
console.log(result); //是的
//等價(jià)于:
var num = 10;
if (num > 5) {
alert('是的');
} else {
alert('不是的');
}
// 三元表達(dá)式是簡(jiǎn)化版的if else
</script>
案例 : 數(shù)字補(bǔ)0
<script>
// 用戶輸入0~59之間的一個(gè)數(shù)字
// 如果數(shù)字小于10,則在這個(gè)數(shù)字前面補(bǔ)0,(加0 拼接) 否則 不做操作
// 用一個(gè)變量接受這個(gè)返回值,輸出
var num = prompt('請(qǐng)輸入0~59之間的一個(gè)數(shù)字?')
//三元表達(dá)式: 表達(dá)式? 表達(dá)式1: 表達(dá)式2;
var result = num < 10 ? '0' + num : num; //字符型的0 把返回值賦值給一個(gè)變量
alert(result);
</script>
2.5 switch分支流程控制
switch 語(yǔ)句也是多分支語(yǔ)句,它用于基于不同的條件來(lái)執(zhí)行不同的代碼。當(dāng)要針對(duì)變量設(shè)置一系列的特定值的選項(xiàng)時(shí),就可以使用 switch。
<script>
//1. switch 語(yǔ)句也是多分支語(yǔ)句 也可以實(shí)現(xiàn)多選1
// 2. 語(yǔ)法結(jié)構(gòu) switch 轉(zhuǎn)換、開關(guān) case小例子或者選項(xiàng)的意思 break 退出
/* switch (表達(dá)式) {
case value1: 執(zhí)行語(yǔ)句1; break;
case value2: 執(zhí)行語(yǔ)句2; break;
case value3: 執(zhí)行語(yǔ)句3; break;
default: 執(zhí)行最后的語(yǔ)句;
} */
// 3. 執(zhí)行思路 利用我們的表達(dá)式的值 和 case 后面的選項(xiàng)值相匹配 如果匹配上,就執(zhí)行該case 里面的語(yǔ)句 如果都沒有匹配上,那么執(zhí)行 default里面的語(yǔ)句
switch (2) {
case 1: alert('這是1'); break;
case 2: alert('這是2'); break; //這是2
case 3: alert('這是3'); break;
default: alert('沒有匹配結(jié)果');
}
</script>
注意事項(xiàng):
var num=1;
switch(num){
case 1: console.log(1);break; //1
case 2: console.log(2);break;
case 3: console.log(3);break;
}
// 1. 我們開發(fā)里面 表達(dá)式我們經(jīng)常寫成變量
// 2. 我們num 的值 和 case 里面的值相匹配的時(shí)候是 全等 必須是值和數(shù)據(jù)類型一致才可以 num === 1
break 如果當(dāng)前的case里面沒有break 則不會(huì)退出switch 是繼續(xù)執(zhí)行下一個(gè)case
var num=1;
switch(num){
case 1: console.log(1);//1
case 2: console.log(2);//2
case 3: console.log(3);//3
}
案例:查詢水果案例
<script>
// 彈出 prompt 輸入框,讓用戶輸入水果名稱,把這個(gè)值取過來(lái)保存到變量中。
// 將這個(gè)變量作為 switch 括號(hào)里面的表達(dá)式。
// case 后面的值寫幾個(gè)不同的水果名稱,注意一定要加引號(hào) ,因?yàn)楸仨毷侨绕ヅ洹?
// 彈出不同價(jià)格即可。同樣注意每個(gè) case 之后加上 break ,以便退出 switch 語(yǔ)句。
// 將 default 設(shè)置為沒有此水果。
var fruit = prompt('請(qǐng)輸入水果名稱')
switch (fruit) {
case '蘋果':
alert('蘋果的價(jià)格是 3.5/斤');
break;
case '榴蓮':
alert('榴蓮的價(jià)格是 35/斤');
break;
default:
alert('沒有此水果');
}
</script>
switch 語(yǔ)句和 if else if區(qū)別:
1. 一般情況下,它們兩個(gè)語(yǔ)句可以相互替換
2. switch...case 語(yǔ)句通常處理case為比較確定值的情況,而if...else...語(yǔ)句更加靈活,常用于范圍判斷(大于、等于某個(gè)范圍)
3. switch 語(yǔ)句進(jìn)行條件判斷后直接執(zhí)行到程序的條件語(yǔ)句,效率更高。而if..else 語(yǔ)句有幾種條件,就得判斷多少次。
4. 當(dāng)分支比較少時(shí),if...else語(yǔ)句的執(zhí)行效率比switch語(yǔ)句高。
5. 當(dāng)分支比較多時(shí),switch語(yǔ)句的執(zhí)行效率比較高,而且結(jié)構(gòu)更清晰。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Javascript SHA-1:Secure Hash Algorithm
Javascript SHA-1:Secure Hash Algorithm...2006-12-12
JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹
prototype為對(duì)象添加屬性的的過程中有些誤區(qū),在本文將為大家詳細(xì)介紹下,感興趣的朋友可不要錯(cuò)過2013-10-10
js常用的鍵盤事件有哪些(用法示例)_鍵碼keyCode對(duì)照表
用戶按下鍵盤上的鍵,首先會(huì)觸發(fā)keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框發(fā)生變化之前被觸發(fā);而keyup在文本框發(fā)生變化之后被觸發(fā)。如果用戶按下一個(gè)鍵不放,就會(huì)重復(fù)觸發(fā)keydown和keypress事件。2023-02-02
淘寶網(wǎng)提供的國(guó)內(nèi)NPM鏡像簡(jiǎn)介和使用方法
我們以前介紹過cnpmjs.org,非常棒的npm國(guó)內(nèi)鏡像。由于其使用量越來(lái)越大,加上淘寶內(nèi)部也有很多項(xiàng)目使用 NodeJS,于是,淘寶正式基于 cnpmjs 推出了鏡像服務(wù)2014-04-04
javaScript復(fù)制功能調(diào)用實(shí)現(xiàn)方案
說到使用js實(shí)現(xiàn)點(diǎn)擊復(fù)制的功能,我下面想說的方法也是和網(wǎng)上的大同小異的。js實(shí)現(xiàn)是很簡(jiǎn)單,最難的是兼容問題,畢竟用IE以外的人還是有很多的2012-12-12
Javascript基礎(chǔ)教程之?dāng)?shù)據(jù)類型 (布爾型 Boolean)
本文簡(jiǎn)單講解了javascript數(shù)據(jù)類型中的布爾型(boolean),十分的簡(jiǎn)單,小伙伴們看下就明白了2015-01-01
JavaScript入門教程(10) 認(rèn)識(shí)其他對(duì)象
對(duì)于需要更好的控制html的一些元素,就需要了解這些了。大家知道就行,有需要時(shí)可以再看。2009-01-01

