前端进阶必备技能-JS位运算

1. 前言

      众所周知，位运算是我们学计算机必学的东西，平时的数组运算，其实是要先转换成二进制再进行运算的，而位运算就是直接进行二进制运算，位运算是低级的运算操作，所以速度往往也是最快的（相对其它运算如加减乘除来说），并且借助位运算的特性还能实现一些算法。恰当地使用运算有很多好处，前人用二进制、位运算给我们了一个操作简单的计算机，但我们却很少接触位运算了。所有的位运算都是在二进制下来进行运算的，再二进制下只有0和1。
下面通过一些实例来加深对位运算的理解。

关于二进制

      二进制是计算技术中广泛采用的一种数制。二进制数据是用0和1两个数码来表示的数。它的基数为2，进位规则是“逢二进一”，借位规则是“借一当二”，由18世纪德国数理哲学大师莱布尼兹发现。当前的计算机系统使用的基本上是二进制系统，数据在计算机中主要是以补码的形式存储的。计算机中的二进制则是一个非常微小的开关，用“开”来表示1，“关”来表示0。

2. 位运算符表

运算符	含义	举例	规则
&	与	a&b	两个位都为1时，结果才为1。
|	或	a|b	两个位都为0时，结果才为0。
~	取反	~a	0变1，1变0。
^	异或	a^b	两个位相同为0，相异为1。
<<	左移位	a<<2	各二进位全部左移若干位，高位丢弃，低位补0。
>>	右移位	b>>4	各二进位全部右移若干位，对无符号数，高位补0，有符号数，右移补1
>>>	无符号右移位	x>>>2	各二进制全部右移若干位，高位补0，低位丢弃

2.1 位运算 - 逻辑结果参照

A	B	A&B	A|B	A^B
true	true	true	true	false
true	false	false	true	true
false	true	false	true	true
false	false	false	false	false

A	B	A&B	A|B	A^B	~A
0	0	0	0	0	1
1	0	0	1	1	0
0	1	0	1	1	1
1	1	1	1	0	0

2.2 位运算 - 实例

操作	结果	等同于	结果
5&1	1	0101 & 0001	0001
5 | 1	5	0101 | 0001	0101
5^1	4	0101 ^ 0001	0100
~5	10	~0101	1010
5<<1	10	0101<<1	1010
5>>1	2	0101>>1	0010
5>>>1	2	0101>>>1	0010

下面举几个例子，主要看下 AND 和 OR：

# 例子1
    A = 10001001
    B = 10010000
A | B = 10011001

# 例子2
    A = 10001001
    C = 10001000
A | C = 10001001
# 例子1
    A = 10001001
    B = 10010000
A & B = 10000000

# 例子2
    A = 10001001
    C = 10001000
A & C = 10001000

2.3 位运算基础

运算符 - 图解例

3. 位运算使用方法有哪些

3.1、 按非运算符~在项目里边也很好用。

比如我们一般写代码的话，判断数组里边是否存在某一个值，是这样判断的

let arr = [4,7,10]
if (arr.indexOf(7) > -1) {
    
    
  console.log('测试')
}//测试

其实我们可以写的更简洁一点:

let arr = [4,7,10]
if (~arr.indexOf(7)) {
    
    
  console.log('测试')
}

3.2、 按左移运算符 << 迅速得出2的次方

console.log(1 << 5)  // 32, 即 2的5次方
console.log(1 << 10) // 1024, 即 2的10次方

// 但是要注意使用
console.log(a = 2e10) // 20000000000
console.log(a << 2)  // -1604378624

3.3、按 ^ 切换变量 0 或 1

//if 判断
let show;
if (show) {
    
    
  show = 0;
} else {
    
    
  show = 1;
}
console.log(show) // 1

//三目运算符
show = show ? 0 : 1;
console.log(show) // 1
//可以换成^
show ^= 1;
console.log(show) //1

## 3.4、按 & 判断奇偶性 ```javascript console.log(7 & 1); // 1 console.log(8 & 1) ; // 0 ```

3.5、有符号左移(<<)

有符号左移会将32位二进制数的所有位向左移动指定位数。如：

var num = 2; // 二进制10
num = num << 6; // 二进制1000000，十进制128
console.log(num)
//另外
function ceshi(n) {
    
    
  return 1 << n;
}
console.log(ceshi(5))//32

3.6、有符号右移(>>)

有符号右移会将32位二进制数的所有位向右移动指定位数。如：

var num = 64; // 二进制1000000
num = num >> 7; // 二进制10，十进制0
console.log(num)
//另外
var num = 64 >> 1; // 32
console.log(num)

3.7、无符号右移(>>>)

正数的无符号右移与有符号右移结果是一样的。负数的无符号右移会把符号位也一起移动，而且无符号右移会把负数的二进制码当成正数的二进制码：

var num = -64; // 11111111111111111111111111000000
num = num >>> 7; // 33554431
console.log(num)
//另外，我们可以利用无符号右移来判断一个数的正负：
function ceshi(n) {
    
    
  return (n === (n >>> 0)) ? true : false; 
}
console.log(ceshi(-1)) // false
console.log(ceshi(1)) // true

