第7章
JavaScript表达式与运算符

◎本章教学微视频:15个 38分钟

学习指引

JavaScript脚本语言同其他语言一样,有其自身的表达式和算术运算符。本章将详细介绍JavaScript的表达式与运算符,主要内容包括赋值表达式与运算符、算术表达式与运算符、比较运算符以及运算符优先级等。

重点导读

  • 掌握常用表达式的使用方法。
  • 掌握常用运算符的使用方法。
  • 掌握JavaScript运算符的优先级。

7.1 表达式

表达式是用于JavaScript脚本运行时进行运算的式子,可以包含常量、变量、运算符等。表达式类型由运算及参与运算的操作数类型决定,其基本类型包括赋值表达式、算术表达式、布尔表达式和字符串表达式等。

7.1.1 赋值表达式

在JavaScript中,赋值表达式的一般语法形式为:“变量 赋值运算符 表达式”,在计算过程中是按照自右而左结合的。其中,有简单的赋值表达式,如i=1;也有定义变量时给变量赋初始值的赋值表达式,如var str="Happy JavaScript!";还有使用比较复杂的赋值运算符连接的赋值表达式,如k+=18。

【例7-1】(实例文件:ch07\Chap7.1.html)赋值表达式的应用示例。

相关的代码示例请参考Chap7.1.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-1所示。

图7-1 赋值表达式应用示例

提示:由于运算符的优先级规定较多并且容易混淆,为提高程序的可读性,在使用多操作符的运算时,尽量使用括号“()”来保证程序的正常运行。

7.1.2 算术表达式

算术表达式就是用算术运算符连接的JavaScript语句。如“i+j+k;”“20-x;”“a*b;”“j/k;”“sum%2;”等即为合法的算术运算符的表达式。算术运算符的两边必须都是数值,若在“+”运算中存在字符或字符串,则该表达式将是字符串表达式,因为JavaScript会自动将数值型数据转换成字符串型数据。例如,“”好好学习”+i+“天天向上”+j;”表达式将被看作是字符串表达式。

【例7-2】(实例文件:ch07\Chap7.2.html)算术表达式的应用示例。

相关的代码示例请参考Chap7.2.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-2所示。从运算结果中可以看出,通过算术表达式对字符串和数字进行了加法运算。

图7-2 算术表达式应用示例

7.1.3 布尔表达式

布尔表达式一般用来判断某个条件或者表达式是否成立,其结果只能为true或false。

【例7-3】(实例文件:ch07\Chap7.3.html)布尔表达式的应用示例。

相关的代码示例请参考Chap7.3.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-3所示,从上述代码中可以看出多次使用了布尔表达式进行数值的判断。

图7-3 布尔表达式应用示例

运行该段代码,在显示的文本框中输入2016,单击“确定”按钮后,系统先判断文本框是否为空,再判断文本框输入的数值是否合法,最后判断其是否为闰年并弹出相应的提示框,如图7-4所示。

同理,如果输入值为2019,单击“确定”按钮,得出的结果如图7-5所示。

图7-4 返回判断结果

图7-5 返回判断结果

7.1.4 字符串表达式

字符串表达式是操作字符串的JavaScript语句。JavaScript的字符串表达式只能使用“+”与“+=”两个字符串运算符。如果在同一个表达式中既有数字又有字符串,同时还没有将字符串转换成数字的方法,则返回值一定是字符串型。

【例7-4】(实例文件:ch07\Chap7.4.html)字符串表达式的应用示例。

相关的代码示例请参考Chap7.4.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-6所示。从运算结果中可以看出,一般表达式“4+5+6”,结果为15;而在表达式“4+5+'6'”中,表达式按照从左至右的运算顺序,先计算数值4、5的和,结果为9,再计算之后的和转换成字符串型,与最后的字符串连接,最后得到的结果是字符串“96”。

图7-6 字符串表达式应用示例

7.2 运算符

运算符是在表达式中用于进行运算的符号,例如运算符“=”用于赋值、运算符“+”用于把数值加起来,使用运算符可进行算术、赋值、比较、逻辑等各种运算。

7.2.1 运算符概述

运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算。例如2+3,其操作数是2和3,而运算符则是“+”。JavaScript的运算符可以分为赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算符、位运算符、字符串运算符、位操作运算符和移位运算符等。

7.2.2 赋值运算符

赋值运算符是将一个值赋给另一个变量或表达式的符号。最基本的赋值运算符为“=”主要用于将运算符右边的操作数的值赋给左边的操作数。

【例7-5】(实例文件:ch07\Chap7.5.html)赋值运算符的应用示例。

相关的代码示例请参考Chap7.5.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-7所示。

图7-7 赋值运算符应用示例

另外,在JavaScript中,赋值运算符还可与算术运算符和位运算符组合,从而产生许多变种。在赋值运算符中,除“=”运算符之外,其他运算符都是先将运算符两边的操作数做相关处理,将处理之后的结果赋给运算符左操作符。如操作符“-=”,先将两个操作数相减,再将结果赋给左操作数。

