3.10 其他运算符
除了前面章节里所介绍的运算符之外，JavaScript还支持许多其他运算符，请看以下介绍。
3.10.1 条件运算符
条件运算符（?:）是JavaScript中唯一的三元运算符。三元运算符必须有3个操作数：第1个操作数位于“?”之前；第2个操作数位于“?”与“:”之间；第3个操作数位于“:”之后。其语法代码如下：
X ? Y : Z
在条件运算符中，第1个操作数（X）必须是布尔值（如“a>b”），而第2个操作数（Y）和第3个操作数（Z），可以是任何类型的值。条件运算符返回的值是由第1个操作数的值所决定的，如果第1个操作数的值为true，那么返回第2个操作数的值；如果第1个操作数的值为false，那么返回第3个操作数的值。
【实例3.31】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>条件运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var x = 12; 07 var a = "x大于10<br>"; 08 var b = "x不大于15<br>"; 09 document.write(x>10?a:b); 10 document.write(x>15?a:b); 11 --> 12 </script> 13 </head> 14 <body> 15 </body> 16 </html>
【代码说明】在本例中，x的值为12，因此x>10的值为true，所以返回变量a的值，即“x大于10”。而x>15的值为false，所以返回变量b的值，即“x不大于15”。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample31.htm”里的内容，其运行结果如图3.19所示。
图3.19 sample31.htm的运行结果
3.10.2 new运算符
在JavaScript中有很多内置对象，如日期对象、字符串对象、布尔对象和数值对象等，使用new运算符可以定义一个新的内置对象实例，JavaScript会调用构造函数初始化这个对象实例。new运算符的语法如下：
对象实例名称 = new 对象类型 (参数) 对象实例名称 = new 对象类型
当函数调用时，如果没有用到参数，可以省去括号，但这种省略方式只限于new运算符。
【实例3.32】有关new运算符的使用请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>new运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var mydate = new Date(); 07 document.write(mydate.getFullYear() + "<br>"); 08 09 var arr = new Array; 10 arr = ["1",true]; 11 document.write(arr[1] + "<br>"); 12 --> 13 </script> 14 </head> 15 <body> 16 </body> 17 </html>
【代码说明】本例中的知识点说明如下。
■代码第6行使用“var mydate = new Date();”定义了一个名为mydate的新的日期型对象。
■在定义了日期型对象实例之后，JavaScript会自动调用构造函数初始化mydate，因此，可以通过mydate.getYear()来获取该日期型对象中的年份。
■代码第9行使用“var arr = new Array;”定义了一个名为arr数组。在定义数组对象实例时，没有使用参数，所以可以省略Array后面的括号。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample32.htm”里的内容，其运行结果如图3.20所示。
图3.20 sample32.htm的运行结果
3.10.3 void运算符
void运算符是一个特殊的一元运算符，可以作用在任何类型的操作数之前。void运算符可以让操作数进行运算，但是却舍弃运算之后的结果。通常void运算符出现在HTML代码的<a>标签中，其语法代码如下：
void 操作数 void(操作数)
【实例3.33】有关void运算符的使用方法请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>void运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var a = 1; 07 var b = 2; 08 document.write("a+b = " + (a+b) + "<br>"); 09 document.write("void(a+b) = " + void(a+b) + "<br>"); 10 --> 11 </script> 12 </head> 13 <body> 14 <a href="javascript:void window.open()">打开一个新窗口</a><br> 15 <a href="javascript:window.open()">打开一个新窗口</a> 16 </body> 17 </html>
【代码说明】在本例中可以看到，变量a加上变量b的结果为3，而void(a+b)的结果是undefined。单从这一步来看，好像并没有执行a+b操作，而事实上JavaScript是执行了a+b操作，只是弃舍了结果。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample33.htm”里的内容，其运行结果如图3.21所示。
图3.21 sample33.htm的运行结果
在本例中的第1个超链接里，使用了“javascript:void window. open()”语句来打开一个新窗口，如果单击该超链接，将会打开一个新窗口，如图3.22所示。
图3.22 单击第1个超链接后的结果
在本例中的第2个超链接里，使用了“javascript:window.open()”语句来打开一个新窗口，如果单击该超链接，也会打开一个新窗口，如图3.23所示。
图3.23 单击第2个超链接后的结果
比较图3.22与图3.23，可以发现，单击两个超链接之后，都会打开一个新窗口，但单击第1个超链接之后，原浏览器窗口中的内容并没有改变，而单击第2个超链接之后，原浏览器窗口中的内容已经改变。这是因为在第1个超链接中，使用了void运算符舍弃了操作数，而在第2个超链接中没有舍弃操作数。
3.10.4 typeof运算符
typeof运算符是一个一元运算符，作用于操作数之前，该操作数可以是一个任何类型。typeof运算符可以返回一个字符串，该字符串说明操作数是什么类型。typeof运算符的语法代码如下：
typeof 操作数 typeof(操作数)
【实例3.34】有关typeof运算符的使用方法请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>typeof运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var x = 12; //数字型 07 var a = "x大于10"; //字符串型 08 var b = true; //布尔型 09 var c = null; //空 10 var now = new Date(); //日期型 11 var arr = ["1",true]; //数组 12 function myalert() //函数 13 { 14 alert("警告"); 15 } 16 17 document.write(typeof x + "<br>"); 18 document.write(typeof a + "<br>"); 19 document.write(typeof(b) + "<br>"); 20 document.write(typeof(c) + "<br>"); 21 document.write(typeof(d) + "<br>"); 22 document.write(typeof(now) + "<br>"); 23 document.write(typeof(arr) + "<br>"); 24 document.write(typeof(myalert) + "<br>"); 25 --> 26 </script> 27 </head> 28 <body> 29 </body> 30 </html>
【代码说明】在本例中可以看出，typeof运算符返回值的几种情况如下。
■当操作数为数字型时，返回“number”。
■当操作数为字符串型时，返回“string”。
■当操作数为布尔型时，返回“boolean”。
■当操作数为空时，返回“object”。
■当操作数不存在时，返回“undefined”。
■当操作数为日期型时，返回“object”。
■当操作数为数组时，返回“object”。
■当操作数为函数时，返回“function”。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample34.htm”里的内容，其运行结果如图3.24所示。
图3.24 sample34.htm的运行结果
3.10.5 对象属性存取运算符
对象属性存取运算符（.）是一个二元运算符，该运算符要求第1个操作数必须是对象或对象实例名，而第2个操作数必须是对象的属性名。对象属性存取运算符的语法代码如下：
对象名.属性名
【实例3.35】有关对象属性存取运算符的使用方法如下所示，注意加粗的文字。
01 <html>
02 <head>
03 <title>对象属性存取运算符</title>
04 <script type="text/javascript">
05 <!--
06 //定义一个对象实例
07 myObject = new Object();
08 //设置对象实例的属性
09 myObject = {a: "myObject对象a属性的值", b:"myObject对象b属性的值
10 "};
11
12 //输出对象属性
13 document.write(myObject.a + "<br>");
14 document.write(myObject.b + "<br>");
15
16 //输出一个不存在的对象属性
17 document.write(myObject.d);
18 -->
19 </script>
20 </head>
21 <body>
22 </body>
</html>
【代码说明】在使用对象属性存取运算符时，有以下两点需要注意。
■虽然对象属性存取运算符要求第2个操作数是对象的属性名，但是如果第2个操作数所指定的属性不存在，JavaScript也不会报错，只会返回undefined。
■使用对象属性存取运算符，不但可以存取对象的属性，还可以调用对象的方法。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample35.htm”里的内容，其运行结果如图3.25所示。
图3.25 sample35.htm的运行结果
3.10.6 数组元素存取运算符
数组元素存取运算符（[]）用于存取数组中某个元素的值。在该运算符中，“[]”之前为第1个操作，该操作数必须是数组的名称。在“[”与“]”之间为第2个操作数，该操作数为数组的下标，并且必须是整数型，其取值范围为从0到数组元素个数减1。数组元素存取运算符的语法代码如下：
数组名[下标]
【实例3.36】有关数组元素存取运算符的使用方法如下所示，注意加粗的文字。
01 <html> 02 <head> 03 <title>数组元素存取运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 //定义一个数组 07 var arr = ["数组元素一","数组元素二"]; 08 09 //输出数组元素的值 10 document.write(arr[0] + "<br>"); 11 document.write(arr[1] + "<br>"); 12 13 //输出一个不存在的数据元素的值 14 document.write(arr[2]); 15 --> 16 </script> 17 </head> 18 <body> 19 </body> 20 </html>
【代码说明】代码第7行定义了一个数组，包括两个值。代码第10～14行分别读取数组的值，其中第14行的索引已经超出了数组的边界。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample36.htm”里的内容，其运行结果如图3.26所示。
图3.26 sample36.htm的运行结果
注意
如果数组的下标大于或等于数组元素的个数，JavaScript也不会报错，只会返回undefined。
数组元素存取运算符不但可以用来存取数组元素的值，还可以用来存取对象属性的值，此时要求第1个操作数为对象名称、第2个操作数为对象的属性名称。
【实例3.37】请看以下代码，注意加粗的文字。
01 <html>
02 <head>
03 <title>数组元素存取运算符</title>
04 <script type="text/javascript">
05 <!--
06 //定义一个对象
07 myObject = new Object();
08 //设置对象的属性
09 myObject = {a:"myObject对象a属性的值" , b:"myObject对象b属性的值
10 "};
11
12 //输出对象的属性值
13 document.write(myObject["a"] + "<br>");
14 document.write(myObject["b"] + "<br>");
15 -->
16 </script>
17 </head>
18 <body>
19 </body>
20 </html>
【代码说明】代码第9～10行定义了一个数组，这里和以前有区别，在{ }内用“：”来间隔操作对象和对象的属性。代码第13～14行演示了这种读取方式。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample37.htm”里的内容，其运行结果如图3.27所示。
图3.27 sample37.htm的运行结果
3.10.7 delete运算符
delete运算符用于删除变量、对象的属性或数组中的元素。delete运算符返回的是布尔值数据。如果删除操作成功，则返回true，否则返回false。delete运算符的使用语法如下：
delete 对象名 delete 对象名称.属性 delete 数组[索引] delete 变量名
在使用delete运算符时，必须注意以下几点。
■并不是所有属性和变量都可以删除，某些对象的内部核心属性和客户端属性是不能删除的。
■使用var定义的变量、对象、数组是不能删除的。
■删除对象中不存在的属性会返回true。
■删除未定义的变量会返回true。
【实例3.38】有关delete运算符的使用方法请看以下代码，注意加粗的文字。
01 <html>
02 <head>
03 <title>delete运算符</title>
04 <script type="text/javascript">
05 <!--
06 //定义一个对象
07 myObject = new Object();
08 //设置对象的属性
09 myObject = {a:"myObject对象a属性的值" , b:"myObject对象b属性的值
10 "};
11 //定义变量
12 var a = "使用var定义的变量";
13 b = "没有使用var定义的变量";
14 //定义一个数组
15 var arr = ["数组元素一","数组元素二"];
16
17 //输出对象属性
18 document.write(myObject.a + "<br>");
19 document.write(myObject.b + "<br>");
20 //删除对象属性
21 delete myObject.b;
22 //输出删除过的对象属性，此时myObject.b属性不存在，输出undefined
23 document.write(myObject.b + "<br>");
24 //删除对象不存在的对象属性，也会返回true
25 document.write(delete myObject.c + "<br><br>");
26
27 //删除对象
28 delete myObject;
29 //输出已删除的对象类型，此时myObject对象不存在，输出undefined
30 document.write(typeof(myObject) + "<br><br>");
31
32 //输出变量a的值
33 document.write(a + "<br>");
34 //删除变量a，由于变量a是使用var定义的，所以不能删除，返回false
35 document.write(delete a + "<br><br>");
36
37 //输出变量b的值
38 document.write(b + "<br>");
39 //删除变量b，由于变量b是没有使用var定义的，所以可以删除，返回true
40 document.write(delete b + "<br>");
41 //输出已删除的变量b的类型，此时变量b不存在，输出undefined
42 document.write(typeof(b) + "<br><br>");
43
44 //输出数组元素的值
45 document.write(arr[0] + "<br>");
46 document.write(arr[1] + "<br>");
47 //删除数组元素
48 delete arr[0];
49 //输出数组元素的值，arr[0]被删除了，所以输出undefined
50 document.write(arr[0] + "<br>");
51 document.write(arr[1] + "<br><br>");
52
53 //不能删除未定义的变量，因此返回true
54 document.write(delete d);
55 -->
56 </script>
57 </head>
58 <body>
59 </body>
60 </html>
【代码说明】在本例中的知识点如下。
■代码第7行定义了一个myObject对象，并为myObject对象创建a和b两个属性。使用delete运算符删除myObject.b属性，然后输出myObject.b属性。此时由于myObject.b属性已经删除，所以显示undefined。如图3.28所示中的第3行文字所示。
■使用delete运算符删除myObject对象中并不存在的c属性，但此时仍然返回true。如图3.28所示中第4行文字所示。
■使用delete运算符删除myObject对象，再使用typeof运算符返回myObject对象的类型。由于myObject对象已经删除，所以返回的是undefined。如图3.28所示中第5行文字所示。
■代码第12行使用var定义一个变量a，然后使用delete运算符删除变量a，此时返回false，因为delete运算符不能删除使用var定义的变量。如图3.28所示中的第7行文字。
■代码第13行定义一个变量b，该变量b没有使用var定义，然后使用delete运算符删除变量b，此时返回true。如图3.28所示中的第9行文字所示。
■再用typeof运算符返回变量b的类型，由于变量b已经删除，所以返回undefined。图3.28所示中的第10行文字所示。
■代码第15行定义一个名为arr的数组，该数组中有两个元素。使用delete运算符删除数组中的第1个元素。再输出arr数组中的第1个元素，由于该元素已经删除，所以返回undefined。图3.28所示中的第13行文字所示。
■使用delete运算符删除一个未定义的变量d，返回的还是true。图3.28所示中最后一行文字所示。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample38.htm”里的内容，其运行结果如图3.28所示。
图3.28 sample38.htm的运行结果
3.10.8 逗号运算符
逗号运算符是一个二元运算符，其作用只是分隔两个操作数，JavaScript会先计算第1个操作数的值，再计算第2个操作数的值。通常逗号运算符都与for语句联合使用。
【实例3.39】有关逗号运算符的使用请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>逗号运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var a = 1; 07 var b = 2; 08 c = a+1, d = a+b; 09 document.write(c + "<br>"); 10 document.write(d + "<br>"); 11 for (i=0,j=1;i<3;i++,j=j+3) 12 { 13 document.write("i = " + i + ";j = " + j + "<br>"); 14 } 15 --> 16 </script> 17 </head> 18 <body> 19 </body> 20 </html>
【代码说明】代码第8行使用了逗号运算符，其实这完成了两个运算。代码第11行中的for循环中也使用了逗号运算符，这里起到间隔的作用。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample39.htm”里的内容，其运行结果如图3.29所示。
图3.29 sample39.htm的运行结果
提示
有关for语句的使用方法会在后续章节详细介绍。
3.10.9 函数调用运算符
函数调用运算符（()）是一个特殊的运算符，其作用是调用函数。之所以说它特殊，是因为该运算符没有确定数量的操作数，操作数的多少由函数的参数多少来决定。函数调用运算符的语法代码如下：
函数名() 函数名(参数) 函数名(参数1,参数2,…) 对象名.方法名() 对象名.方法名(参数) 对象名.方法名(参数1,参数2,…)
【实例3.40】有关函数调用运算符的使用方法请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>函数调用运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 //调用document对象的write()方法 07 document.write("输出文字<br>"); 08 09 //定义一个函数 10 function myFun() 11 { 12 alert("弹出警告框"); 13 } 14 //调用函数 15 myFun(); 16 --> 17 </script> 18 </head> 19 <body> 20 </body> 21 </html>
【代码说明】代码第10～13行创建了一个函数myFun，代码第15行调用这个函数直接用名称+( )的形式即可。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample40.htm”里的内容，其运行结果如图3.30所示。
图3.30 sample40.htm的运行结果
3.10.10 this运算符
虽然在很多时候，都称this为运算符，但this更像是一个关键字，因为它不需要操作数。this所代表的是当前对象，其语法代码如下所示：
this[.属性]
【实例3.41】有关this运算符的使用方法请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>this运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 function outtext1(obj) 07 { 08 alert(obj.value); 09 } 10 function outtext2(str) 11 { 12 alert(str); 13 } 14 --> 15 </script> 16 </head> 17 <body> 18 <input type="text" value="第一个文本框" onclick="outtext1(this)"> 19 <input type="text" value="第二个文本框" onclick="outtext2(this.value)"> 20 </body> 21 </html>
【代码说明】在本例中，第18～19行创建了两个文本框，第6～13行表示在单击文本框时，会弹出一个警告窗口。
【运行效果】以上代码为本书配套代码文件目录“代码\第三章\sample41.htm”里的内容，如图3.31为单击第1个文本框之后的结果。
图3.31 sample41.htm的运行结果
在本例中第1个文本框里使用了“onclick="outtext1(this)"”来调用outtext1函数，该函数中的参数为对象型参数，此时this代表的是第1个文本框对象。在本例中第2个文本框里使用了“onclick= "outtext2(this.value)"”来调用outtext2函数，该函数中的参数为字符串型参数，此时this代表的是第2个文本框对象，而this.value代表的是第2个文本框中的内容。