- 动态网页设计与开发:JavaScript + jQuery
- 石毅等
- 2515字
- 2020-08-27 12:09:40
2.2 JavaScript运算符
2.2.1 赋值运算符
在JavaScript中,运算符“=”专门用来为变量赋值,因此也称为赋值运算符。在声明变量时可以使用赋值运算符对其进行初始化,例如:

也可以使用赋值运算符将已存在的变量值赋值给新的变量,例如:

还可以使用赋值运算符为多个变量连续赋值,例如:

赋值运算符的右边还可以接受表达式,例如:

这里使用了加法运算符“+”形成的表达式,在运行过程中会优先对表达式进行计算,然后再对变量x进行赋值。
注意
“=”是赋值运算符,并非代表数学意义上的相等的关系。一条赋值语句可以对多个变量进行赋值。赋值运算符的结合性为“从右向左”。
2.2.2 算术运算符
在JavaScript中,所有的基本计算均可以使用对应的算术运算符完成,包括加、减、乘、除和求余等。算术运算符的常见用法如表2-4所示。
表2-4 算术运算符的常见用法

注意
算术运算符的使用看似简单,也容易理解,但是在实际应用过程中还需要注意以下几点:
(1)四则混合运算,遵循“先乘除后加减”的原则。
(2)求余运算结果的正负取决于被除数(%左边的数)的符号。
(3)尽量避免利用小数进行运算,有时可能因JavaScript的精度导致结果的偏差。
(4)“+”和“-”在算术运算时还可以表示正数或负数。
(5)运算符(++或--)放在操作数前面,先进行自增或自减运算,再进行其他运算。若运算符放在操作数后面,则先进行其他运算,再进行自增或自减运算。
(6)递增和递减运算符仅对数字型和布尔型数据操作,会将布尔值true当作1,false当作0。
其中加号还有一个特殊用法:可用于连接文本内容或字符串变量。例如:

如果将字符串和数字用加号相加,则会先将数字转换为字符串,再进行连接。例如:

上述代码中即使字符串本身也是数字内容,使用加号连接仍然不会进行数学运算。例如:

将赋值运算符(等号)和算术运算符(加、减、乘、除、求余数)结合使用,简写具体用法如表2-5所示。
表2-5 运算符组合一览表

2.2.3 逻辑运算符
逻辑运算符有三种类型:NOT(逻辑非)、AND(逻辑与)和OR(逻辑或)。逻辑运算符使用的符号与对应关系如表2-6所示。
表2-6 逻辑运算符一览表

逻辑运算符的结合性是从左到右的,逻辑运算符可针对结果为布尔值的表达式进行运算。
在进行逻辑运算之前,JavaScript中自带的抽象操作ToBoolean会将运算条件转换为逻辑值。转换规则如表2-7所示。
表2-7 ToBoolean的转换规则

1.逻辑非运算符(NOT)
在JavaScript中,逻辑非运算符与C语言和Java语言所使用的都相同,使用感叹号(!)并放置在运算内容左边表示。逻辑非运算符的返回值只能是布尔值,即true或者false。逻辑非运算符的运算规则如表2-8所示。
表2-8 逻辑非运算符的运算规则

2.逻辑与运算符(AND)
在JavaScript中,逻辑与运算符使用双和符号(&&)表示,用于连接符号前后的两个条件判断,表示并列关系。当两个条件均为布尔值时,逻辑与的运算结果也是布尔值(true或者false)。判断结果如表2-9所示。
表2-9 逻辑与(&&)的布尔值对照表

还有一种特殊情况:当条件1为假(false)时,无论条件2是任何内容(例如空值null、undefined、数字、对象等),最终返回值都是假(false)。原因是逻辑与有简便运算的特性,即如果第一个条件为假(false),直接判断逻辑与的运行结果为假(false),不再执行第二个条件。例如:

由于条件1为false,逻辑与会直接判定最终结果为false,直接忽略条件2。因此即使本例中条件2的变量未声明都不影响代码的运行。如果存在某个条件是数字型数值,则先将其转换为布尔值再继续判断。其中数字0对应的是假(false),其他非0的数字对应的都是真(true)。例如:

逻辑与运算符的返回值不一定是布尔值,如果其中某个条件的返回值不是布尔值,有可能出现其他返回值。逻辑与的运算规则如表2-10所示。
表2-10 逻辑与(&&)特殊情况规则一览表

注:以上所有情况均不包括条件1为假(false),因为此时无论条件2是什么内容,最终返回值都是假(false)。
3.逻辑或运算符(OR)
在JavaScript中,逻辑或运算符使用双竖线符号(||)表示,用于连接符号前后的两个条件判断,表示二选一的关系。当两个条件均为布尔值时,逻辑或的运算结果也是布尔值(true或者false)。判断结果如表2-11所示。
表2-11 逻辑或(||)的布尔值对照表

由表2-11可见,在条件1和条件2本身均为布尔值的前提下,只有当两个条件均为假(false)时,逻辑或的返回值才为假(false),只要有一个条件为真(true),逻辑或的返回值就为真(true)。
还有一种特殊情况:当条件1为真(true)时,无论条件2是任何内容(例如空值null、undefined、数字、对象等),最终返回值都是真(true)。原因是逻辑或也具有简便运算的特性,即如果第一个条件为真(true),直接判断逻辑或的运行结果为真(true),不再执行第二个条件。例如:

由于条件1为真(true),逻辑或会直接判定最终结果为真(true),忽略条件2。因此即使本例中条件2的变量未声明都不影响代码的运行。
和逻辑与运算符类似,如果存在某个条件是数字型,则先将其转换为布尔值再继续判断。其中数字0对应的是假(false),其他非0的数字对应的都是真(true)。例如:

逻辑或运算符的返回值同样不一定是布尔值,如果其中某个条件的返回值不是布尔值,则有可能出现其他返回值。逻辑非的运算规则如表2-12所示。
表2-12 逻辑或(||)特殊情况规则一览表

注:以上所有情况均不考虑条件1为真(true),因为此时无论条件2是什么内容,根据逻辑或的简便运算特性,最终返回值都是真(true)。
2.2.4 关系运算符
在JavaScript中,关系运算符共有四种:大于(>)、小于(<)、大于等于(>=)和小于等于(<=),用于比较两个值的大小,返回值一定是布尔值(true或false),如表2-13所示。
表2-13 关系运算符一览表

1.数字之间的比较
数字之间的比较完全依据数学中比大小的规律,当条件成立时返回真(true),否则返回假(false)。例如:

此时只要两个运算数都是数字即可,整数或小数都可以依据此规律进行比较并且返回对应的布尔值。
2.字符串之间的比较
当两个字符串比大小时,是按照从左往右的顺序依次比较相同位置上的字符,如果字符完全一样则继续比较下一个。如果两个字符串在相同位置上都是数字则仍然按照数学上的大小进行比较。例如:

此时从数学概念上来说,9大于1,因此返回值是真(true)。
但是如果两个字符串的数字位数不一样,仍然只对相同位置上的数字进行比较,不按照数学概念看整体数值大小。例如:

此时虽然从数学概念上来说,10应该大于9,但是由于字符串同位置比较原则,此时比较的是变量x1中的9和变量x2中的1,得出结论9大于1,因此返回值仍然是真(true)。
由于JavaScript是一种大小写敏感的程序语言,所以如果相同位置上的字符大小写不同就可以直接做出判断,因为大写字母的代码小于小写字母的代码。例如:

如果大小写相同,则按照字母表的顺序进行比较,字母越往后越大。例如:

在上述示例中,同样按照从左往右的顺序先比较两个字符串的第一个字符,即变量x1中的h和变量x2中的w。按照字母表的顺序h在先w在后。因此返回值是假(false)。此时已判断出结果因此不再继续比较后续的字符。
如果不希望两个字符串之间的比较受到大小写字母的干扰,而是无论大小写都按照字母表顺序进行比较,可以将所有字母都转换为小写或大写的形式,再进行大小的比较。使用方法toLowerCase()可以将所有字母转换为小写形式,例如:

