运算符是用来告诉 JavaScript 引擎执行某种操作的符号，例如加号（+）表示执行加法运算，减号（-）表示执行减法运算等，本节我们就来介绍一下 JavaScript 中不同的运算符。

1. 算术运算符

算数运算符用来执行常见的数学运算，例如加法、减法、乘法、除法等，下表中列举了 JavaScript 中支持的算术运算符：

cabaa626624269b6d79fec2620f24301_38895dd1d811663c8741997f71fa8734.png

示例代码如下：

var x = 10, y = 4;
console.log("x + y =", x + y);  // 输出：x + y = 14
console.log("x - y =", x - y);  // 输出：x - y = 6
console.log("x * y =", x * y);  // 输出：x * y = 40
console.log("x / y =", x / y);  // 输出：x / y = 2.5
console.log("x % y =", x % y);  // 输出：x % y = 2

2. 赋值运算符

赋值运算符用来为变量赋值，下表中列举了 JavaScript 中支持的赋值运算符：

53f05a6c3c3c0ab499555a7c6b92b107_ed929fb8209df44fcab097d5fa163f8a.png

示例代码如下：

var x = 10;
x += 20;
console.log(x);  // 输出：30

var x = 12, y = 7;
x -= y;
console.log(x);  // 输出：5

x = 5;
x *= 25;
console.log(x);  // 输出：125

x = 50;
x /= 10;
console.log(x);  // 输出：5

x = 100;
x %= 15;
console.log(x);  // 输出：10

3. 字符串运算符

JavaScript 中的 + 和 += 运算符除了可以进行数学运算外，还可以用来拼接字符串，其中：

+ 运算符表示将运算符左右两侧的字符串拼接到一起；

+= 运算符表示先将字符串进行拼接，然后再将结果赋值给运算符左侧的变量。

示例代码如下：

var x = "Hello ";
var y = "World!";
var z = x + y;
console.log(z);  // 输出：Hello World!
x += y;
console.log(x);  // 输出：Hello World!

4. 自增、自减运算符

自增、自减运算符用来对变量的值进行自增（+1）、自减（-1）操作，下表中列举了 JavaScript 中支持的自增、自减运算符：

a926af88c6cc07c3c6653d12e5b5c3aa_9c8073d3f6a7edc63f51a8c685cd24cd.png

示例代码如下：

var x;
x = 10;
console.log(++x);  // 输出：11
console.log(x);    // 输出：11

x = 10;
console.log(x++);  // 输出：10
console.log(x);    // 输出：11

x = 10;
console.log(--x);  // 输出：9
console.log(x);    // 输出：9

x = 10;
console.log(x--);  // 输出：10
console.log(x);    // 输出：9

5. 比较运算符

比较运算符用来比较运算符左右两侧的表达式，比较运算符的运算结果是一个布尔值，结果只有两种，不是 true 就是 false。下表中列举了 JavaScript 中支持的比较运算符：

76dcb317280812e1d1b33f079da908ae_406265ff9a1ec1da68d250fc40d3e3b2.png

示例代码如下：

var x = 25;
var y = 35;
var z = "25";
console.log(x == z);  // 输出： true
console.log(x === z); // 输出： false
console.log(x != y);  // 输出： true
console.log(x !== z); // 输出： true
console.log(x < y);   // 输出： true
console.log(x > y);   // 输出： false
console.log(x <= y);  // 输出： true
console.log(x >= y);  // 输出： false

6. 逻辑运算符

逻辑运算符通常用来组合多个表达式，逻辑运算符的运算结果是一个布尔值，只能有两种结果，不是 true 就是 false。下表中列举了 JavaScript 中支持的逻辑运算符：

3454263f2bb5f64f11284e5c92fedfe0_80f0af2d1646c02108a7675543d91044.png

示例代码如下：

var year = 2021;
// 闰年可以被 400 整除，也可以被 4 整除，但不能被 100 整除
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
    console.log(year + " 年是闰年。");
} else{
    console.log(year + " 年是平年。");
}

7. 三元运算符

三元运算符（也被称为条件运算符），由一个问号和一个冒号组成，语法格式如下：

