JavaScript从入门到精通(微视频精编版)
上QQ阅读APP看书,第一时间看更新

2.3 运算符

视频讲解

运算符也称为操作符,它是完成一系列操作的符号。运算符用于将一个或几个值进行计算而生成一个新的值,对其进行计算的值称为操作数,操作数可以是常量或变量。

JavaScript的运算符按操作数的个数可以分为单目运算符、双目运算符和三目运算符;按运算符的功能可以分为算术运算符、比较运算符、赋值运算符、字符串运算符、逻辑运算符、条件运算符和其他运算符。

2.3.1 算术运算符

算术运算符用于在程序中进行加、减、乘、除等运算。在JavaScript中常用的算术运算符如表2.3所示。

表2.3 JavaScript中的算术运算符

【例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+"&deg;F");      //输出华氏度表示的气温
    06  document.write("<br>摄氏度:"+degreeC+"&deg;C");  //输出摄氏度表示的气温
    07  </script>

本实例运行结果如图2.7所示。

图2.7 输出以华氏度和摄氏度表示的气温

注意

在使用“/”运算符进行除法运算时,如果被除数不是0,除数是0,得到的结果为Infinity;如果被除数和除数都是0,得到的结果为NaN。

说明

“+”除了可以作为算术运算符之外,还可用于字符串连接的字符串运算符。

2.3.2 字符串运算符

字符串运算符是用于两个字符串型数据之间的运算符,它的作用是将两个字符串连接起来。在JavaScript中,可以使用“+”和“+=”运算符对两个字符串进行连接运算。其中,“+”运算符用于连接两个字符串,而“+=”运算符则连接两个字符串并将结果赋给第一个字符串。表2.4给出了JavaScript中的字符串运算符。

表2.4 JavaScript中的字符串运算符

【例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所示。

图2.8 对多个字符串进行连接

说明

JavaScript脚本会根据操作数的数据类型来确定表达式中的“+”是算术运算符还是字符串运算符。在两个操作数中只要有一个是字符串类型,那么这个“+”就是字符串运算符,而不是算术运算符。

2.3.3 比较运算符

比较运算符的基本操作过程是,首先对操作数进行比较(这个操作数可以是数字也可以是字符串),然后返回一个布尔值true或false。在JavaScript中常用的比较运算符如表2.5所示。

表2.5 JavaScript中的比较运算符

【例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所示。

图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中的赋值运算符

【例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所示。

图2.10 输出赋值运算结果

2.3.5 逻辑运算符

逻辑运算符用于对一个或多个布尔值进行逻辑运算。在JavaScript中有3个逻辑运算符,如表2.7所示。

表2.7 逻辑运算符

【例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所示。

图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所示。

图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所示。

图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所示。

图2.14 输出变量a的值

2.typeof运算符

typeof运算符用于判断操作数的数据类型。它可以返回一个字符串,该字符串说明了操作数是什么数据类型。这对于判断一个变量是否已被定义特别有用。

语法如下:

    typeof 操作数

不同类型的操作数使用typeof运算符的返回值如表2.8所示。

表2.8 不同类型数据使用typeof运算符的返回值

例如,应用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所示。

图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运算符的优先级与结合性

例如,下面的代码显示了运算符优先顺序的作用。

    01  var a;                 //声明变量
    02  a = 20-(5+6)<10&&2>1;  //为变量赋值
    03  alert(a);              //输出变量的值

运行结果如图2.16所示。

图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所示。

图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所示。

图2.18 输出手机话费余额可以进行通话的分钟数