JavaScript 运算符

在 JavaScript 中，运算符指的是 “变量” 或 “值” 进行运算操作的符号。要完成各种各样的运算，是离不开运算符的。运算符用于将一个或几个值进行运算，从而得出所需要的结果值。就像我们的数学，也需要加减乘除这些运算符才可以运算。

JavaScript 运算符

对于 JavaScript 来说，常见的运算符有以下 5 种。

算术运算符。
赋值运算符。
比较运算符。
逻辑运算符。
条件运算符。

JavaScript 算术运算符

在 JavaScript 中，算术运算符一般用于实现 “数学” 运算，包括加、减、乘、除等，如下表所示。

算术运算符
运算符	说明	示例
+	加	10 + 5 // 返回 15
－	减	10 - 5 // 返回 5
*	乘	10 * 5 // 返回 50
/	除	10 / 5 // 返回 2
%	求余	10 % 4 // 返回 2
++	自增	const i = 10; i++; // 返回 11
--	自减	const i = 10; i--; // 返回 9

注意: 在 JavaScript 中，乘号是 “*” ，而不是 “×”。除号是 “/” ，而不是 “÷” ，所以小伙伴们不要搞混了。为什么要这样定义呢？这是因为 JavaScript 这门语言的开发者，是希望尽量使用键盘已有的符号来表示这些运算符。大家好好看看自己的键盘就明白了。

对于算术运算符，我们需要重点掌握这 3 种：加法运算符、自增运算符、自减运算符。

1. 加法运算符

在 JavaScript 中，加法运算符并非想象中那么简单，我们需要清楚以下 3 点。

数字 + 数字 = 数字
字符串 + 字符串 = 字符串
字符串 + 数字 = 字符串

也就是说，当一个数字加上另外一个数字时，运算规则跟数学上的相加一样，例如：

const num = 10 + 20;   // num的值为 30

当一个字符串加上另外一个字符串时，运算规则是将两个字符串连接起来，例如：

const str = "绿叶网" + "JavaScript";   // str的值为 "绿叶网JavaScript"

当一个字符串加上一个数字时，JavaScript 会先将数字转换成字符串，然后再连接起来，例如：

const str = "今年是" + 2030    // str的值为"今年是2030"（这是一个字符串）

示例 1：使用加法运算符

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 10 + 20;
        const b = "绿叶网" + "JavaScript";
        const c = "今年是" + 2030;

        console.log(a);
        console.log(b);
        console.log(c);
    </script>
</body>
</html>

运行结果如下。

30
绿叶网JavaScript
今年是2030

示例 2：字符串与数字相加

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "2030" + 1000;
        console.log(str);
    </script>
</body>
</html>

运行结果如下。

20301000

分析：

需要注意的是，"2030" 是一个字符串，而不是一个数字，小伙伴们可不要被表象给蒙蔽了双眼！

示例 3：数学运算

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 10;
        const b = 4;

        const n1 = a + b;
        const n2 = a - b;
        const n3 = a * b;
        const n4 = a / b;
        const n5 = a % b;

        console.log("a + b =", n1);
        console.log("a - b =", n2);
        console.log("a * b =", n3);
        console.log("a / b =", n4);
        console.log("a % b =", n5 );
    </script>
</body>
</html>

运行结果如下。

a + b = 14
a - b = 6
a * b = 40
a / b = 2.5
a % b = 2

分析：

特别注意，"a + b ="、"a - b ="、"a * b =" 等这些由于加上了英文双引号，所以它们都是字符串来的。

2. 自增运算符

双加号（++）是自增运算符，表示在 “原来的值” 的基础上再加上 1。其中，i++ 等价于 i = i+1 自增运算符有以下 2 种情况。

（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++; 是完全不一样的，小伙伴们一定要分清楚。我们可以这样简单记忆：

j = ++i：当 ++ 在 i 的左边（前面）时，表示先使用 i = i + 1，而后使用 j = i。
j = i++：当 ++ 在 i 的右边（后面），表示后使用 i = i + 1，而先使用 j = i。

i = i + 1 的使用位置，是根据 ++ 的使用位置来决定的。

3. 自减运算符