条件表达式 ? 表达式1 : 表达式2 ;

如果“条件表达式”的结果为真（true），则执行“表达式1”中的代码，否则就执行“表达式2”中的代码。

更多关于三元运算符的内容请转到：JS条件运算符（?:）详解

示例代码如下：

var x = 11, y = 20;
x > y ? console.log("x 大于 y") : console.log("x 小于 y");  // 输出：x 小于 y

条件运算符是唯一的三元运算符，其语法格式如下：

b ? x : y

b 操作数必须是一个布尔型的表达式，x 和 y 是任意类型的值。

如果操作数 b 的返回值为 true，则执行 x 操作数，并返回该表达式的值。
如果操作数 b 的返回值为 false，则执行 y 操作数，并返回该表达式的值。

定义变量 a，然后检测 a 是否被赋值，如果赋值则使用该值；否则设置默认值。

var a = null;  //定义变量a
typeof a != "undefined" ? a = a : a = 0;  //检测变量a是否赋值，否则设置默认值
console.log(a);  //显示变量a的值，返回null

条件运算符可以转换为条件结构：

if(typeof a != "undefined"){  //赋值
    a = a;
}else{  //没有赋值
    a = 0;
}
console.log(a);

也可以转换为逻辑表达式：

(typeof a != "undefined") && (a =a) || (a = 0);  //逻辑表达式
console.log(a);

在上面表达式中，如果 a 已赋值，则执行 (a = a) 表达式，执行完毕就不再执行逻辑或运算符后面的 (a = 0) 表达式；如果 a 未赋值，则不再执行逻辑与运算符后面的 (a = a) 表达式，转而执行逻辑或运算符后面的表达式 (a = 0)。

注意：
在实战中需要考虑假值的干扰。使用 typeof a != “undefined” 进行检测，可以避开变量赋值为 false、null、“”、NaN等假值时，也被误认为没有赋值。

8. 位运算符

位运算符用来对二进制位进行操作，JavaScript 中支持的位运算符如下表所示：

55e1ddc1e258b338485724eb288e2447_c484d56100a326ab29d7617cded58022.png

示例代码如下：

var a = 5 & 1,
    b = 5 | 1,
    c = 5 ^ 1,
    d = ~ 5,
    e = 5 << 1,
    f = 5 >> 1,
    g = 5 >>> 1;
console.log(a);  // 输出：1
console.log(b);  // 输出：5
console.log(c);  // 输出：4
console.log(d);  // 输出：-6
console.log(e);  // 输出：10
console.log(f);  // 输出：2
console.log(g);  // 输出：2

1) JS移位运算符

移位运算就是对二进制进行有规律低移位。移位运算可以设计很多奇妙的效果，在图形图像编程中应用广泛。

“<<”运算符

“<<”运算符执行左移位运算。在移位运算过程中，符号位始终保持不变。如果右侧空出位置，则自动填充为 0；超出 32 位的值，则自动丢弃。

把数字 5 向左移动 2 位，则返回值为 20。

console.log(5 << 2);  //返回值20

用算式进行演示，如图所示。

c003576eecb5d8f49d871750845cb922_db7a9cc16893572b59d1d152d344f4a1.png

“>>”运算符

“>>”运算符执行有符号右移位运算。与左移运算操作相反，它把 32 位数字中的所有有效位整体右移，再使用符号位的值填充空位。移动过程中超出的值将被丢弃。

把数值 1000 向右移 8 位，则返回值为 3。

a92e016a42ee00933d508cb8d34c2418_f731595336116f8c5165c495964e314d.png

console.log(1000 >> 8);  //返回值3

用算式进行演示，如图所示。

a92e016a42ee00933d508cb8d34c2418_f731595336116f8c5165c495964e314d.png

把数值 -1000 向右移 8 位，则返回值为 -4。

console.log(-1000  >> 8);  //返回值 -4

用算式进行演示，如图所示。当符号位值为 1 时，则有效位左侧的空位全部使用 1 进行填充。

e873c9236ba7c0efe0f3882ec12bdbf5_e7d2099528f07cd2772945c1f3c6c981.png

“>>>”运算符