3.8、按位或(|)

|与||操作符的道理也是一样的，只要两个数中有一个数为1，结果就为1，其他则为0。

var num = Math.floor(1.3); // 1
console.log(num)//1
//另外
var num = 1.3 | 0; // 1
console.log(num)

等等 其他一些花里胡哨的操作这就不在举例了

4. 位运算推理

4.1.按位或 |

只有a和b任意一位为1时，a|b就是1

8	=	1	0	0	0
2	=	0	0	1	0
10	=	1	0	1	0

应用场景: 取整

function toInt(num) {
    
    
  return num | 0
}
console.log(toInt(1.9))        // 1
console.log(toInt(1.32322))    // 1

4.2.按位与 &

只有 a 和 b 都为1时，a & b 就是 1

8	=	1	0	0	0
2	=	0	0	1	0
0	=	0	0	0	0

应用场景：判断奇偶

var number = 0 
console.log(number & 1 === 1)

4.3，按位异或 ^

当两个操作数相应的比特位有且只有一个1时，结果为1，否则为0。

8	=	1	0	0	0
2	=	0	0	1	0
10	=	1	0	1	0

应用场景: 交换两个变量的值

let a = 5,
    b = 6;

console.log(a = a ^ b);//3
console.log(b = a ^ b);//5
console.log(a = a ^ b);//6

// 还可以通过运算
console.log(a = a + b);//11
console.log(b = a - b);//6
console.log(a = a - b);//5

// es 6
console.log([a, b] = [b, a])//[ 6, 5 ]
// 原理剖析：a = a ^ b; b = a ^ b 相当与 b = a ^ b ^ b = a ^ (b ^ b) = a ^ 0 = a;

4.4，按位非 ~

简单的说就是对一个二进制数进行取反，即0变成1，1变成零（零变一，一变零）
应用场景:小数取整，因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数

4.5，JS如何实现两个大数相加

当有两个整数 a 和 b ，在通常情况下我们有“+”运算符对其进行相加运算：

let sum = a + b;

但是 JS 的Number类型是有内存限制的，数字的长度超过8字节，便会损失精度。

JS 中整数的最大安全范围可以查到是：9007199254740991

为了避免出现精度损失，我们可以采用另一种方法来巧妙地运算
使用字符串进行计算
将每一个字符当做一位来单独进行计算，将其分出来非进位和与进位和，将两者进行一个字符串的拼接

let a = "9007199254740991";
let b = "1234567899999999999";

function add(a ,b){
    
    
  //取两个数字的最大长度
  let maxLength = Math.max(a.length, b.length);
  //用0去补齐长度
  a = a.padStart(maxLength , 0);//"0009007199254740991"
  b = b.padStart(maxLength , 0);//"1234567899999999999"
  //定义加法过程中需要用到的变量
  let t = 0;	
  let f = 0;   //"进位"
  let sum = "";
  for(let i=maxLength-1 ; i>=0 ; i--){
    
    
    t = parseInt(a[i]) + parseInt(b[i]) + f;	//每一位字符的number和
    f = Math.floor(t/10);		//将和进行一个进位（类似<<）处理，并取出”进位“，这个进位要在下一位运算中加上
    sum = t%10 + sum;		//将第i位的字符结果拼接到sum上
  }
  if(f == 1){
    
    
    sum = "1" + sum;
  }
  return sum;
}

4.6，JS该不该用位运算?

      JS中最大数支持64bit,但是注意运算起来，如果是两个数，比如位操作，最大支持31bit(2147483647)，如果超出之后，比如
2147483647 & 2147483647 结果与之后是32位，这个不支持已经溢出，所以安全的位操作的最大位数30位

2147483647 & 2147483647   // 2147483647
4294967295 & 4294967295   // -1

      没有什么必要在 js 中使用位运算，未必就能提高性能，引擎未必不会帮我们优化，由于 number 类型存储的方式，就可能会踩坑。

小结

      这套运算符针对的是整数，所以对 Javascript 完全无用，因为 Javascript 内部，所有数字都保存为双精度浮点数。如果使用它们的话，Javascript 不得不将运算数先转为整数，然后再进行运算，这样就降低了速度。而且"按位与运算符"&同"逻辑与运算符"&&，很容易混淆。

5. 写在最后：

      以上的例子在平常可能会比较容易用到或看到，也是属于比较容易理解的。一些比较复杂的、难理解的，对于我来说，觉得应该尽量少用，因为会给自己带来麻烦。但是巧妙的使用位运算可以大量减少运行开销，优化算法。我们都知道计算机存储的都是二进制数据，这是由计算机本身的设计决定的。

参考资料：

https://www.w3school.com.cn/js/js_bitwise.asp
https://blog.csdn.net/deaidai/article/details/78167367
https://blog.csdn.net/weixin_43808903/article/details/110262130