双减号（--）是自减运算符，表示在 “原来的值” 的基础上再减去 1。其中，i-- 等价于 i = i - 1。自减运算符同样也有以下 2 种情况。

（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 赋值运算符

在 JavaScript 中，赋值运算符用于将右边表达式的值保存到左边的变量中去，如下表所示。

JavaScript 赋值运算符
运算符	示例
=	let str = "绿叶网"
+=	let a += b 等价于 let a = a + b
-=	let a -= b 等价于 let a = a - b
*=	let a = b 等价于 let a = a b
/=	let a /= b 等价于 let a = a / b

上表只是列举了常用的赋值运算符，对于不常用的就不列出来了，以免增加小伙伴们的记忆负担。在这本教程中，我们都是采用这种方式：不常用的不会啰嗦，重要的则会反复强调。

let a += b; 其实就是 let a = a + b; 的简写形式，+=、-=、*=、/= 这几个运算符其实就是为了简化代码而出现的，大多数有经验的开发人员都喜欢用这种简写形式。对于初学者来说，我们还是要熟悉一下这种写法，避免看不懂别人的代码。

示例 4：使用赋值运算符

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let a = 10;
        let b = 5;
        a += b;
        b += a;

        console.log("a 的值是", a);
        console.log("b 的值是", b);
    </script>
</body>
</html>

运行结果如下。

a 的值是 15
b 的值是 20

分析：

首先我们初始化了变量 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 比较运算符

在 JavaScript 中，比较运算符用于将运算符两边的值或表达式进行比较，如果比较结果是对的，则返回 true；如果比较结果是错的，则返回 false。

true 和 false 是布尔值，前面我们已经介绍了。其中，比较运算符如下表所示。

JavaScript 比较运算符
运算符	说明	示例
>	大于	2 > 1 // 返回 true
<	小于	2 < 1 // 返回 false
>=	大于等于	2 >= 2 // 返回 true
<=	小于等于	2 <= 2 // 返回 true
==	等于	1 == 2 // 返回 false
!=	不等于	1 != 2 // 返回 true
===	全等	10 === "10" // 返回 false
!==	不全等	10 !== "10" // 返回 true

在现代 JavaScript 开发中，严禁使用 “==” 和 “!=”，这是因为这两个运算符会进行 “隐式类型转换”。例如 0 == "0" 返回 true，false == 0 返回 true，[] == 0 也是返回 true。这对初学的小伙伴来说，是一个巨大的逻辑陷阱。

而 “===” 和 “!==” 则不会进行类型转换，只有 “类型” 和 “值” 都一样的时候，才会返回 true。在实际开发中，为了避免因类型转换导致的 bug，请无脑使用 “===“ 和 “!==”。

示例 5：使用比较运算符

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 10;
        const b = 5;

        const n1 = (a > b);
        const n2 = (a === b);
        const n3 = (a !== b);

        console.log("10 > 5：", n1);
        console.log("10 === 5：", n2);
        console.log("10 !== 5：", n3);
    </script>
</body>
</html>

运行结果如下。

10 > 5：true
10 === 5：false
10 !== 5：true

分析：

对于一条语句来说，JavaScript 都是先运算右边，然后再将右边结果赋值给左边变量。

JavaScript 逻辑运算符

在 JavaScript 中，逻辑运算符用于执行 “布尔值的运算”，它常常和比较运算符结合在一起使用。常用的逻辑运算符有 3 种，如下表所示。

JavaScript 逻辑运算符
运算符	说明
&&	“与” 运算
\|\|	“或” 运算
!	“非” 运算

1. “与” 运算

在 JavaScript 中，与运算用 “&&（双与号）” 表示。如果 “&&” 两边的值都为 true，则结果返回 true；如果有一个为 false 或者两个都为 false，则结果返回 false。

真 && 真 → 真
真 && 假 → 假
假 && 真 → 假
假 && 假 → 假

示例 6：使用与运算

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 10;
        const b = 5;
        const c = 5;

        const n = (a < b) && (b === c);
        console.log(n);
    </script>
</body>
</html>

运行结果如下。

false

分析：

