![JavaScript从入门到精通(微视频精编版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/726/32463726/b_32463726.jpg)
2.3 运算符
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P41_3020.jpg?sign=1739905854-mWY7FGM1xvwUVPyhMMW7Tqxo4EEUTLdw-0-6e65448835d89a71c81281be4319b7df)
视频讲解
运算符也称为操作符,它是完成一系列操作的符号。运算符用于将一个或几个值进行计算而生成一个新的值,对其进行计算的值称为操作数,操作数可以是常量或变量。
JavaScript的运算符按操作数的个数可以分为单目运算符、双目运算符和三目运算符;按运算符的功能可以分为算术运算符、比较运算符、赋值运算符、字符串运算符、逻辑运算符、条件运算符和其他运算符。
2.3.1 算术运算符
算术运算符用于在程序中进行加、减、乘、除等运算。在JavaScript中常用的算术运算符如表2.3所示。
表2.3 JavaScript中的算术运算符
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-T42_38374.jpg?sign=1739905854-N0BG9VBtCYuFvRHlkrEVz469AttTryNn-0-8fa010db75a9f72a0f61687592735808)
【例2.05】美国使用华氏度来作为计量温度的单位。将华氏度转换为摄氏度的公式为“摄氏度=5 / 9×(华氏度-32)”。假设洛杉矶市的当前气温为68华氏度,分别输出该城市以华氏度和摄氏度表示的气温。关键代码如下:(实例位置:资源包\源码\02\2.05)
01 <script type="text/javascript"> 02 var degreeF=68; //定义表示华氏度的变量 03 var degreeC=0; //初始化表示摄氏度的变量 04 degreeC=5/9*(degreeF-32); //将华氏度转换为摄氏度 05 document.write("华氏度:"+degreeF+"°F"); //输出华氏度表示的气温 06 document.write("<br>摄氏度:"+degreeC+"°C"); //输出摄氏度表示的气温 07 </script>
本实例运行结果如图2.7所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P42_38376.jpg?sign=1739905854-M31prrC0VxrqGabR2E3ytf4dn5Mm5u1M-0-65380fc1c31da84db4d8b409fc049307)
图2.7 输出以华氏度和摄氏度表示的气温
注意
在使用“/”运算符进行除法运算时,如果被除数不是0,除数是0,得到的结果为Infinity;如果被除数和除数都是0,得到的结果为NaN。
说明
“+”除了可以作为算术运算符之外,还可用于字符串连接的字符串运算符。
2.3.2 字符串运算符
字符串运算符是用于两个字符串型数据之间的运算符,它的作用是将两个字符串连接起来。在JavaScript中,可以使用“+”和“+=”运算符对两个字符串进行连接运算。其中,“+”运算符用于连接两个字符串,而“+=”运算符则连接两个字符串并将结果赋给第一个字符串。表2.4给出了JavaScript中的字符串运算符。
表2.4 JavaScript中的字符串运算符
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-T43_38380.jpg?sign=1739905854-PcOWftA0t7xtn42i2ATFitDuJCW8McgV-0-f7b555192bbbe4bb2ae882ee2d526ce4)
【例2.06】将电影《美人鱼》的影片名称、导演、类型、主演和票房分别定义在变量中,应用字符串运算符对多个变量和字符串进行连接并输出。代码如下:(实例位置:资源包\源码\02\2.06)
01 <script type="text/javascript"> 02 var movieName, director,type,actor,boxOffice; //声明变量 03 movieName = "美人鱼"; //定义影片名称 04 director = "周星驰"; //定义影片导演 05 type = "喜剧、爱情、科幻"; //定义影片类型 06 actor = "邓超、林允"; //定义影片主演 07 boxOffice = 33.9; //定义影片票房 08 alert("影片名称:"+movieName+"\n 导演:"+director+"\n类型:"+type+"\n 主演:"+actor+"\n 票房: "+boxOffice+"亿元"); //连接字符串并输出 09 </script>
运行代码,结果如图2.8所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P43_38382.jpg?sign=1739905854-ezuPIeOL45Eso0Dz6DKSbiOFm3ElL7Pd-0-32f157bcf763b5472094aa11110054e5)
图2.8 对多个字符串进行连接
说明
JavaScript脚本会根据操作数的数据类型来确定表达式中的“+”是算术运算符还是字符串运算符。在两个操作数中只要有一个是字符串类型,那么这个“+”就是字符串运算符,而不是算术运算符。
2.3.3 比较运算符
比较运算符的基本操作过程是,首先对操作数进行比较(这个操作数可以是数字也可以是字符串),然后返回一个布尔值true或false。在JavaScript中常用的比较运算符如表2.5所示。
表2.5 JavaScript中的比较运算符
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-T44_38385.jpg?sign=1739905854-uXIzZ9FhMTm9ZZbm8sbI83ErjejR4aLD-0-93924c29ba80c3dae4f0769203dbc5f0)
【例2.07】应用比较运算符实现两个数值之间的大小比较。代码如下:(实例位置:资源包\源码\02\2.07)
01 <script type="text/javascript"> 02 var age = 25; //定义变量 03 document.write("age变量的值为:"+age); //输出字符串和变量的值 04 document.write("<p>"); //输出换行标记 05 document.write("age>20:"); //输出字符串 06 document.write(age>20); //输出比较结果 07 document.write("<br>"); //输出换行标记 08 document.write("age<20:"); //输出字符串 09 document.write(age<20); //输出比较结果 10 document.write("<br>"); //输出换行标记 11 document.write("age==20:"); //输出字符串 12 document.write(age==20); //输出比较结果 13 </script>
运行本实例,结果如图2.9所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P44_38387.jpg?sign=1739905854-BQtissrj8dIbkkKRjJ2WW2q8LPhcrDLv-0-a9c9a041aebb29e1438a284ea15a2a63)
图2.9 输出比较结果
比较运算符也可用于两个字符串之间的比较,返回结果同样是一个布尔值true或false。当比较两个字符串A和B时,JavaScript会首先比较A和B中的第一个字符,例如第一个字符的ASCII码值分别是a和b,如果a大于b,则字符串A大于字符串B,否则字符串A小于字符串B。如果第一个字符的ASCII码值相等,就比较A和B中的下一个字符,依此类推。如果每个字符的ASCII码值都相等,那么字符数多的字符串大于字符数少的字符串。
例如,在下面字符串的比较中,结果都是true。
01 document.write("abc"=="abc"); //输出比较结果 02 document.write("ac"<"bc"); //输出比较结果 03 document.write("abcd">"abc"); //输出比较结果
2.3.4 赋值运算符
JavaScript中的赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符(=)右边表达式的值保存到左边的变量中;而复合赋值运算混合了其他操作(例如算术运算操作)和赋值操作。例如:
sum+=i; //等同于“sum=sum+i;”
JavaScript中的赋值运算符如表2.6所示。
表2.6 JavaScript中的赋值运算符
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-T45_38391.jpg?sign=1739905854-4vmAJSfb6h59gKq0XSsnxFtdSin535oL-0-a914c1c7a813b3f0292ca4522dc0b1cf)
【例2.08】应用赋值运算符实现两个数值之间的运算并输出结果。代码如下:(实例位置:资源包\源码\02\2.08)
01 <script type="text/javascript"> 02 var a = 2; //定义变量 03 var b = 3; //定义变量 04 document.write("a=2,b=3"); //输出a和b的值 05 document.write("<p>"); //输出段落标记 06 document.write("a+=b运算后:"); //输出字符串 07 a+=b; //执行运算 08 document.write("a="+a); //输出此时变量a的值 09 document.write("<br>"); //输出换行标记 10 document.write("a-=b运算后:"); //输出字符串 11 a-=b; //执行运算 12 document.write("a="+a); //输出此时变量a的值 13 document.write("<br>"); //输出换行标记 14 document.write("a*=b运算后:"); //输出字符串 15 a*=b; //执行运算 16 document.write("a="+a); //输出此时变量a的值 17 document.write("<br>"); //输出换行标记 18 document.write("a/=b运算后:"); //输出字符串 19 a/=b; //执行运算 20 document.write("a="+a); //输出此时变量a的值 21 document.write("<br>"); //输出换行标记 22 document.write("a%=b运算后:"); //输出字符串 23 a%=b; //执行运算 24 document.write("a="+a); //输出此时变量a的值 25 </script>
运行本实例,结果如图2.10所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P46_38394.jpg?sign=1739905854-qjPjijsLp5VeaNzOAs8VBwk9gNn2ACNM-0-10f6ab1d67f265e97e7d5713e637d623)
图2.10 输出赋值运算结果
2.3.5 逻辑运算符
逻辑运算符用于对一个或多个布尔值进行逻辑运算。在JavaScript中有3个逻辑运算符,如表2.7所示。
表2.7 逻辑运算符
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-T46_38396.jpg?sign=1739905854-Wy5nM67S6QGhKiO6bVWBqXL9PLMUYrM9-0-6870cd4ca8343e836b6864e0025972af)
【例2.09】应用逻辑运算符对逻辑表达式进行运算并输出结果。代码如下:(实例位置:资源包\源码\02\2.09)
01 <script type="text/javascript"> 02 var num = 20; //定义变量 03 document.write("num="+num); //输出变量的值 04 document.write("<p>num>0 && num<10的结果:"); //输出字符串 05 document.write(num>0 && num<10); //输出运算结果 06 document.write("<br>num>0 || num<10的结果:"); //输出字符串 07 document.write(num>0 || num<10); //输出运算结果 08 document.write("<br>!num<10的结果:"); //输出字符串 09 document.write(!num<10); //输出运算结果 10 </script>
本实例运行结果如图2.11所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P47_38398.jpg?sign=1739905854-7UUDsCKM4LV0u9WTXI4e2RJPIkOnDPwg-0-d0826429dbfc71d50f0b6224fa0aea75)
图2.11 输出逻辑运算结果
2.3.6 条件运算符
条件运算符是JavaScript支持的一种特殊的三目运算符。
语法如下:
表达式?结果1:结果2
如果“表达式”的值为true,则整个表达式的结果为“结果1”,否则为“结果2”。
例如,定义两个变量,值都为10,然后判断两个变量是否相等,如果相等则输出“相等”,否则输出“不相等”,代码如下:
01 var a=10; //定义变量 02 var b=10; //定义变量 03 alert(a==b?"相等":"不相等"); //应用条件运算符进行判断并输出结果
运行结果如图2.12所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P47_38402.jpg?sign=1739905854-YZoCYwNv72xx8DNwnMSurp3vvRVWPxGY-0-b0c966395b45dcd1f9fa36ab9f83df4d)
图2.12 判断两个变量是否相等
【例2.10】如果某年的年份值是4的倍数并且不是100的倍数,或者该年份值是400的倍数,那么这一年就是闰年。应用条件运算符判断2017年是否是闰年。代码如下:(实例位置:资源包\源码\02\2.10)
01 <script type="text/javascript"> 02 var year = 2017; //定义年份变量 03 //应用条件运算符进行判断 04 result = (year%4 == 0 && year%100 != 0) || (year%400 == 0)?"是闰年":"不是闰年"; 05 alert(year+"年"+result); //输出判断结果 06 </script>
本实例运行结果如图2.13所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P47_38403.jpg?sign=1739905854-9K5xrjkxskzMBD0g2yM16z8S5RelXcgA-0-3f5cdea559497ad5b174018c76b28f6e)
图2.13 判断2017年是否是闰年
2.3.7 其他运算符
1.逗号运算符
逗号运算符用于将多个表达式排在一起,整个表达式的值为最后一个表达式的值。例如:
01 var a,b,c,d; //声明变量 02 a=(b=3,c=5,d=6); //使用逗号运算符为变量a赋值 03 alert("a的值为"+a); //输出变量a的值
执行上面的代码,运行结果如图2.14所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P48_38413.jpg?sign=1739905854-V34DOXMMzi9LM1DBp2saHikNfvQzAcS7-0-62b01f61848e93ac23184ce1a4e4f8e1)
图2.14 输出变量a的值
2.typeof运算符
typeof运算符用于判断操作数的数据类型。它可以返回一个字符串,该字符串说明了操作数是什么数据类型。这对于判断一个变量是否已被定义特别有用。
语法如下:
typeof 操作数
不同类型的操作数使用typeof运算符的返回值如表2.8所示。
表2.8 不同类型数据使用typeof运算符的返回值
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-T48_38416.jpg?sign=1739905854-hjSafPjigf7JhWrZpW4vu3VnnfwRGJij-0-6b169148769ec1592301dacf94c4a307)
例如,应用typeof运算符分别判断4个变量的数据类型,代码如下:
01 var a,b,c,d; //声明变量 02 a=3; //为变量赋值 03 b="name"; //为变量赋值 04 c=true; //为变量赋值 05 d=null; //为变量赋值 06 alert("a的类型为"+(typeof a)+"\nb的类型为"+(typeof b)+"\nc的类型为"+(typeof c)+"\nd的类型为"+(typeof d)); //输出变量的类型
执行上面的代码,运行结果如图2.15所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P48_38418.jpg?sign=1739905854-RZMVCF1kShJ77D61q72AfJgruH38Hgt4-0-cd4d740c66ccc05ccc1cb7c4f2cf14fc)
图2.15 输出不同的数据类型
3.new运算符
在JavaScript中有很多内置对象,如字符串对象、日期对象和数值对象等,通过new运算符可以用来创建一个新的内置对象实例。
语法如下:
对象实例名称 = new 对象类型(参数) 对象实例名称 = new 对象类型
当创建对象实例时,如果没有用到参数,则可以省略圆括号,这种省略方式只限于new运算符。例如,应用new运算符来创建新的对象实例,代码如下:
01 Object1 = new Object; //创建自定义对象 02 Array2 = new Array(); //创建数组对象 03 Date3 = new Date("August 8 2008"); //创建日期对象
2.3.8 运算符优先级
JavaScript运算符都有明确的优先级与结合性。优先级较高的运算符将先于优先级较低的运算符进行运算。结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算。JavaScript运算符的优先级顺序及其结合性如表2.9所示。
表2.9 JavaScript运算符的优先级与结合性
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-T49_38424.jpg?sign=1739905854-AvFqDwPU1MfexhqR6Hjn5Lu2xb7MsHW5-0-d7848855937ec1bce0832f1bcb66c5c4)
例如,下面的代码显示了运算符优先顺序的作用。
01 var a; //声明变量 02 a = 20-(5+6)<10&&2>1; //为变量赋值 03 alert(a); //输出变量的值
运行结果如图2.16所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P50_38429.jpg?sign=1739905854-Na7QVrGg5vScl0qb0ZVmuo3dh71bm7An-0-72a7165f70d7a06323c8b92258382caa)
图2.16 输出结果
当在表达式中连续出现的几个运算符优先级相同时,其运算的优先顺序由其结合性决定。结合性有向左结合和向右结合,例如,由于运算符“+”是左结合的,所以在计算表达式“a+b+c”的值时,会先计算“a+b”,即“(a+b)+c”;而赋值运算符“=”是右结合的,所以在计算表达式“a=b=1”的值时,会先计算“b=1”。下面的代码说明了“=”的右结合性。
01 var a = 1; //声明变量并赋值 02 b=a=10; //对变量b赋值 03 alert("b="+b); //输出变量b的值
运行结果如图2.17所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P50_38430.jpg?sign=1739905854-jC3gHjOHeNFqCn7PkDHHtiFexSShGqSj-0-aa90bfa5666ae5368fdc0b79ded4e0ba)
图2.17 输出结果
【例2.11】假设手机原来的话费余额是10元,通话资费为0.2元/分钟,流量资费为0.5元/兆,在使用了10兆流量后,计算手机话费余额还可以进行多长时间的通话。代码如下:(实例位置:资源包\源码\02\2.11)
01 <script type="text/javascript"> 02 var balance = 10; //定义手机话费余额变量 03 var call = 0.2; //定义通话资费变量 04 var traffic = 0.5; //定义流量资费变量 05 var minutes = (balance-traffic*10)/call; //计算余额可通话分钟数 06 document.write("手机话费余额还可以通话"+minutes+"分钟"); //输出字符串 07 </script>
运行结果如图2.18所示。
![](https://epubservercos.yuewen.com/FAB06F/17527145906009606/epubprivate/OEBPS/Images/Figure-P50_38431.jpg?sign=1739905854-xSheRhGFxHmM4dQA0D2L5zexFyVboBg6-0-11ec04de24a3c83c1232b33501dcfb48)
图2.18 输出手机话费余额可以进行通话的分钟数