前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【JS】832- 位运算符在 JS 中的妙用

【JS】832- 位运算符在 JS 中的妙用

作者头像
pingan8787
发布2021-01-13 10:32:04
2.7K0
发布2021-01-13 10:32:04
举报
文章被收录于专栏:前端自习课

原文地址:http://interview.poetries.top/

按位与(AND)&

将数字转换成二进制,然后进行与操作,再转换回十进制

代码语言:javascript
复制
// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 3 的二进制表示为 00000000 00000000 00000000 00000011
// --------------------------------------------------
// 1 的二进制表示为 00000000 00000000 00000000 00000001
console.log(1 & 3) // 1

按位或(OR)|

将数字转换为二进制,然后进行或操作,再转换回十进制

代码语言:javascript
复制
// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 3 的二进制表示为 00000000 00000000 00000000 00000011
// --------------------------------------------------
// 3 的二进制表示为 00000000 00000000 00000000 00000011
console.log(1 | 3) // 3

按位异或(XOR)^

将数字转换为二进制,然后进行异或操作,再转换回十进制

代码语言:javascript
复制
// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 3 的二进制表示为 00000000 00000000 00000000 00000011
// --------------------------------------------------
// 2 的二进制表示为 00000000 00000000 00000000 00000010
console.log(1 ^ 3) // 2

按位非(NOT)~

将数字转换为二进制,然后进行非操作,再转换回十进制,也就求二进制的反码

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

左移(Left shift)<<

将数字转换成二进制,然后丢弃高位,低位补0

代码语言:javascript
复制
// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 2 的二进制表示为 00000000 00000000 00000000 00000010
console.log(1 << 1) // 2

有符号右移 >>

将数字转成二进制,然后丢弃低位,拷贝最左侧的位以填充左侧

代码语言:javascript
复制
// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 0 的二进制表示为 00000000 00000000 00000000 00000000
console.log(1 >> 1) // 0

无符号右移 >>>

将数字转成二进制,然后丢弃低位,左侧补0,因此总是非负数。

对于非负数,有符号右移和无符号右移结果总是相等。

位运算符在 JS 中的妙用

判断奇偶

代码语言:javascript
复制
// 偶数 & 1 = 0
// 奇数 & 1 = 1
console.log(2 & 1) // 0
console.log(3 & 1) // 1

取整

代码语言:javascript
复制
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

交换值

代码语言:javascript
复制
var a = 6
var b = 8

a ^= b
b ^= a
a ^= b

console.log(a) // 8
console.log(b) // 6

RGB 值和16 进制颜色值转换

代码语言:javascript
复制
function hexToRGB(hex: string): string{
  const hexx = hex.replace('#', '0x')
  const r = hexx >> 16
  const g = hexx >> 8 & 0xff
  const b = hexx & 0xff
  return `rgb(${r}, ${g}, ${b})`
}

function RGBToHex(rgb: string): string{
  const rgbArr = rgb.split(/[^\d]+/)
  const color = rgbArr[1] | rgbArr[2] << 8 | rgbArr[3]
  return `#${color.toString(16)}`
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-01-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端自习课 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 按位与(AND)&
  • 按位或(OR)|
  • 按位异或(XOR)^
  • 按位非(NOT)~
  • 左移(Left shift)<<
  • 有符号右移 >>
  • 无符号右移 >>>
  • 位运算符在 JS 中的妙用
    • 判断奇偶
      • 取整
        • 交换值
          • RGB 值和16 进制颜色值转换
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档