JavaScript 中你不知道的按位运算

JavaScript 中你不知道的按位运算

个人主页:康师傅前端面馆


位运算直接操作二进制位,适用于整数(JS 中数字会隐式转换为 32 位有符号整数)。以下是核心运算符详解:

一、基础运算符

  1. 按位与 &

    • 规则 :同位置均为 1 时结果为 1

    • 示例 :权限校验

      javascript 复制代码
      const READ = 0b001; // 1
      const WRITE = 0b010; // 2
      const EXECUTE = 0b100; // 4
      
      let userPermissions = READ | WRITE; // 0b011 (3)
      console.log(userPermissions & READ); // 1 (true)
      console.log(userPermissions & EXECUTE); // 0 (false)
  2. 按位或 |

    • 规则 :同位置任一为 1 则结果为 1

    • 示例 :组合权限

      javascript 复制代码
      let permissions = READ | EXECUTE; // 0b101 (5)
  3. 按位异或 ^

    • 规则 :同位置不同则为 1

    • 示例 :交换变量(无临时变量)

      javascript 复制代码
      let a = 5; // 0b101
      let b = 3; // 0b011
      a = a ^ b; // 0b110 (6)
      b = a ^ b; // 0b101 (5)
      a = a ^ b; // 0b011 (3)
  4. 按位非 ~

    • 规则 :所有位取反(相当于 -x - 1

    • 示例 :快速取整

      javascript 复制代码
      console.log(~~3.7); // 3 (等价于 Math.floor)

二、位移运算符

  1. 左移 <<

    • 规则 :向左移动指定位数,低位补 0

    • 示例 :快速计算 <math xmlns="http://www.w3.org/1998/Math/MathML"> 2 n 2^n </math>2n

      javascript 复制代码
      const power = 1 << 3; // 8 (2^3)
  2. 有符号右移 >>

    • 规则:向右移动,保留符号位

    • 示例 :负数处理

      javascript 复制代码
      console.log(-8 >> 2); // -2 (符号位不变)
  3. 无符号右移 >>>

    • 规则 :向右移动,高位补 0(负数会变正)

    • 示例 :提取 RGB 颜色值

      javascript 复制代码
      const color = 0xFFA07A; // LightSalmon
      const red = (color >>> 16) & 0xFF; // 255
      const green = (color >>> 8) & 0xFF; // 160

三、应用场景

1、权限控制系统

传统方案

javascript 复制代码
const permissions = {
  read: true,
  write: false,
  execute: true
};
if (permissions.read) { ... } // 对象属性查找

位运算方案

javascript 复制代码
const READ = 1, WRITE = 2, EXECUTE = 4;
const userPerm = READ | EXECUTE;
if (userPerm & READ) { ... } // 位运算检查

优势对比

维度 传统方案 位运算方案
内存 每个权限占独立内存 单整数存储所有权限
性能 属性查找(O(n)) 位操作(O(1))
序列化 需完整对象结构 单数字即可传输/存储
扩展性 新增权限需修改结构 新增权限只需定义新位

2、多状态标志存储

传统方案(数组/对象):

javascript 复制代码
const flags = [true, false, true, false]; // 存储4个状态
if (flags[0]) { ... } // 数组索引访问

位运算方案

javascript 复制代码
const FLAG_A = 1, FLAG_B = 2, FLAG_C = 4;
let state = FLAG_A | FLAG_C; // 存储多个状态
if (state & FLAG_A) { ... } // 位检查

优势对比

维度 传统方案 位运算方案
内存 每个状态占4-8字节 所有状态共享4字节
操作 需循环遍历 单次位操作完成
GC压力 产生多个对象/数组 无额外内存分配

3、高性能数值计算

传统数学运算

javascript 复制代码
// 浮点数运算(有精度损失风险)
const half = value / 2; 
const doubled = value * 2;

位运算优化

javascript 复制代码
// 整数运算(无精度问题)
const half = value >> 1;   // 右移1位 = ÷2
const doubled = value << 1; // 左移1位 = ×2

性能测试对比(Chrome V8 100万次操作):

javascript 复制代码
// 乘法:2.8ms 
for(let i=0; i<1e6; i++) a = i * 2;  

// 位运算:0.9ms (快3倍)
for(let i=0; i<1e6; i++) a = i << 1;  

4、颜色值操作

传统方案(字符串操作):

javascript 复制代码
const color = "#FFA07A";
const red = parseInt(color.substring(1,3), 16); // 字符串截取+转换

位运算方案

javascript 复制代码
const color = 0xFFA07A;
const red = (color >>> 16) & 0xFF; // 无符号右移+掩码

优势对比

维度 传统方案 位运算方案
性能 字符串解析开销大 直接内存操作
可读性 直观但冗长 简洁但需理解位操作
类型安全 需处理非法字符串 天然数值类型保证

四、注意事项

  • 整数范围 :运算结果在 [-2^31, 2^31-1] 之间,超出会截断。
  • 可读性:复杂位运算需添加注释说明逻辑。
  • 隐式转换:非整数(如浮点数)会先转成 32 位整数再运算。

示例完整代码:GitHub Gist 链接

相关推荐
袁煦丞13 分钟前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码21 分钟前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
Liudef0623 分钟前
2048小游戏实现
javascript·css·css3
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig2 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少2 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句3 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易3 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员