文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

七种 JavaScript 中位运算符的神奇用法

2024-12-13 14:58

关注

整数精度(不带小数点或指数表示法)最多为 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 00000001
console.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 00000011
console.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 00000010
console.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: -2
console.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 00000010
console.log(1 << 1) // 2

6. 有符号右移>>

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

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

7. 无符号右移>>>

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

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

js中位运算符的妙用

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

// even & 1 = 0
// odd & 1 = 1
console.log(2 & 1) // 0
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
// >>> cannot round negative numbers
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

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


   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})`
   }



  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'

总结

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

最后,感谢你的阅读,祝编程愉快!

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