零基础学JavaScript
上QQ阅读APP看书,第一时间看更新

3.5 关系运算符

关系运算符通常用于检查两个操作数之间的关系,即两个操作数之间是相等、大于还是小于关系等。关系运算符可以根据是否满足该关系来返回true或false。

3.5.1 相等运算符

相等运算符(==)是一个二元运算符,可以比较两个操作数是否相等。如果相等,则返回布尔值true;如果不相等,则返回布尔值false。

【实例3.12】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>相等运算符</title>
04         <script type="text/javascript">
05            <!--
06               var i = 11;
07               var j = 11;
08               var k = 12;
09               if (i==j)
10               {
11                  document.write("i等于j<br>");
12               }
13               else
14               {
15                  document.write("i不等于j<br>");
16               }
17               if (j==k)
18               {
19                  document.write("j等于k<br>");
20               }
21               else
22               {
23                  document.write("j不等于k<br>");
24               }
25            -->
26         </script>
27      </head>
28      <body>
29      </body>
30   </html>

【代码说明】代码第9行和第17行分别进行了两个“==”的判断。在本例中,只有相等运算符左右两侧的操作数相等才会返回true,否则返回false。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample12.htm”里的内容,其运行结果如图3.5所示。

图3.5 sample12.htm的运行结果

值得注意的是:相等运算符并不要求两个操作数的类型是一样的,它会将字符串“11”与数字11认为是相等的两个操作数。即当字符串“11”与数字11比较时,将会返回true。相等运算符的比较原理如下。

■如果两个操作数的类型相同,则比较这两个操作数的值,如果值相等,则返回true,否则返回false。

■如果一个操作数是字符串,另一个操作数是数字,则把字符串转换成数字再判断两个操作数的值是否相等。如果值相等,返回true,否则返回false。

■如果一个操作数是布尔值,则把该操作数转换为数字再进行比较,其中true将转换为1,false将转换为0。

■如果一个操作数的值为undefined,另一个操作数的值为null,则返回true。

■如果一个操作数是对象,另一个操作数是数字或字符串,则使用valueOf()或toString()将对象转化为原始类型的值之后,再进行比较。

■如果操作数类型的组合与以上组合都不相同,则返回false。

3.5.2 等同运算符

等同运算符(===)与相等运算符类似,也是一个二元运算符,同样可以比较两个操作数是否相等。如果相等,则返回布尔值true;如果不相等,则返回布尔值false。请注意等同运算符与相等运算符在表示上的区别:相等运算符是两个等于号构成的,而等同运算符是三个等于号构成的。等同运算符对操作数是否相等的判断比相等运算符的判断更为严格,等同运算符只有在两个操作数类型相同,并且值也相同的情况下才会返回true。

【实例3.13】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>等同运算符</title>
04         <script type="text/javascript">
05            <!--
06               var i = 11;
07               var j = "11";
08               var k = "11";
09               if (i==j)
10               {
11                  document.write("i等于j<br>");
12               }
13               else
14               {
15                  document.write("i不等于j<br>");
16               }
17               if (i===j)
18               {
19                  document.write("i等同于j<br>");
20               }
21               else
22               {
23                  document.write("i不等同于j<br>");
24               }
25               if (j===k)
26               {
27                  document.write("j等同于k<br>");
28               }
29               else
30               {
31                  document.write("j不等同于k<br>");
32               }
33            -->
34         </script>
35      </head>
36      <body>
37      </body>
38   </html>

【代码说明】在本例中,代码6~8行定义了一个数字变量(i)和两个字符串变量(j和k),其中i的值为数字11,而j和k的值都为字符串“11”。在使用相等运算符进行比较时,JavaScript认为数字11与字符串“11”是相同的。而在使用等同运算符进行比较时,JavaScript认为数字11与字符串“11”是不相同的,只有值同样都是字符串“11”的j和k比较时,才认为它们是相同的。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample13.htm”里的内容,其运行结果如图3.6所示。

图3.6 sample13.htm的运行结果

等同运算符的比较原理如下。

■如果两个操作数的类型不相同,则返回false。

■如果两个操作数的类型相同,并且值相同,则返回true。

■NaN不会与任何值等同,包括它自己。