使用方法toUpperCase()可以将所有字母转换为大写形式,例如:

本示例使用了toUpperCase()将所有字母转换为大写再进行比较,效果与之前使用方法toLowerCase()将所有字母转换为小写的原理相同,不再赘述。
3.相等性运算符
在JavaScript中,相等性运算符共有四种:等于(==)、非等于(!=)、全等于(===)和非全等于(!==),用于判断两个值是否相等,返回值一定是布尔值(true或false)如表2-14所示。
表2-14 相等性运算符一览表

(1)等于和非等于运算符
在JavaScript中,判断两个数值是否相等用双等于符号(==)表示,只有两个数值完全相等时返回真(true);判断两个数值是否不相等用感叹号加等于号(!=)表示,在两个数值不一样的情况下返回真(true)。在使用等于或非等于运算符进行比较时,如果两个值均为数字类型,则直接进行数学逻辑上的比较判断是否相等。例如:

若需要进行比较的数据存在其他数据类型(例如字符串型、布尔型等),要先将运算符前后的内容尝试转换为数字再进行比较判断。转换规则如表2-15所示。
表2-15 数据类型转换规则表

注:在进行数字转换时,null、undefined不可以进行转换,需保持原值不变,并且在判断时null与undefined被认为是相等的。
在进行了数据类型转换后仍然不是数字类型的特殊情况判断规则如表2-16所示。
表2-16 相等性特殊情况规则一览表

(2)全等于和非全等于运算符
全等号由三个连续的等号组成(===),也是用于判断两个数值是否相同的,作用和双等号(==)类似,但全等号更加严格,在执行判断前不进行任何类型转换,两个数值必须数据类型相同并且内容也相同才返回真(true)。例如:

非全等号由感叹号和两个连续的等号组成(!==),用于判断两个数值是否不同。有两种情况返回真(true):一是两个数值的数据类型不相同;二是两个数值虽然数据类型一样,但是内容不相同。其他情况均返回假(false)。继续使用上一个示例中的变量x1和x2进行非全等判断,代码如下:

注意
不同类型的数据进行比较时,首先会自动将其转换成相同类型的数据后再进行比较。
运算符“==”和“!=”在比较时,只比较值是否相等。
运算符“===”与“!==”要比较数值和其数据类型是否相等。
2.2.5 条件运算符
JavaScript中的条件运算符语法与Java语言相同,语法格式如下:
语法

该格式使用问号(?)标记前面的内容为条件表达式,返回值以布尔值的形式出现。问号后面是两种不同的选择结果,使用冒号(:)将其隔开,如果条件为真则把结果1赋值给变量,否则把结果2赋值给变量。
例如,使用条件运算符进行数字比较,代码如下:

本例中变量result将被赋予变量x1和x2中的最大值。表达式判断x1是否大于x2,如果为真则把x1赋值给result,否则把x2赋值给result。显然x1>x2的返回值是false,因此变量result最终会被赋值成x2的值,最终答案为9。
2.2.6 运算符优先级
前面介绍了JavaScript的各种运算符,那么在对一些比较复杂的表达式进行运算时,首先要明确表达式中所有运算符参与运算的先后顺序,我们把这种顺序称作运算符的优先级。表2-17列出了JavaScript中运算符的优先级,表中运算符的优先级由上至下递减,表右部的第一个接表左部的最后一个。
表2-17 运算符优先级

续表

表2-16中,在同一单元格的运算符具有相同的优先级,左结合方向表示同级运算符的执行顺序为从左向右,右结合方向则表示执行顺序为从右向左。
2.2.7 技能训练
上机练习2 计算圆的周长和面积
需求说明
用户输入圆的半径,计算出圆的周长和面积,运行效果如图2.3所示。
代码实现思路
➢ 获取用户输入的数据,然后进行类型转换与判断。
➢ 若判断用户输入的数据不是数值,则利用警告框进行提示。
➢ 若判断符合要求,则进行计算并将其显示到指定位置。

图2.3 计算圆的周长和面积