JS中的逻辑位运算符和移位运算符

前几天在某刷题网站看到一篇题解，作者用的是移位运算+逻辑位运算，当时看的有点懵逼，移位运算是知道的，逻辑位运算有些不解，故特意了解了一下。 逻辑位运算符和移位运算符可以统称为位运算符，其中，逻辑位运算符有四种，移位运算符则有三种。

序号	类	运算符	名称
1	逻辑位运算符	&	位与
2	逻辑位运算符	|	位或
3	逻辑位运算符	^	位异或
4	逻辑位运算符	~	位非
5	移位运算符	<<	无符号左位移
6	移位运算符	>>	有符号右位移
7	移位运算符	>>>	无符号右位移

一、逻辑位运算符

1.& 位与运算符

// 类似于乘法，全一才为一
// 0 & 0 = 0
// 0 & 1 = 0
// 1 & 1 = 1

console.log(7 & 4);// 4

// 解析：
// 7 = ...0111B
// 4 = ...0100B
// ------------
// 4 = ...0100B

2.| 位或运算符

// 类似于加法，全零才为零
// 0 | 0 = 0
// 0 | 1 = 1
// 1 | 1 = 1

console.log(7 | 4);// 7

// 解析：
// 7 = ...0111B
// 4 = ...0100B
// ------------
// 7 = ...0111B

3.^ 位异或运算符

// 只有两位中的一位为一才为一
// 0 ^ 0 = 0
// 0 ^ 1 = 1
// 1 ^ 1 = 0

console.log(7 ^ 4);// 3

// 解析：
// 7 = ...0111B
// 4 = ...0100B
// ------------
// 3 = ...0011B

4.~ 位非运算符

JS会把十进制数转换为一个32位的二进制数，上面的只取到4位，4位之前全为0。因为上面的不管哪个运算中0和0运算的结果都是0，所以前面截去对最终结果没有影响。
可以看到~5的运算结果为1111 1111 1111 1111 1111 1111 1111 1010，有符号位的运算结果都为补码，所以结果为-((1 * 4) + (1 * 1)) - 1 = -6。

// 反转所有的位

console.log(~5);// -6

// 解析：
// 0000 0000 0000 0000 0000 0000 0000 0101  = 5
// ----------------------------------------
// 1111 1111 1111 1111 1111 1111 1111 1010  = -6 补码

二、移位运算符

5.<<无符号左位移运算符

// 二进制数左移，低位由0补齐
console.log(10 << 2);// 40
console.log(-10 << 2);// -40

// 解析：
// 1.易懂
// 左移一位是翻倍 10 + 10 = 20
// 再左移一位 20 + 20 = 40，若为负数，负号不参与运算 -10 << 2 = -40
// 2.原理(前面多位省略)
// ...001010B << 2
// ----------------
// ...101000B = 40

6.>>有符号右位移运算符

// 二进制数右移，正数时高位由0补齐，负数时高位由1补齐
console.log(10 >> 2);// 2

// 解析：(前面多位省略)
// ...001010B >> 2
// ----------------
// ...000010B = 2

console.log(-10 >> 2);// -3
// 解析：(前面多位省略)
// ...110101B >> 2
// ----------------
// ...111101B = -2 - 1 = -3

7.>>>无符号右位移运算符

无符号右位移运算符位移时将忽略符号，高位全部由0补齐

// 二进制数右移，高位由0补齐
console.log(10 >>> 2);// 2

// 解析：(前面多位省略)
// ...001010B >>> 2
// ----------------
// ...000010B = 2

console.log(-10 >>> 2);// 1073741821
// 解析：
// 1111 1111 1111 1111 1111 1111 1111 0101 >>> 2
// ---------------------------------------
// 0011 1111 1111 1111 1111 1111 1111 1101 = 1073741821