■字符串只有在长度与内容都相同的情况下才会返回true。

■当两个操作数的值都是true或都是false时,才会返回true。

■当两个操作数的值都是null或都是undefined时,才会返回true。

■两个操作数引用的是同一个对象、数组或函数时,才会返回true。如果两个操作数引用的不是同一个对象,哪怕这两个对象的属性完全相同,也会返回false。数组也是如此,只要两个操作数引用的不是同一个数组,哪怕两个数组的元素完全相同,也会返回false。

3.5.3 不等运算符

不等运算符(!=)也是一个二元运算符,可以比较两个操作数是否不相等。如果不相等,则返回布尔值true;如果相等,则返回布尔值false。

【实例3.14】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>不等运算符</title>
04         <script type="text/javascript">
05            <!--
06               var i = 11;
07               var j = 11;
08               var k = 12;
09               if (i!=j)
10               {
11                  document.write("i与j不相等<br>");
12               }
13               else
14               {
15                  document.write("i与j相等<br>");
16               }
17               if (j!=k)
18               {
19                  document.write("j与k不相等<br>");
20               }
21               else
22               {
23                  document.write("j与k相等<br>");
24               }
25            -->
26         </script>
27      </head>
28      <body>
29      </body>
30   </html>

【代码说明】代码第9行和代码第17行执行了两个不等运算。在本例中,只有不等运算符左右两侧的操作数不相等才会返回true,否则返回false。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample14.htm”里的内容,其运行结果如图3.7所示。

图3.7 sample14.htm的运行结果

提示

不等运算符与相等运算符检测的情况正好相反。

3.5.4 不等同运算符

不等同运算符(!==)与不等运算符类似,也是一个二元运算符,同样可以比较两个操作数是否不相等。如果不相等,则返回布尔值true,否则返回布尔值false。请注意不等同运算符比不等运算符多一个等于号。不等同运算符对操作数是否不相等的判断比不等运算符的判断更为严格,不等同运算符只有在两个操作数类型相同,并且值也相同的情况下才会返回false。

【实例3.15】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>不等同运算符</title>
04         <script type="text/javascript">
05            <!--
06               var i = 11;
07               var j = "11";
08               var k = "11";
09               if (i!=j)
10               {
11                  document.write("i与j不相等<br>");
12               }
13               else
14               {
15                  document.write("i与j相等<br>");
16               }
17               if (i!==j)
18               {
19                  document.write("i与j不等同成立<br>");
20               }
21               else
22               {
23                  document.write("i与j不等同不成立<br>");
24               }
25               if (j!==k)
26               {
27                  document.write("j与k不等同成立<br>");
28               }
29               else
30               {
31                  document.write("j与k不等同不成立<br>");
32               }
33            -->
34         </script>
35      </head>
36      <body>
37      </body>
38   </html>

【代码说明】在本例中,代码第6~8行定义了一个数字变量(i)和两个字符串变量(j和k)。其中,i的值为数字11,而j和k的值都为字符串“11”。在使用不等运算符进行比较时,JavaScript认为数字11与字符串“11”是不相等的关系不成立,即数字11与字符串“11”是相等的。而在使用不等同运算符进行比较时,JavaScript认为数字11与字符串“11”是不等同的关系成立。只有在值同样都是字符串“11”的j和k比较时,才认为是不等同的关系不正立。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample15.htm”里的内容,其运行结果如图3.8所示。

图3.8 sample15.htm的运行结果

提示

不等同运算符与等同运算符检测的情况正好相反。

3.5.5 小于运算符

小于运算符(<)是一个二元运算符,当第1个操作数小于第2个操作数时返回true,否则返回false。

【实例3.16】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>小于运算符</title>
04         <script type="text/javascript">
05            <!--
06               var i = 11;
07               var j = 12;
08               if (i<j)
09               {
10                  document.write("i小于j");
11               }
12               else
13               {
14                  document.write("i不小于j");
15               }
16            -->
17         </script>
18      </head>
19      <body>
20      </body>
21   </html>

【代码说明】小于运算符也不要求两个操作数的类型相同,其比较原理如下。

■如果两个操作数都是数字型的,则按数字大小的方式来比较。