const n = (a < b) && (b === c); 等价于 const n = (10 < 5) && (5 === 5);，由于 (10 < 5) 返回结果为 false 而 (5 === 5) 返回结果为 true，因此 const n = (a < b) && (b === c); 最终等价于 const n = false && true;。根据与运算的规则，n 最终的值为 false。

2. “或” 运算

在 JavaScript 中，或运算用 “||（双竖杠）” 表示。如果 “||” 两边的值都为 false，则结果返回 false；如果有一个为 true 或者两个都为 true，则结果返回 true。

真 || 真 → 真
真 || 假 → 真
假 || 真 → 真
假 || 假 → 假

示例 7：使用或运算

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 10;
        const b = 5;
        const c = 5;

        const n = (a < b) || (b === c);
        console.log(n);
    </script>
</body>
</html>

运行结果如下。

true

分析：

const n = (a < b) || (b === c); 等价于 const n = (10 < 5) || (5 === 5);，由于 (10 < 5) 返回结果为 false 而 (5 === 5) 返回结果为 true，因此 const n = (a < b) || (b === c); 最终等价于 const n = false || true;。根据或运算的规则，n 最终的值为 true。

3. “非” 运算

在 JavaScript 中，非运算用 “!（英文叹号）” 表示。非运算跟与运算、或运算不太一样，非运算操作的对象只有一个。当 “!” 右边的值为 true 时，最终结果为 false；当 “!” 右边的值为 false 时，最终结果为 true。

!真 → 假
!假 → 真

非运算非常简单，直接取反就可以了。这家伙就是专门跟你唱反调的。

示例 8：使用非运算

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = 10;
        const b = 5;
        const c = 5;

        const n = !(a < b) && !(b === c);
        console.log(n);
    </script>
</body>
</html>

运行结果如下。

false

分析：

const n = !(a < b) && !(b === c); 等价于 const n =!(10 < 5) && !(5 === 5);，也就是 const n = !false && !true;。由于 !false 的值为 true，!true 的值为 false。因此最终等价于 const n = true && false;，也就是 false。

当我们把 const n = !(a < b) && !(b === c); 这句代码中的 “&&” 换成 “||” 后，返回结果为 true，小伙伴们可以自行测试一下。此外，我们也不要被这些看起来复杂的运算吓到了。实际上，再复杂的运算，一步一步来，也是非常简单的。

对于与运算、或运算和非运算，我们可以总结出以下 5 点。

true 的 ! 为 false，false 的 ! 为 true。
a && b：a、b 全为 true 时，结果为 true，否则结果为 false。
a || b：a、b 全为 false 时，结果为 false，否则结果为 true。
a && b：会先判断 a，再判断 b。如果 a 为 false，则不会再去判断 b。
a || b：会先判断 a，再判断 b。如果 a 是 true，则不会再去判断 b。

最后两条是非常有用的技巧，在实际开发中经常会用到，这里简单认识一下即可。

JavaScript 条件运算符

除了上面这些常用的运算符，JavaScript 还为我们提供了一种特殊的运算符：条件运算符。条件运算符，也叫 “三目运算符”。在 JavaScript 中，条件运算符用 “?（英文问号）” 表示。

语法：

let a = 条件 ? 表达式1 : 表达式2;

说明：

当条件为 true 时，选择的是 “表达式1”，此时 “let a = 表达式1”；当条件为 false 时，选择的是 “表达式2”，此时 “let a = 表达式2”。注意，a 只是一个变量名，这个变量名可以换成你自己想要的名字。

条件运算符其实是很简单的，也就是 “二选一”。就好比有两个女生在你面前，也许你都喜欢，但无奈最终只能选择其中一个做女朋友。

示例 9：使用条件运算符

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const result = (2 > 1) ? "小红" : "小美";
        console.log(result);
    </script>
</body>
</html>

运行结果如下。

小红

分析：

由于条件（2>1）返回 true，所以最终选择的是 “小红”。

著名的 “0.1 + 0.2” 不等于 0.3

JavaScript 在进行小数（浮点数）运算时可能会有精度丢失，例如 0.1 + 0.2 的结果并不是 0.3，而是 0.30000000000000004。小伙伴们可以自行试一下：

console.log(0.1 + 0.2);

这实际上是计算机存储小数的通用问题。我们在涉及金额计算时，一定要特别注意。