前端对按位运算符的基本了解

128 阅读4分钟

前言

位运算符在我们的实际开发中貌似运用较少,但是其实在某些方面,对代码的运行效率会大大提高。下面是对七个位运算符的简单介绍。

各个按位运算符的算法

1. &

将十进制转化为二进制,每个对应的位相比较,都为1结果就为1,否则为0

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// 3的二进制表示为: 00000000 00000000 00000000 00000011
// -----------------------------
// 1的二进制表示为: 00000000 00000000 00000000 00000001
console.log(1 & 3)     // 1

2. |

位中有一个为1,就是1,否则为0

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// 3的二进制表示为: 00000000 00000000 00000000 00000011
// -----------------------------
// 3的二进制表示为: 00000000 00000000 00000000 00000011
console.log(1 | 3)     // 3

3. ^

仅有一个1时结果为1,其他都是0

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// 3的二进制表示为: 00000000 00000000 00000000 00000011
// -----------------------------
// 2的二进制表示为: 00000000 00000000 00000000 00000010
console.log(1 ^ 3)     // 2

4. ~

1变0, 0变1,也就是求二进制的反码。

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// 3的二进制表示为: 00000000 00000000 00000000 00000011
// -----------------------------
// 1反码二进制表示: 11111111 11111111 11111111 11111110
// 由于第一位(符号位)是1,所以这个数是一个负数。JavaScript 内部采用补码形式表示负数,即需要将这个数减去1,再取一次反,然后加上负号,才能得到这个负数对应的10进制值。
// -----------------------------
// 1的反码减1:     11111111 11111111 11111111 11111101
// 反码取反:       00000000 00000000 00000000 00000010
// 表示为10进制加负号:-2
console.log(~ 1)     // -2

简单记忆:一个数与自身的取反值相加等于-1

5. <<

所有位数向左移动指定次数。丢弃高位,低位补0:即按二进制形式把所有的数字向左移动对应的位数,高位移出(舍弃),低位的空位补零。

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// -----------------------------
// 2的二进制表示为: 00000000 00000000 00000000 00000010
console.log(1 << 1)     // 2

6. 有符号右移>>

向右被移出的位被丢弃,拷贝最左侧的位以填充左侧。即用符号位填充左侧空出的位置。

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// -----------------------------
// 0的二进制表示为: 00000000 00000000 00000000 00000000
console.log(1 >> 1)     // 0

7. 无符号右移>>>

向右被移除的位被丢弃,左侧用0填充,所以结果一定是非负数

对于非负数,有符号右移和无符号右移总是返回相同的结果。例如, 9 >>> 2 得到 2 和 9 >> 2 相同。

位运算符在js中的妙用

  1. 使用&运算符判断一个数的奇偶
// 偶数 & 1 = 0
// 奇数 & 1 = 1
console.log(2 & 1)    // 0js
console.log(3 & 1)    // 1
复制代码

2.使用~, >>, <<, >>>, |来取整

console.log(~~ 6.83)    // 6
console.log(6.83 >> 0)  // 6
console.log(6.83 << 0)  // 6
console.log(6.83 | 0)   // 6
// >>>不可对负数取整
console.log(6.83 >>> 0)   // 6
复制代码

3.使用^来完成值交换

var a = 5
var b = 8
a ^= b
b ^= a
a ^= b
console.log(a)   // 8
console.log(b)   // 5

参考文章:

位运算符在JS中的妙用

JS位运算符的妙用与原理