■如果两个操作数都是字符串型的,则逐个字符进行比较。字符的比较方式是采用字符在Unicode编码中的数值大小来进行比较。

■如果一个操作数是字符串型的,另一个操作数是数字型的,则将字符串型的操作数转换成数字型后再做比较。如果不能转换成数字,则返回false。

■如果操作数不能转换成字符串或数字,则返回false。

■如果一个操作数是NaN,则比较结果为false。

如果操作数是对象,并且该对象可以转换为数字或字符串,则将其转换为数字。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample16.htm”里的内容,其运行结果为“i小于j”。

3.5.6 大于运算符

大于运算符(>)也是一个二元运算符,与小于运算符相反,只有当第1个操作数大于第2个操作数时才返回true,否则返回false。

【实例3.17】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>大于运算符</title>
04         <script type="text/javascript">
05            <!--
06               var i = 11;
07               var j = 12;
08               if (i>j)
09               {
10                  document.write("i大于j");
11               }
12               else
13               {
14                  document.write("i不大于j");
15               }
16            -->
17         </script>
18      </head>
19      <body>
20      </body>
21   </html>

【代码说明】代码第6~7行定义了两个变量,然后代码第8行比较两个变量,并根据不同的结果输出不同的值。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample17.htm”里的内容,其运行结果为“i不大于j”。

提示

大于运算符的比较原理与小于运算符的比较原理相同。

3.5.7 小于或等于运算符

小于或等于运算符(<=)是一个二元运算符,当第1个操作数小于第2个操作数,或者第1个操作等于第2个操作数时(即第1个操作数不大于第2个操作数时),都能返回true,否则返回false。

【实例3.18】请看以下代码,注意加粗的代码。


01   <html>
02      <head>
03         <title>小于或等运算符</title>
04         <script type="text/javascript">
05            <!--
06               var i = 11;
07               var j = 11;
08               if (i<=j)
09               {
10                  document.write("i小于或等于j");
11               }
12               else
13               {
14                  document.write("i大于j");
15               }
16            -->
17         </script>
18      </head>
19      <body>
20      </body>
21   </html>

【代码说明】代码第6~7行定义了两个变量,然后代码第8行比较两个变量,并根据不同的结果输出不同的值。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample18.htm”里的内容,其运行结果为“i小于或等于j”。

提示

小于或等于运算符的比较原理与小于运算符的比较原理相同。

3.5.8 大于或等于运算符

大于或等于运算符(>=)是一个二元运算符,当第1个操作数大于第2个操作数,或者第1个操作等于第2个操作数时(即第1个操作数不小于第2个操作数时),都能返回true,否则返回false。

【实例3.19】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>大于或等于运算符</title>
04         <script type="text/javascript">
05            <!--
06               var i = 11;
07               var j = 11;
08               if (i<=j)
09               {
10                  document.write("i大于或等于j");
11               }
12               else
13               {
14                  document.write("i小于j");
15               }
16            -->
17         </script>
18      </head>
19      <body>
20      </body>
21   </html>

【代码说明】代码第6~7行定义了两个变量,然后代码第8行比较两个变量,并根据不同的结果输出不同的值。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample19.htm”里的内容,其运行结果为“i大于或等于j”。

提示

大于或等于运算符的比较原理与小于运算符的比较原理相同。

3.5.9 in运算符

in运算符虽然也是一个二元运算符,但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个(左边的)操作数必须是字符串类型或可以转换为字符串类型的其他类型,而第2个(右边的)操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名,才会返回true,否则返回false。

【实例3.20】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>in运算符</title>
04         <script type="text/javascript">
05            <!--
06               //定义一个box对象
07               var box = {box_length:200,box_width:100};
08               //定义一个数组
09               var arr = ["box_length",200,"200"];
10               //定义变量
11               var x = "box_length";
12               var y = 2;
13               if (x in box)
14               {
15                  document.write("变量x包含在对象box之中<br>");
16               }
17               else
18               {
19                  document.write("变量x不包含在对象box之中<br>");
20               }
21               if (y in box)
22               {
23                  document.write("变量y包含在对象box之中<br>");
24               }
25               else
26               {
27                  document.write("变量y不包含在对象box之中<br>");
28               }
29               if (x in arr)
30               {
31                  document.write("变量x包含在数组arr之中<br>");
32               }
33               else
34               {
35                  document.write("变量x不包含在数组arr之中<br>");
36               }
37               if (y in arr)
38               {
39                  document.write("变量y包含在数组arr之中<br>");
40               }
41               else
42               {
43                  document.write("变量y不包含在数组arr之中<br>");
44               }
45            -->
46         </script>
47      </head>
48      <body>
49      </body>
50   </html>

