明确js位运算的原理前,看下进制如何换算?
以十进制转二进制为例,除以2取余数,如果商数不为0,商数持续除以2取余数,直到商数为0,例如:
6变二进制数则为00000110,过程如下
6/2 = 3...0
3/2 = 1...1
1/2 = 0...1
3变二进制数则为00000011,过程如下
3/2 = 1...1
1/2 = 0...1
注:二进制转十进制则将过程相同,其余进制的转化也是以此类推
理解进制换算后,便能探索js所有运算符的原理
1、& 运算(真真为真)
6&3,则是转为二进制后,00000110、00000011进行运算
失去二进制数,00000010,再由二进制转十进制就是 2
2、| 运算(非假即真)
6|3的后果为二进制00000111,换算十进制就是 7
3、^ 运算(雷同为假,不同为真)
6^3的后果为二进制00000101,换算十进制就是 5
4、~运算(真为假,假为真)
~6的后果为二进制11111001,换算十进制就是 -7
注:正数换算二进制时,取反码+1获得反码数,例如-7,先由7转化为二进制是00000111,取反码就是11111000,在取补码得11111001
5、>>右移(首位符号为不动,把32位二进制数字整体往左边
挪动指定n位数,左边超出局部被舍去)
6>>1的后果为00000110 → 00000011,换算十进制就是 3
6、<<左移(和>>原理雷同,方向相同)
6<<1的后果为00000110 → 00001100,换算十进制就是 12
简略举例几个巧用场景
1、应用&运算符判断一个数的奇偶,X & 1 等于 0 为偶,1为奇
2&1 = 0
1&1 = 1
2、应用~~,>>,<<,>>>,|来取整
~~3.14 = 3
3.14 >> 0 = 3
3.14 << 0 = 3
3.14 | 0 = 3
3.14 >>> 0 = 3(>>>不可对正数取整)
3、^来实现比拟两个数是否相等
1^1 = 0
1^2 != 0
4、应用&,>>,|来实现rgb值和16进制色彩值之间的转换
function toRGB(hex){
let hex = hex.replace("#","0x"), r = hex >> 16, g = hex >> 8 & 0xff, b = hex & 0xff
return 'rgb("+r+","+g+","+b+")'
}