- JavaScript前端開發(fā)程序設(shè)計教程（微課版）
- 李玉臣 臧金梅
- 2441字
- 2019-12-20 19:37:10
2.3 運算符
運算符是指能夠完成一系列計算操作的符號（如+、-、*、/等），通常將被計算的數(shù)稱為操作數(shù)，例如“1+2”這個式子中1和2就是操作數(shù)，而“+”就是操作符。按照操作數(shù)的個數(shù)可以將運算符分為單目運算符（只有一個操作數(shù)）、雙目運算符（有2個操作數(shù)）和三目運算符（有3個操作數(shù)）。
1.單目運算符
單目運算符只有一個操作數(shù)，常見的單目運算符例如++、--等，如下所示。
x++
y-
2.雙目運算符
雙目運算符有兩個操作數(shù)，這也是最常用的，例如下面的例子都是雙目運算符。
x+y
x-y
x>y
x==y
3.三目運算符
三目運算符有3個操作數(shù)，條件運算符“？:”就是典型的三目運算符，如下所示。
<script type="text/javascript">
var score;
score>90 ? "優(yōu)秀"："普通"；
</script>
“?”前面為一條件判斷表達式，如果符合條件，即其值為true時，就取冒號前的值，否則就取冒號后面的值。例如上面的代碼，如果score的值大于90，則經(jīng)過計算后其結(jié)果為“優(yōu)秀”。如果score的值小于90，則經(jīng)過計算后其結(jié)果為“普通”。
此外，按照操作數(shù)的類型來分，運算符還可以分為算術(shù)運算符、關(guān)系運算符、賦值運算符、邏輯運算符和條件運算符等。
2.3.1 算術(shù)運算符
算術(shù)運算符主要用于在程序中進行加、減、乘、除等運算，JavaScript中常用的算術(shù)運算符如表2-3所示。
表2-3 JavaScript的算術(shù)運算符
【同步案例2-4】：計算賬單金額
案例描述：日常中經(jīng)常遇到算帳的問題。本案例要求通過編程實現(xiàn)統(tǒng)計商品的金額。當(dāng)商品標(biāo)價100元，稅率為0.05，統(tǒng)計買一件該商品的總金額和稅金分別是多少？
（1）案例分析
①按照案例要求，要計算商品總金額，可用算術(shù)運算符來實現(xiàn)。
②在實現(xiàn)本案例時，需要先聲明四個變量分別用來保存總金額、稅金、稅率、標(biāo)價的值，再通過算術(shù)運算符來進行計算。
③將計算結(jié)果在頁面上輸出。
（2）實現(xiàn)代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品統(tǒng)計總價示例</title>
</head><body><pre>
<script type="text/javascript">
var list=100;//標(biāo)價
var rate=0.05;//稅率
var tax;//稅金
var total;//總金額
tax=list*rate;//稅金等于標(biāo)價*稅率
total=list+tax;//總金額等于標(biāo)價+稅金
document.writeln("商品的總金額="+total);
document.writeln("商品的稅金="+tax);
</script>
</pre></body></html>
（3）實現(xiàn)效果
實現(xiàn)效果如圖2-6所示。
圖2-6 計算賬單金額示例
2.3.2 關(guān)系運算符
關(guān)系運算符又叫比較運算符，是對兩個操作數(shù)進行比較，然后返回一個布爾值。關(guān)系運算符如表2-4所示。
表2-4 JavaScript的關(guān)系運算符
【同步案例2-5】：比較兩個數(shù)的大小
案例描述：在日常生活中，經(jīng)常遇到兩數(shù)大小比較的問題。要實現(xiàn)兩個數(shù)的大小比較，用JavaScript的關(guān)系運算符很容易實現(xiàn)。本案例要求運用比較運算符來比較兩個數(shù)的大小并在頁面上輸出結(jié)果。
（1）案例分析
①按照案例要求，對兩個數(shù)的大小進行比較，可用關(guān)系運算符來實現(xiàn)。
②首先要聲明一個變量，用來保存要比較的值。然后通過這個變量的值與其他值進行比較。
③將比較的結(jié)果通過document.write()在頁面上輸出。
（2）實現(xiàn)代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>比較兩個數(shù)的大小示例</title>
</head><body>
<script type="text/javascript">
var score=80;
document.write("score變量的值為："+score+"<br>");
document.write("score>=70："+(score>=70)+"<br>");
document.write("score<70："+(score<70)+"<br>");
document.write("score!=70："+(score!=70)+"<br>");
document.write("score>70："+(score>70)+"<br>");
</script>
</body></html>
（3）實現(xiàn)效果
實現(xiàn)效果如圖2-7所示。
圖2-7 比較兩數(shù)大小示例
2.3.3 賦值運算符
JavaScript的賦值運算分為簡單賦值運算和復(fù)合賦值運算。簡單賦值運算是將賦值運算符（=）右邊的值賦值給左邊的變量；復(fù)合賦值運算則是在賦值時混合了其他運算，例如下列代碼所示。
sum+=n //等同于sum=sum+n
需要注意的是，賦值表達式的值等于賦值運算符左邊的變量值，JavaScript的賦值運算符如表2-5所示。
表2-5 JavaScript的賦值運算符
續(xù)表
【同步案例2-6】：賦值運算符使用示例
案例描述:在JavaScript程序設(shè)計中，經(jīng)常遇到賦值。本案例要求通過使用賦值運算符，實現(xiàn)表達式賦值運算，并在頁面上輸出結(jié)果。
（1）案例分析
①按照案例要求，要對變量進行賦值運算，可先聲明兩個變量，并對變量賦初值。
②通過賦值運算符進行賦值運算。
③通過document.write()語句將結(jié)果在頁面上輸出。
（2）實現(xiàn)代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>賦值運算符測試示例</title>
</head><body><pre>
<script type="text/javascript">
var a=5,b=6;
document.writeln("a=5,b=6");
document.writeln("");
document.write("a+=b="); a+=b; document.writeln(a);
document.write("a-=b="); a-=b; document.writeln(a);
document.write("a*=b="); a*=b; document.writeln(a);
document.write("a/=b="); a/=b; document.writeln(a);
document.write("a%=b="); a%=b; document.writeln(a);
</script>
</pre></body></html>
（3）實現(xiàn)效果
實現(xiàn)效果如圖2-8所示。
圖2-8 賦值運算符使用示例
2.3.4 邏輯運算符
邏輯運算符的操作數(shù)和運算結(jié)果都是布爾值，在關(guān)系表達式中經(jīng)常用到邏輯運算符，所以在JavaScript程序中，邏輯運算符比較典型的應(yīng)用就是與關(guān)系運算符配合使用，如下描述所示。
表達式x>=10 && x<=99，可以用來判斷x是否屬于10到99之間的數(shù)值。
JavaScript的邏輯運算符如表2-6所示。
表2-6 JavaScript的邏輯運算符
【同步案例2-7】：邏輯運算符與關(guān)系運算符配合使用示例
案例描述：本案例主要用來測試邏輯運算符和關(guān)系運算符配合應(yīng)用，并將測試結(jié)果在頁面上輸出。
（1）案例分析
①按照案例要求，在進行邏輯運算符和關(guān)系運算符配合使用時，可以先聲明3個變量，分別用來保存兩個操作數(shù)的值和進行運算后的結(jié)果初值。
②通過邏輯運算符和關(guān)系運算符進行運算。
③應(yīng)用document.write()語句在頁面上輸出結(jié)果。
（2）實現(xiàn)代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邏輯運算符和關(guān)系運算符測試示例</title>
</head><body><pre>
<script type="text/javascript">
var a=5,b=6,result;
document.writeln("a=5,b=6");
document.writeln("");
document.write("a<b&&a<=b="); result=a<b&&a<=b;
document.writeln(result);
document.write("a<b&&a>b="); result=a<b&&a>b;
document.writeln(result);
document.write("a<b||a>b="); result=a<b||a>b;
document.writeln(result);
document.write("a>b||a>=b="); result=a>b||a>=b;
document.writeln(result);
document.write("!(a<b)="); result=!(a<b);
document.writeln(result);
document.write("!(a>b)="); result=!(a>b);
document.writeln(result);
</script>
</pre></body></html>
（3）實現(xiàn)效果
實現(xiàn)效果如圖2-9所示。
圖2-9 邏輯運算符和關(guān)系運算符使用示例
2.3.5 條件運算符
條件運算符是JavaScript支持的一種特殊的三目運算符。
（1）語法格式
條件表達式?結(jié)果1：結(jié)果2
（2）語法格式解析
條件表達式：對條件表達式進行計算，求出表達式的值，其值為true或者false。
結(jié)果1：如果條件表達式的值為true，執(zhí)行結(jié)果1。
結(jié)果2：如果條件表達式的值為false，執(zhí)行結(jié)果2。
【同步案例2-8】：實現(xiàn)選擇正確或錯誤結(jié)果的示例
案例描述：根據(jù)條件運算符可以很輕松地處理具有相反結(jié)果的事件。本案例通過條件表達式根據(jù)輸入的年齡來判斷一個人是否為成年。以年齡18為基準(zhǔn)，大于等于18為成年，小于18為未成年，最后將結(jié)果在頁面上輸出。
（1）案例分析
①根據(jù)案例要求，需要先聲明兩個變量，一個用來保存基準(zhǔn)歲數(shù)18，另一個保存結(jié)果。
②通過條件運算符對變量進行計算。
③通過document.write()語句在頁面上輸出結(jié)果。
（2）實現(xiàn)代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>條件運算符測試示例</title>
</head><body><pre>
<script type="text/javascript">
var age,result;
age=20;
result = (age>=18)?"成年人":"未成年人";
document.write("按照小李的年齡看，他已經(jīng)是："+result+"了。");
</script>
</pre></body></html>
（3）實現(xiàn)效果
實現(xiàn)效果如圖2-10所示。
圖2-10 選擇正確或錯誤結(jié)果的示例
2.3.6 其他運算符
1.位操作運算符
位操作運算符是對整數(shù)的二進制位進行操作，如向左或向右移位等。位操作運算符在進行運算前，先將操作數(shù)轉(zhuǎn)換為32位的二進制數(shù)，然后再進行相關(guān)運算，最后輸出的結(jié)果將以十進制表示。JavaScript中常用的位操作運算符如表2-7所示。
表2-7 JavaScript的位操作運算符
試一試
執(zhí)行以下3條語句，看會出現(xiàn)什么結(jié)果。
document.writeln(4<<2); document.writeln(4>>2); document.writeln(4>>>2);
2.typeof運算符
typeof運算符返回它的操作數(shù)的類型，在JavaScript中經(jīng)常用來判斷一個變量的類型以及這個變量是否已經(jīng)被定義。
【同步案例2-9】：通過typeof測試變量類型示例
案例描述：本案例要求用typeof運算符測試一下指定變量的類型，以掌握typeof在程序中的應(yīng)用。
（1）案例分析
①根據(jù)案例要求，對變量的類型進行測試，可以先聲明幾個變量并賦初值作為測試的對象。
②通過typeof運算來對聲明的變量進行計算。
③通過document.write()語句將在頁面上輸出測試結(jié)果。
（2）實現(xiàn)代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>typeof運算符測試示例</title>
</head><body><pre>
<script type="text/javascript">
var a,type_a;
a=100; type_a=typeof a; document.writeln("變量a的類型是："+type_a);
a=true; type_a=typeof a; document.writeln("變量a的類型是："+type_a);
a="hello"; type_a=typeof a; document.writeln("變量a的類型是："+type_a);
a=null; type_a=typeof a; document.writeln("變量a的類型是："+type_a);
</script>
</pre></body></html>
（3）實現(xiàn)效果
實現(xiàn)效果如圖2-11所示。
圖2-11 typeof測試變量類型示例
- The Complete Rust Programming Reference Guide
- 零基礎(chǔ)搭建量化投資系統(tǒng)：以Python為工具
- Mobile Web Performance Optimization
- 移動UI設(shè)計（微課版）
- Java系統(tǒng)分析與架構(gòu)設(shè)計
- Web全棧工程師的自我修養(yǎng)
- TypeScript項目開發(fā)實戰(zhàn)
- Hands-On Automation Testing with Java for Beginners
- QGIS By Example
- 微信小程序入門指南
- RabbitMQ Cookbook
- Python算法指南：程序員經(jīng)典算法分析與實現(xiàn)
- 零基礎(chǔ)Java學(xué)習(xí)筆記
- Node.js開發(fā)指南
- 持續(xù)集成與持續(xù)交付實戰(zhàn)：用Jenkins、Travis CI和CircleCI構(gòu)建和發(fā)布大規(guī)模高質(zhì)量軟件