【代码说明】本例代码中的关键点如下。

■代码7~9行定义了一个对象box和一个数组arr。其中,对象box包含了两个属性:box_length和box_width;数组arr一共包含3个元素。

■对于对象而言,in运算符比较的是对象的属性名。当变量x的值为“box_length”时,与对象box中的属性“box_length”相同,因此“x in box”返回true。而变量y的值与对象box中的所有属性名都不相同,因此“y in box”返回false。

■对于数组而言,in运算符比较的是数组的下标。当变量y的值为2时,属于数组arr的合法下标(arr的长度为3,所以合法下标为0~2),因此“y in arr”返回true。而变量x的值为“box_length”,虽然数组中有一个元素值也为“box_length”,但是这并不是数组arr的合法下标,因此“x in arr”返回false。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample20.htm”里的内容,其运行结果如图3.9所示。

图3.9 sample20.htm的运行结果

3.5.10 instanceof运算符

instanceof运算符用于判断对象与对象实例之间关系的运算符,或者判断对象是否由某个构造函数定义。这也是一个二元运算符,该运算符要求第1个操作数是一个对象或数组的名称,而第2个操作是对象类的名字。如果第1个操作数是第2个操作数的实例,instanceof运算符将会返回true,否则返回false。

【实例3.21】请看以下代码,注意加粗的文字。


01   <html>
02      <head>
03         <title>instanceof运算符</title>
04         <script type="text/javascript">
05            <!--
06               //定义一个Date对象
07               var myDate = new Date();
08               //定义一个数组
09               var arr = ["box_length",200,"200"];
10               if (myDate instanceof Date)
11                  {document.write("myDate是Date类的实例<br>");}
12               else
13                  {document.write("myDate不是Date类的实例<br>");}
14               if (myDate instanceof Object)
15                  {document.write("所有对象都是Object类的实例<br>");}
16               else
17                  {document.write("myDate不是Object类的实例<br>");}
18               if (myDate instanceof Number)
19                  {document.write("myDate是Number类的实例<br>");}
20               else
21                  {document.write("myDate不是Number类的实例<br>");}
22               if (arr instanceof Array)
23                  {document.write("arr是Array类的实例<br>");}
24               else
25                  {document.write("arr不是Array类的实例<br>");}
26               if (arr instanceof Object)
27                  {document.write("所有对象都是Object类的实例<br>");}
28               else
29                  {document.write("arr不是Object类的实例<br>");}
30               if (arr instanceof Number)
31                  {document.write("arr是Number类的实例<br>");}
32               else
33                  {document.write("arr不是Number类的实例<br>");}
34            -->
35         </script>
36      </head>
37      <body>
38      </body>
39   </html>

【代码说明】本例代码中的关键点如下。

■代码第7~9行定义了一个名为myDate的Date对象和一个名为arr的数组。

■代码第10行使用“myDate instanceof Date”判断myDate是否是Date对象的实例,由于myDate是Date()定义的,所以返回true。

■代码第14行使用“myDate instanceof Object”判断myDate是否是Object类的实例,由于所有对象都是Object类的实例,所以返回true。

■代码第18行使用“myDate instanceof Number”判断myDate是否是Number类的实例,由于myDate不是Number对象,所以返回false。

■代码第22行使用“arr instanceof Array”判断arr是否是Array对象的实例,由于arr是一个数组,所以返回true。

■代码第26行使用“arr instanceof Object”判断arr是否是Object类的实例,由于所有对象都是Object类的实例,所以返回true。

■代码第30行使用“arr instanceof Number”判断arr是否是Number类的实例,由于arr不是Number对象,所以返回false。

【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample21.htm”里的内容,其运行结果如图3.10所示。

图3.10 sample21.htm的运行结果