EnlightenCode

JavaScript位运算符全面指南 ⚡ ​

基础概念 📚 ​

⚠️ 重要提示：

  • JavaScript 将数字存储为 64 位浮点数
  • 所有位运算都会先将数字转换为 32 位有符号整数后执行
  • 位运算通常比普通算术运算更快

七种位运算符 🛠️ ​

1. 按位与(AND) & ​

两位都为1时结果才为1：

js
// 1: 00000001
// 3: 00000011
console.log(1 & 3)  // 1

2. 按位或(OR) | ​

任一位为1时结果为1：

js
// 1: 00000001
// 3: 00000011
console.log(1 | 3)  // 3

3. 按位异或(XOR) ^ ​

两位不同时结果为1：

js
// 1: 00000001
// 3: 00000011
console.log(1 ^ 3)  // 2

4. 按位非(NOT) ~ ​

位值取反：

js
// 1: 00000001
console.log(~1)  // -2
// 💡 技巧：~n = -(n+1)

5. 左移 << ​

向左移动指定位数，右侧补0：

js
console.log(1 << 2)  // 4 (1移动2位: 00000100)

6. 有符号右移 >> ​

保持符号位，右移后左侧补符号位：

js
console.log(-8 >> 2)  // -2

7. 无符号右移 >>> ​

忽略符号位，右移后左侧补0：

js
console.log(-8 >>> 2)  // 1073741822

实用技巧 💡 ​

1. 快速判断奇偶 ​

js
const isEven = n => (n & 1) === 0
console.log(isEven(4))  // true
console.log(isEven(7))  // false

2. 高效取整 ​

js
// 以下方法都可以取整
console.log(~~6.83)     // 6
console.log(6.83 | 0)   // 6
console.log(6.83 >> 0)  // 6
// ⚠️ >>> 不适用于负数

3. 变量交换 ​

js
let a = 5, b = 8
a ^= b
b ^= a
a ^= b
// 现在 a=8, b=5

4. 判断2的幂 ​

js
const isPowerOf2 = n => n > 0 && (n & (n - 1)) === 0
console.log(isPowerOf2(16))  // true
console.log(isPowerOf2(18))  // false

新增实用场景 🎯 ​

1. 权限系统 ​

js
const PERMISSION = {
    READ: 1,     // 001
    WRITE: 2,    // 010
    EXECUTE: 4   // 100
}

// 授权
let userPermission = PERMISSION.READ | PERMISSION.WRITE  // 3

// 检查权限
const hasPermission = (userPerm, checkPerm) => (userPerm & checkPerm) === checkPerm
console.log(hasPermission(userPermission, PERMISSION.READ))  // true

2. 颜色处理 ​

js
// RGB转16进制
function rgbToHex(r, g, b) {
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
}
console.log(rgbToHex(255, 255, 255))  // '#ffffff'

注意事项 ⚠️ ​

  1. 位运算只能用于整数，小数会被截断
  2. 大数处理时需注意32位限制
  3. 在可读性要求高的场景，优先使用常规运算
  4. 位运算符的优先级较低，复杂表达式建议使用括号

性能建议 🚀 ​

  1. 位运算适用于简单的数值处理
  2. 在大量数据处理时，位运算可以提供显著性能提升
  3. 现代JavaScript引擎对普通运算已经做了很多优化，过度使用位运算可能适得其反