7种JavaScript 中位运算符的神奇用法-轻识

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

JavaScript与许多其他编程语言不同，JavaScript 没有定义不同类型的数字，如整数、短整型、长整型、浮点型等。

整数精度（不带小数点或指数表示法）最多为 15 位。小数精度的最大位数为 17 位，但浮点运算并不总是 100% 准确。

位运算直接计算二进制位，位运算直接处理每个位。它是一种非常低级的操作。优点是速度极快，但缺点是非常不直观，在很多场合不能使用。

位运算只对整数起作用。如果操作数不是整数，则在运行前会自动转换为整数。

在JavaScript内部，值是以64位浮点数的形式存储的，但是进行位运算时，是以32位有符号整数进行运算的，返回值也是32位有符号整数。

JS中常用的7个位运算符

1.按位与（AND）&

&将二进制数中相应的位按照特定的方式组合并运算，如果相应位全为1，结果为1，如果任意位为0，结果为0。

// The binary representation of 1 is: 00000000 00000000 00000000 00000001// The binary representation of 3 is: 00000000 00000000 00000000 00000011// -----------------------------// The binary representation of 1 is: 00000000 00000000 00000000 00000001console.log(1 & 3) // 1

2. 按位或（OR）|

| 该运算符与&的区别在于，若任意一个操作数在相应位为1，则结果为1。

// The binary representation of 1 is: 00000000 00000000 00000000 00000001// The binary representation of 3 is: 00000000 00000000 00000000 00000011// -----------------------------// The binary representation of 3 is: 00000000 00000000 00000000 00000011console.log(1 | 3) // 3

3. 按位异或（XOR）^

^如果两个操作数位对应只有一个1，则结果为1，其他都为0。

// The binary representation of 1 is: 00000000 00000000 00000000 00000001// The binary representation of 3 is: 00000000 00000000 00000000 00000011// -----------------------------// The binary representation of 2 is: 00000000 00000000 00000000 00000010console.log(1^3) // 2

4. 按位非（NOT）~

~ 该运算符是将位取反，1变成0，0变成1，也就是求二进制的补码。

// The binary representation of 1 is: 00000000 00000000 00000000 00000001// The binary representation of 3 is: 00000000 00000000 00000000 00000011// -----------------------------// 1's inverse binary representation: 11111111 11111111 11111111 11111110// Since the first bit (sign bit) is 1, this number is a negative number. JavaScript internally uses complement code to represent negative numbers, that is, you need to subtract 1 from this number, take the inverse again, and then add a negative sign to get the decimal value corresponding to the negative number.// -----------------------------// The inverse of 1 minus 1: 11111111 11111111 11111111 11111101// Negative code: 00000000 00000000 00000000 00000010// Represented as decimal plus minus sign: -2console.log(~ 1) // -2

简单记忆：一个数和它自身的取反值相加等于-1。

5.左移<<

<<运算符将指定值的二进制数的所有位向左移动指定的次数。

移动规则：丢弃高位，用0填充低位，即把所有数按二进制形式向左移动相应的位数，去掉高位（丢弃），去掉低位。

空白处用零填充。

// The binary representation of 1 is: 00000000 00000000 00000000 00000001// -----------------------------// The binary representation of 2 is: 00000000 00000000 00000000 00000010console.log(1 << 1) // 2

6. 有符号右移>>

>> 此运算符将指定操作数的位向右移动指定的位数。向右移出的位将被丢弃，最左边的位将被复制以填充左侧。由于新的最左边的位始终与之前相同，因此符号位不会改变。这就是为什么它被称为“符号通信”。

// The binary representation of 1 is: 00000000 00000000 00000000 00000001// -----------------------------// The binary representation of 0 is: 00000000 00000000 00000000 00000000console.log(1 >> 1) // 0

7. 无符号右移>>>

>>> 该运算符将第一个操作数向右移动指定的位数。向右移动的位被丢弃，左侧用0填充。由于符号位变为0，因此，结果始终为非负数。（译注：即使向右移动0位，结果也是非负数。）

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

js中位运算符的妙用

1).使用&运算符判断数字的奇偶性

// even & 1 = 0// odd & 1 = 1console.log(2 & 1) // 0console.log(3 & 1) // 1

2).使用 ~, >>, <<, >>>, | 来舍入

console.log(~~ 6.83) // 6console.log(6.83 >> 0) // 6console.log(6.83 << 0) // 6console.log(6.83 | 0) // 6// >>> cannot round negative numbersconsole.log(6.83 >>> 0) // 6

3).使用 ^ 完成值交换

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

4).使用&、>>、|完成rgb值与十六进制颜色值之间的转换

/**  * Hexadecimal color value to RGB  * @param {String} hex hexadecimal color string  * @return {String} RGB color string  */   function hexToRGB(hex) {     var hexx = hex. replace('#', '0x')     var r = hexx >> 16     var g = hexx >> 8 & 0xff     var b = hexx & 0xff     return `rgb(${r}, ${g}, ${b})`   }
/**  * RGB color to hexadecimal color  * @param {String} rgb RGB color string  * @return {String} Hexadecimal color string  */  function RGBToHex(rgb) {     var rgbArr = rgb. split(/[^\d]+/)     var color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3]     return '#'+ color.toString(16)  }// ------------------------------------------------ -hexToRGB('#ffffff') // 'rgb(255,255,255)'RGBToHex('rgb(255,255,255)') // '#ffffff'

总结

以上就是我今天与你分享的全部内容，希望今天的内容对你有所帮助。

往期推荐

threejs做特效：实现物体的发光效果-EffectComposer详解！

Node.js + typescript 写一个命令批处理辅助工具

源码视角，Vue3为什么推荐使用ref而不是reactive

最后

欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