【例7-6】(实例文件:ch07\Chap7.6.html)赋值运算符的复杂应用示例。

相关的代码示例请参考Chap7.6.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-8所示。

图7-8 赋值运算符的复杂应用

7.2.3 算术运算符

算术运算符用于各类数值之间的运算,JavaScript的算术运算符包括加(+)、减(-)、乘(*)、除(/)、求余(%)、自增(++)、自减(--)共7种。算术运算符是比较简单的运算符,也是在实际操作中经常用到的操作符。

【例7-7】(实例文件:ch07\Chap7.7.html)算术运算符的应用示例。

相关的代码示例请参考Chap7.7.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-9所示。

单击页面中的“算术运算”按钮后,使用JavaScript算术运算符进行相关运算,具体运行结果如图7-10所示。

图7-9 算术运算符应用示例

图7-10 显示运算结果

提示:算术运算符中需要注意自增与自减运算符。如果++或--运算符在变量后面,执行顺序为“先赋值后运算”;如果++或--运算符在变量前面,执行顺序则为“先运算后赋值”。

7.2.4 比较运算符

比较运算符在逻辑语句中使用,用于连接操作数组成比较表达式,并对操作符两边的操作数进行比较,其结果为逻辑值true或false。

【例7-8】(实例文件:ch07\Chap7.8.html)比较运算符的应用示例。

相关的代码示例请参考Chap7.8.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-11所示。

图7-11 比较运算符应用示例

注意:在各种运算符中,比较运算符“==”与赋值运算符“=”是完全不同的:运算符“=”是用于给操作数赋值;而运算符“==”则是用于比较两个操作数的值是否相等。

如果在需要比较两个表达式的值是否相等的情况下,错误地使用赋值运算符“=”,则会将右操作数的值赋给左操作数。

【例7-9】(实例文件:ch07\Chap7.9.html)区别比较运算符和赋值运算符的应用示例。

相关的代码示例请参考Chap7.9.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-12所示。

图7-12 区别比较和赋值运算符的应用示例

从运行结果中可以看出,执行语句“param==15”后返回结果为逻辑值true,然后通过赋值运算符“=”将其赋给变量test1,因此test1最终的结果为true;同理,执行语句“param=15”后返回结果为15并将其赋给变量test2。

7.2.5 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑,操作数一般是逻辑型数据。在JavaScript中,逻辑运算符包含逻辑与(&&)、逻辑或(||)、逻辑非(!)等。在逻辑与运算中,如果运算符左边的操作数为false,系统将不再执行运算符右边的操作数;在逻辑或运算中,如果运算符左边的操作数为true,系统同样地不再执行右边的操作数。

【例7-10】(实例文件:ch07\Chap7.10.html)逻辑运算符的应用示例。

相关的代码示例请参考Chap7.10.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-13所示。

图7-13 逻辑运算符的应用示例

从运算结果中可以看出,逻辑与、逻辑或是短路运算符。在表达式“(score < 200) && (score = 500)”中,由于条件score<200的结果为false,程序将不再继续执行“&&”之后的脚本,因此,score的值仍为350;同理,在表达式“(score > 200) || (score = 500)”中,条件 score>200的结果为true,score的值仍然为350。

7.2.6 条件运算符

条件运算符是构造快速条件分支的三目运算符,可以看作是“if…else…”语句的简写形式,其语法形式为“逻辑表达式?语句1:语句2;”。如果“?”前的逻辑表达式结果为true,则执行“?”与“:”之间的语句1,否则执行语句2。由于条件运算符构成的表达式带有一个返回值,因此,可通过其他变量或表达式对其值进行引用。

【例7-11】(实例文件:ch07\Chap7.11.html)条件运算符的应用示例。

相关的代码示例请参考Chap7.11.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-14所示。

图7-14 条件运算符的应用示例

从运算结果中可以看出,首先语句对表达式“x < 10”成立与否进行判断,结果为false,然后根据判断结果执行“:”后的表达式“-x”,并通过赋值符号将其赋给变量y,因此变量y最终的结果为-23。

7.2.7 字符串运算符

字符串运算符是对字符串进行操作的符号,一般用于连接字符串。在JavaScript中,字符串连接符“+=”与赋值运算符类似:将两边的操作数(字符串)连接起来并将结果赋给左操作数。

【例7-12】(实例文件:ch07\Chap7.12.html)字符串运算符的应用示例。

相关的代码示例请参考Chap7.12.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-15所示。

图7-15 字符串运算符的应用示例

7.2.8 位运算符

位运算符是将操作数以二进制为单位进行操作的符号。在进行位运算之前,通常先将操作数转换为二进制整数,再进行相应的运算,最后的输出结果以十进制整数表示。此外,位运算的操作数和结果都应是整型。

