在JavaScript中，要完成各种各样的运算，是离不开运算符的。运算符用于将一个或几个值进行运算，从而得出所需要的结果值。就像我们的数学，也需要加减乘除这些运算符才可以运算。不过对于JavaScript来说，我们需要遵循计算机语言运算的一套方法。
在JavaScript中，运算符指的是“变量”或“值”进行运算操作的符号。其中，常见的运算符有以下5种。
一、算术运算符
在JavaScript中，算术运算符一般用于实现“数学”运算，包括加、减、乘、除等，如下表所示。
| 运算符 | 说明 | 举例 |
|---|---|---|
| + | 加 | 10+5 //返回15 |
| － | 减 | 10-5 //返回5 |
| * | 乘 | 10*5 //返回50 |
| / | 除 | 10/5 //返回2 |
| % | 求余 | 10%4 //返回2 |
| ++ | 自增 | var i=10;i++; //返回11 |
| -- | 自减 | var i=10;i--; //返回9 |
在JavaScript中，乘号是星号（*），而不是×，除号是斜杠（/），而不是÷，所以小伙伴们不要搞混了。为什么要这样定义呢？这是因为JavaScript这门语言的开发者，是希望尽量使用键盘已有的符号来表示这些运算符。大家好好看看自己的键盘就明白了。
对于算术运算符，我们需要重点掌握这3种：加法运算符、自增运算符、自减运算符。
1．加法运算符
在JavaScript中，加法运算符并非想象中那么简单，我们需要注意3点。
数字 + 数字 = 数字 字符串 + 字符串 = 字符串 字符串 + 数字 = 字符串
也就是说，当一个数字加上另外一个数字时，运算规则跟数学上的相加一样，例如：
var num = 10 + 5; //num的值为15
当一个字符串加上另外一个字符串时，运算规则是将两个字符串连接起来，例如：
var str = "从0到1" + "系列图书"; //str的值为"从0到1系列图书"
当一个字符串加上一个数字时，JavaScript会将数字变成字符串，然后再连接起来，例如：
var str = "今年是" + 2018 //str的值为"今年是2018"（这是一个字符串）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = 10 + 5;
var b = "从0到1" + "系列图书";
var c = "今年是" + 2018;
document.write(a + "<br/>" + b + "<br/>" + c);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
在这个例子中，可能有些小伙伴不太懂
document.write(a + "\<br/\>" + b + "\<br/\>" +c);
这一句代码是什么意思。实际上，这一句代码可以等价于：
document.write("15\<br/\>从0到1系列图书\<br/\>今年是2018");
小伙伴们好好根据上面加法运算符的3个规则，就会觉得很简单了。以后呢，如果你想往字符串里面塞点东西，就应该用加号连接，然后用英文引号断开来处理，这是经常使用的一个技巧，这个技巧也叫“字符串拼接”。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var str = "2018" + 1000;
document.write(str);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
"2018"是一个字符串，而不是数字，大家不要被表象给蒙蔽了双眼啦！
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = 10;
var b = 4;
var n1 = a + b;
var n2 = a - b;
var n3 = a * b;
var n4 = a / b;
var n5 = a % b;
document.write("a+b=" + n1 + "<br/>");
document.write("a-b=" + n2 + "<br/>");
document.write("a*b=" + n3 + "<br/>");
document.write("a/b=" + n4 + "<br/>");
document.write("a%b=" + n5 );
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
注意，“a+b=”、“a-b=”、"a*b="等这些由于加上了英文双引号，所以都是字符串。
2. 自增运算符
双加号（++）是自增运算符，表示在“原来的值”的基础上再加上1。i++等价于i=i+1自增运算符有以下两种情况。
（1）i++
i++指的是在使用i之后，再让i的值加上1。
例如：
i=1;
j=i++;
上面这段代码等价于：
i=1;
j=i;
i=i+1;
因此，上面执行的结果是：i=2，j=1。
（2）++i
“++i”指的是在使用i之前，先让i的值加上1。例如：
i=1;
j=++i;
上面这段代码等价于：
i=1;
i=i+1; //i=1+1，也就是i=2了
j=i; //由于此时i的值变为2了，所以j为2
因此，上面执行的结果是：i=2，j=2。
对于j=++i和j=i++，小伙伴们一定要分清楚。可以这样简单记忆：++在i的左边（前面），就是先使用i=i+1，而后使用j=i；++在i的右边（后面），就是后使用i=i+1，而先使用j=i。i=i+1的使用位置，是根据++的使用位置来决定的。
3．自减运算符
双减号（--）是自减运算符，表示在“原来的值”的基础上再减去1。i--等价于i=i-1。自减运算符同样也有以下两种情况。
（1）i--
“i--”指的是在使用i之后，再让i的值减去1。例如：
i=1;
j=i--;
上面这段代码等价于：
i=1;
j=i;
i=i-1;
因此，上面执行的结果是：i=0，j=1。
（2）--i
“--i”指的是在使用i之前，先让i的值减去1。
例如：
i=1;
j=--i;
上面这段代码等价于：
i=1;
i=i-1; //i=1-1，也就是i=0了
j=i; //由于此时i的值变为0了，所以j为0
因此，上面执行的结果是：i=0，j=0。
“--”与“++”使用方法是一样的，大家可以对比理解一下。
二、赋值运算符
在JavaScript中，赋值运算符用于将右边表达式的值保存到左边的变量中去，如下表所示。
| 运算符 | 举例 |
|---|---|
| = | var str=“绿叶学习网” |
| += | var a+=b等价于var a=a+b |
| -= | var a-=b等价于var a=a-b |
| *= | var a*=b等价于var a=a*b |
| /= | var a/=b等价于var a=a/b |
上面我们只是列举了常用的赋值运算符，对于不常用的就不列出来了，以免增加小伙伴们的记忆负担。在这本书中，我们都是采用这种方式：不常用的不会啰嗦，重要的则会反复强调。
var a+=b;其实就是var a=a+b;的简化形式，+=、-=、*=、/=这几个运算符其实就是为了简化代码而出现的，大多数有经验的开发人员都喜欢用这种简写形式。对于初学者来说，我们还是要熟悉一下这种写法，以免看不懂别人的代码。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = 10;
var b = 5;
a += b;
b += a;
document.write("a的值是" + a + "<br/>b的值是" + b);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
首先我们初始化了变量a的值为10，变量b的值为5。当执行a+=b后，此时a的值为15（10+5），b的值没有变化，依旧是5。
由于程序是从上而下地执行的，当执行b+=a;时，由于之前a的值已经变为15了，因此执行后，a的值为15，b的值为20（15+5）。
这里小伙伴们要知道一点：a和b都是变量，它们的值是会随着程序的执行而变化的。
三、比较运算符
在JavaScript中，比较运算符用于将运算符两边的值或表达式进行比较，如果比较结果是对的，则返回true；如果比较结果是错的，则返回false。true和false是布尔值，前面我们已经介绍了。比较运算符如下表所示。
| 运算符 | 说明 | 举例 |
|---|---|---|
| > | 大于 | 2>1 //返回true |
| < | 小于 | 2<1 //返回false |
| >= | 大于等于 | 2>=2 //返回true |
| <= | 小于等于 | 2<=2 //返回true |
| == | 等于 | 1==2 //返回false |
| != | 不等于 | 1!=2 //返回true |
等号（=）是赋值运算符，用于将右边的值赋值给左边的变量。双等号（==）是比较运算符，用于比较左右两边的值是否相等。如果想要比较两个值是否相等，写成a=b是错误的，正确写法应该是a==b。很多初学者都会犯这个低级错误，这个坑已经给大家指出来了，以后就不要再勇敢地往前踩了啊。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = 10;
var b = 5;
var n1 = (a > b);
var n2 = (a == b);
var n3 = (a != b);
document.write("10>5：" + n1 + "<br/>");
document.write("10==5：" + n2 + "<br/>");
document.write("10!=5：" + n3);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
对于一条语句，都是先运算右边，然后再将右边结果赋值给左边变量。
四、逻辑运算符
在JavaScript中，逻辑运算符用于执行“布尔值的运算”，它常常和比较运算符结合在一起使用。常见逻辑运算符有3种，如下表所示。
| 运算符 | 说明 |
|---|---|
| && | “与”运算 |
| || | “或”运算 |
| ! | “非”运算 |
1．“与”运算
在JavaScript中，与运算用双与号（&&）表示。如果双与号（&&）两边的值都为true，则结果返回true；如果有一个为false或者两个都为false，则结果返回false。
真&&真 → 真 真&&假 → 假 假&&真 → 假 假&&假 → 假
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = 10;
var b = 5;
var c = 5;
var n = (a < b) && (b == c);
document.write(n);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
var n = (a < b) && (b == c);等价于var n = (10 < 5) && (5 == 5);，由于(10 <5)返回结果为false而(5==5)返回结果为true，所以var n = (a < b) && (b == c);最终等价于var n = false&&true;。根据与运算的规则，n最终的值为false。
2、“或”运算
在JavaScript中，或运算用双竖杠（||）表示。如果双竖杠（||）两边的值都为false，则结果返回false；如果有一个为true或者两个都为true，则结果返回true。
真||真 → 真 真||假 → 真 假||真 → 真 假||假 → 假
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = 10;
var b = 5;
var c = 5;
var n = (a < b) || (b == c);
document.write(n);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
var n = (a < b) ||(b == c);等价于var n = (10 < 5) || (5 == 5);，由于(10 < 5)返回结果为false而(5==5)返回结果为true，所以var n = (a < b) || (b == c);最终等价于var n = false||true;。根据或运算的规则，n最终的值为true。
3、“非”运算
在JavaScript中，非运算用英文叹号（!）表示。非运算跟与运算、或运算不太一样，非运算操作的对象只有一个。当英文叹号（!）右边的值为true时，最终结果为false；当英文叹号（!）右边的值为false时，最终结果为true。
!真 → 假 !假 → 真
这个其实就是很简单的啦，直接取反就行。这家伙就是专门跟你唱反调的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var a = 10;
var b = 5;
var c = 5;
var n = !(a < b) && !(b == c);
document.write(n);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
var n = !(a < b) && !(b == c);等价于var n =!(10 < 5) && !(5 == 5);，也就是var n = !false&&!true;。由于!false的值为true，!true的值为false。因此最终等价于var n = true&&false;，也就是false。
当我们把var n = !(a < b) && !(b ==c);这句代码中的&&换成||后，返回结果为true，小伙伴们可以自行测试一下。此外，我们也不要被这些看起来复杂的运算吓到了。实际上，再复杂的运算，一步一步来，也是非常简单的。
对于与运算、或运算和非运算，我们可以总结出以下5点。
- （1）true的!为false，false的!为true。
- （2）a&&b：a、b全为true时，结果为true，否则结果为false。
- （3）a||b：a、b全为false时，结果为false，否则结果为true。
- （4）a&&b：系统会先判断a，再判断b。如果a为false，则系统不会再去判断b。
- （5）a||b：系统会先判断a，再判断b。如果a是true，则系统不会再去判断b。
最后的两条是非常有用的技巧，在后续学习中我们经常会碰到，这里简单认识一下即可。
五、条件运算符
除了上面这些常用的运算符，JavaScript还为我们提供了一种特殊的运算符：条件运算符。条件运算符，也叫“三目运算符”。在JavaScript中，条件运算符用英文问号（?）表示。
语法：
var a = 条件 ? 表达式1 : 表达式2;
说明：
当条件为true时，我们选择的是“表达式1”，也就是“var a=表达式1”；当条件为false时，我们选择的是“表达式2”，也就是“var a=表达式2”。注意，a只是一个变量名，这个变量名可以换成你自己想要的名字。
条件运算符其实是很简单的，也就是“二选一”。就好比有两个女生在你面前，也许你都喜欢，但是无奈最终只能选择其中一个做女朋友。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var result = (2 > 1) ? "小芳" : "小美";
document.write(result);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
由于条件（2>1）返回true，所以最终选择的是“小芳”。
