3.4 算术运算符
算术运算符所处理的对象都是数字类型的操作数。算术运算符对数字型的操作数进行处理之后，返回的还是一个数字型的值。
3.4.1 加法运算符
加法运算符（+）是一个二元运算符，可以对两个数字型的操作数进行相加运算，返回值是两个操作数之和。
【实例3.1】请看以下代码。注意加粗的文字。
01 <html> 02 <head> 03 <title>加法运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 10; 07 var x = i + 2; 08 document.write(x); 09 --> 10 </script> 11 </head> 12 <body> 13 </body> 14 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为10。代码第7行定义了x变量，其值为一个二元运算“+”，则x的值为变量i与2的“和”。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample01.htm”里的内容，其运行结果为12。
3.4.2 减法运算符
减法运算符（-）是一个二元运算符，可以对两个数字型的操作数进行相减运算，返回第1个操作数减去第2个操作数的值。
【实例3.2】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>减法运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 10; 07 var x = i - 2; 08 document.write(x); 09 --> 10 </script> 11 </head> 12 <body> 13 </body> 14 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为10。代码第7行定义了x变量，其值为一个二元运算“-”，则x的值为变量i与2的“差”。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample02.htm”里的内容，其运行结果为8。
3.4.3 乘法运算符
乘法运算符（*）是一个二元运算符，可以对两个数字型的操作数进行相乘运算，返回两个操作数之积。
【实例3.3】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>乘法运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 10; 07 var x = i * 2; 08 document.write(x); 09 --> 10 </script> 11 </head> 12 <body> 13 </body> 14 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为10。代码第7行定义了x变量，其值为一个二元运算“*”，则x的值为变量i与2的“积”。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample03.htm”里的内容，其运行结果为20。
3.4.4 除法运算符
除法运算符（/）是一个二元运算符，可以对两个数字型的操作数进行相除运算，返回第1个操作数除以第2个操作数的值。
【实例3.4】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>除法运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 11; 07 var x = i / 2; 08 document.write(x); 09 --> 10 </script> 11 </head> 12 <body> 13 </body> 14 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为10。代码第7行定义了x变量，其值为一个二元运算“/”，则x的值为二元运算的操作结果。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample04.htm”里的内容，其运行结果为5.5。JavaScript中的所有数字型的数据都是以浮点型表示的，所以就算是整数型数据相除，也能得到浮点型的数据。
注意
在使用除法运算符进行除法运算时，如果除数为0（如2/0），得到的结果为Infinity；如果是0/0，得到的结果为NaN。
3.4.5 模运算符
模运算符（%），又称为取余运算符。这也是一个二元运算符，可以对两个数字型的操作数进行取模操作，返回第1个操作数除以第2个操作数之后的余数。
【实例3.5】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>模法运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 11; 07 var x = i % 2; 08 document.write(x); 09 --> 10 </script> 11 </head> 12 <body> 13 </body> 14 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为11。代码第7行定义了x变量，其值为一个二元运算“%”，则x的值为二元运算的操作结果。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample05.htm”里的内容，其运行结果为1。
注意
模运算符的操作数通常是两个整数，但JavaScript中也支持使用浮点数，例如“-5.4 % 2.1”的结果是-1.2000000000000001。
3.4.6 负号运算符
负号运算符（-）是一个一元运算符，可以对一个数字进行取反操作，即将一个正数转换成相应的负数，也可以将一个负数转换成相应的正数。
【实例3.6】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>负号运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 11; 07 i = -i; 08 document.write(i + "<br>"); 09 i = -i; 10 document.write(i + "<br>"); 11 --> 12 </script> 13 </head> 14 <body> 15 </body> 16 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为11。代码第7行重新定义了i变量，其值为原来的i变量取负数。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample06.htm”里的内容，其运行结果为两行文字，第一行文字为-11，第二行文字为11。
注意
（1）如果操作数为非数字型数据，负号运算符可以将其先转换为数字再进行取反操作。
（2）如果操作数为非数字型数据，并且该操作数不能转换为数字型数据，将返回NaN。
3.4.7 正号运算符
与负号运算符相对应，正号运算符（+）也是一个一元运算符，但该运算符不会对操作数产生任何影响，只会让源代码看起来更清楚。
【实例3.7】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>正号运算符</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 11; 07 i = +i; 08 document.write(i); 09 --> 10 </script> 11 </head> 12 <body> 13 </body> 14 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为11。代码第7行重新定义了i变量，其值为原来的i变量进行正号运算，其实结果不变。
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample07.htm”里的内容，其运行结果为11。
注意
如果正号运算符的操作数是一个字符串型的数据，正号运算符可以将其转换为数字型的数据。如果该操作数是一个不能转换为数字型的数据，将返回NaN。
3.4.8 递增运算符
递增运算符（++）是一个一元运算符，该运算符可以对操作数进行递增操作，即每次增加1。递增运算符要求其操作数必须是变量、对象中的某个属性或数组中的某个元素，并且操作数的类型必须是数字型的，如果操作数类型不是数字型，递增运算符会将其先转换为数字型数据，再进行递增操作。
递增运算符根据其相对于操作数的位置有两种不同的递增方式。
（1）先使用后递增：当运算符在操作数之后时，JavaScript会先使用操作数的值之后，再对操作数做递增操作。
【实例3.8】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>先使用后递增</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 11; 07 var j = i++; 08 document.write(i + "<br>"); 09 document.write(j + "<br>"); 10 --> 11 </script> 12 </head> 13 <body> 14 </body> 15 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为11。代码第7行定义了j变量，其值为i++。
图3.1 sample08.htm的运行结果
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample08.htm”里的内容，其运行结果如图3.1所示。在图3.1中可以看出，变量i的值为12，而变量j的值为11。在本例中，先是将变量i的值赋给变量j，再对i进行递增操作。所以本例中的关键代码相当于以下代码：
var i = 11; var j = i; i = i +1;
（2）先递增后使用：当运算符在操作数之前时，JavaScript会先对操作数做递增操作，再使用赋值后的操作数。
【实例3.9】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>先递增后使用</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 11; 07 var j = ++i; 08 document.write(i + "<br>"); 09 document.write(j + "<br>"); 10 --> 11 </script> 12 </head> 13 <body> 14 </body> 15 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为11。代码第7行定义了j变量，其值为++i。
图3.2 sample09.htm的运行结果
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample09.htm”里的内容，其运行结果如图3.2所示。在该图中可以看出，变量i的值为12，而变量j的值也为12。在本例中，是对变量i进行递增操作后再将变量i的值赋给变量j。所以本例中的关键代码相当于以下代码：
var i = 11; i = i +1; var j = i;
3.4.9 递减运算符
递减运算符（--）也是一个一元运算符，该运算符可以对操作数进行递减操作，即每次减1。递减运算符要求其操作数必须是变量、对象中的某个属性或数组中的某个元素，并且操作数的类型必须是数字型的，如果操作数类型不是数字型，递减运算符会将其先转换为数字型数据，再进行递减操作。递减运算符根据其相对于操作数的位置有两种不同的递减方式。
1. 先使用后递减
当运算符在操作数之后时，JavaScript会先使用操作数的值，再对操作数做递减操作。
【实例3.10】请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>先使用后递减</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 11; 07 var j = i--; 08 document.write(i + "<br>"); 09 document.write(j + "<br>"); 10 --> 11 </script> 12 </head> 13 <body> 14 </body> 15 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为11，代码第7行定义了j变量，其值为i--。--和++的使用方式相似，是递减的意思。
图3.3 sample10.htm的运行结果
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample10.htm”里的内容，其运行结果如图3.3所示。从该图中可以看出，变量i的值为10，而变量j的值为11。在本例中，先是将变量i的值赋给变量j，再对i进行递减操作。所以本例中的关键代码相当于以下代码：
var i = 11; var j = i; i = i -1;
2. 先递减后使用
当运算符在操作数之前时，JavaScript会先对操作数做递减操作，再使用赋值后的操作数。
【实例3.11】请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>先递减后使用</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 11; 07 var j = --i; 08 document.write(i + "<br>"); 09 document.write(j + "<br>"); 10 --> 11 </script> 12 </head> 13 <body> 14 </body> 15 </html>
【代码说明】代码第6行定义了i变量，并直接赋值为11。代码第7行定义了j变量，其值为--i。--i和++i的使用方式相似，是先执行递减操作的运算符。
图3.4 sample11.htm的运行结果
【运行效果】以上代码为本书配套代码文件目录“代码\第03章\sample11.htm”里的内容，其运行结果如图3.4所示。从该图中可以看出，变量i的值为10，而变量j的值也为10。在本例中，是将变量i的进行递减操作后再将变量i的值赋给变量j。所以本例中的关键代码相当于以下代码：
var i = 11; i = i -1; var j = i;