在JavaScript中,位运算符包含按位与(&&)、按位或(||)、按位异或(||)、按位非(!)等。

  • 按位与运算:将操作数转换成二进制以后,如果两个操作数对应位的值均为1,则结果为1,否则结果为0。例如,对于表达式41&23, 41转换成二进制数00101001,而23转换成二进制数00010111,按位与运算后结果为00000001,转换成十进制数为1。
  • 按位或运算:将操作数转换为二进制后,如果两个操作数对应位的值中任何一个为1,则结果为1,否则结果为0。例如,对于表达式41||23,按位或运算后结果为00111111,转换成十进制数为63。
  • 按位异或运算:将操作数转换成二进制后,如果两个操作数对应位的值互不相同时,则结果为1,否则结果为0。例如,对于表达式41^23,按位异或运算后结果为00111110,转换成十进制数为62。
  • 按位非运算:将操作数转换成二进制后,对其每一位取反(即值为0则取1,值为1则取0)。例如,对于表达式~41,将每一位取反后结果为11010110,转换成十进制数为-42。

【例7-13】(实例文件:ch07\Chap7.13.html)位运算符的应用示例。

相关的代码示例请参考Chap7.13.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-16所示。

图7-16 位运算符的应用示例

7.2.9 移位运算符

移位运算符与位运算符相似,都是将操作数转换成二进制,然后对转换之后的值进行操作。JavaScript位操作运算符有3个:<<、>>、>>>。

【例7-14】(实例文件:ch07\Chap7.14.html)移位运算符的应用示例。

相关的代码示例请参考Chap7.14.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-17所示。

图7-17 移位运算符的应用示例

上述代码的运行过程如下:首先将十进制数25转换成二进制为00011001,然后将其左移2位,右边的空位由0补齐,结果为01100100,转换成十进制数即为100;将其右移2位,结果是00000110,转换成十进制为6;将其逻辑右移2位,因其为正数,结果仍为6。同理,十进制数-28转换成二进制是11100100,将其左移2位后为10010000,转换成十进制数是-112;将其进行算术右移2位,得到的结果是11111001,转换成十进制是-7。由于负数在逻辑右移的过程中,符号位会随着整体一起往右移动,相当于无符号数的移动,变成一个32位的正数,因为符号位不存在了。因此,-28在逻辑右移前从第32位到符号位的位置全部由1填充,得到的结果为11111111111111111111111111100100再逻辑右移2位后为0011111111111111111111111111 1001,转换成十进制是1073741817。

7.2.10 其他运算符

除前面介绍的几种之外,JavaScript还有一些特殊运算符,下面对其进行简要介绍。

1.逗号运算符

逗号运算符用于将多个表达式连接为一个表达式,新表达式的值为最后一个表达式的值。其语法形式为“变量=表达式1,表达式2”。

【例7-15】(实例文件:ch07\Chap7.15.html)逗号运算符的应用示例。

相关的代码示例请参考Chap7.15.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-18所示。从运行结果中可以看到,变量a最终取值为最后一个表达式(d=56)的结果。

图7-18 逗号运算符的应用示例

2.void运算符

void运算符对表达式求值,并返回undefined。该运算符通常用于避免输出不应该输出的值,其语法形式为“void 表达式”。

【例7-16】(实例文件:ch07\Chap7.16.html)void运算符的应用示例。

相关的代码示例请参考Chap7.16.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-19所示。从运行结果中可以看到,变量a最终被标记为undefined。

图7-19 void运算符的应用示例

3.typeof运算符

typeof运算符返回一个字符串指明其操作数的数据类型,返回值有6种可能:number、string、boolean、object、function和undefined。typeof运算符的语法形式为“typeof 表达式”。

【例7-17】(实例文件:ch07\Chap7.17.html)typeof运算符的应用示例。

相关的代码示例请参考Chap7.17.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-20所示。从运行结果中可以看到,null类型的操作数的返回值为object。

图7-20 typeof运算符的应用示例

7.3 运算符优先级

在JavaScript中,运算符具有明确的优先级与结合性。优先级用于控制运算符的执行顺序,具有较高优先级的运算符先于较低优先级的运算符执行;结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算,结合性有向左结合和向右结合。圆括号可用来改变运算符优先级所决定的求值顺序。

【例7-18】(实例文件:ch07\Chap7.18.html)用()改变运算顺序的应用示例。

相关的代码示例请参考Chap7.18.html文件,然后双击该文件,在IE浏览器里面运行的结果如图7-21所示。

图7-21 用()改变运算顺序的应用示例

从运行结果中可以看到,由于乘法的优先级高于加法,因此,表达式“3+4*5”的计算结果为23;而在表达式“(3+4)*5”中则被括号“()”改变了运算符的优先级,括号内部分将优先于任何运算符而被最先执行,因此该语句的结果为35。

7.4 就业面试技巧与解析

7.4.1 面试技巧与解析(一)

面试官:谈谈你对跳槽的看法。

应聘者:我个人认为正常的跳槽能促进人才合理流动,应该支持;频繁的跳槽对单位和个人双方都不利,应该反对。

7.4.2 面试技巧与解析(二)

面试官:为什么选择这个岗位?

应聘者:这一直是我的兴趣和专长,经过这几年的磨炼,也累积了一定的经验及人脉,相信我一定能胜任这个岗位。