“>>>”运算符执行五符号右移位运算。它把无符号的 32 位整数所有数位整体右移。对于无符号数或正数右移运算，无符号右移与有符号右移运算的结果是相同的。

下面两行表达式的返回值是相同的。

console.log(1000 >> 8);  //返回值3
console.log(1000 >> 8);  //返回值3

对于负数来说，无符号右移将使用 0 来填充所有的空位，同时会把负数作为正数来处理，所得结果会非常大所以，使用无符号右移运算符时要特别小心，避免意外错误。

console.log(-1000 >> 8);   //返回值 -4
console.log(-1000 >>> 8);  //返回值 16777212

用算式进行演示，如图所示。左侧空位不再用符号位的值来填充，而是用 0 来填充。

c9135212f58ce3b921e6bdb66eff868d_1033a0d25fd21c4a19e3c94cb2f490f3.png

2) JS逻辑位运算符

位运算就是对二进制数执行计算，是整数的逐位运算。例如，1+1=2，在十进制计算中是正确的，但是在二进制计算中，1+1=10；对于二进制数 100 取反，等于 001，而不是 -100。

位运算符有 7 个，分为两类：

逻辑位运算符：位与（&）、位或（|）、位异或（^）、非位（~）
移位运算符：左移（<<）、右移（>>）、无符号右移（>>>）

逻辑位运算符与逻辑运算符的运算方式是相同的，但是针对的对象不同。逻辑位运算符针对的是二进制的整数值，而逻辑运算符针对的是非二进制的值。

“&”运算符

“&”运算符（位与）用于对两个二进制操作数逐位进行比较，并根据下表所示的换算表返回结果。

第一个数的位值	第二个数的位值	运算结果
1	1	1
1	0	0
0	1	0
0	0	0

在位运算中，数值 1 表示 true，0 表示 false，反之亦然。

12 和 5 进行位与运算，则返回值为 4。

console.log(12 & 5);  //返回值4

下图以算式的形式解析了 12 和 5 进行位与运算的过程。通过位与运算，只有第 3 位的值为全为 true，故返回 true，其他位均返回 false。

52d172f958bd29109ec250ffef4162e6_d5300d0034e5b1338544e202ce9cc05a.png

“|”运算符

“|”运算符（位或）用于对两个二进制操作数逐位进行比较，并根据如表格所示的换算表返回结果。

“|”运算符

第一个数的位值	第二个数的位值	运算结果
1	1	1
1	0	1
0	1	1
0	0	0

12 和 5 进行位或运算，则返回值为 13。

console.log(12 | 5);  //返回值13

下图以算式的形式解析了 12 和 5 进行位或运算的过程。通过位或运算，除第 2 位的值为 false 外，其他位均返回 true。

第一个数的位值	第二个数的位值	运算结果
1	1	1
1	0	1
0	1	1
0	0	0

“^”运算符

“^”运算符（位异或）用于对两个二进制操作数逐位进行比较，并根据如表格所示的换算表返回结果。

第一个数的位值	第二个数的位值	运算结果
1	1	0
1	0	1
0	1	1
0	0	0

12 和 5 进行位异或运算，则返回值为 9。

console.log(12 ^ 5);  //返回值9

下图以算式的形式解析了 12 和 5 进行位异或运算的过程。通过位异或运算，第 1、4 位的值为 true，而第 2、3 位的值为 false。

32f251dde3712f4d0498b0699edabacb_da2cebda372e199e53bc91889a90e77a.png

“~”运算

“~”运算符（位非）用于对一个二进制操作数逐位进行取反操作。

第 1 步：把运算数转换为 32 位的二进制整数。

第 2 步：逐位进行取反操作。

第 3 步：把二进制反码转换为十进制浮点数。

对 12 进行位非运算，则返回值为 -13。

console.log( ~ 12 );  //返回值-13

下图以算式的形式解析了对 12 进行位非运算的过程。

b85e5234f5eb6d8b604861793243cb7e_90498ed57a360c83526d553048d6abb0.png

位非运算实际上就是对数字进行取负运算，再减 1。例如：

console.log( ~ 12 == 12-1);  //返回true