JS按位运算怎么操作？，位运算操作符有哪些用途？

JS按位运算是直接操作二进制位的一组运算符，它执行速度极快，适合权限控制、状态标记、颜色处理等特定场景，但在日常业务代码中使用频率并不高。

js按位运算符有哪些？从位与到位移逐个讲

按位运算符不像加减乘除那么直观，它直接作用于数字的二进制表示，JavaScript中的按位运算符一共有7个，分成两派：逻辑派和位移派。

逻辑类按位运算符

按位与（&）：两个二进制位都是1时结果才是1，它最经典的应用是权限校验，假设用4个bit分别表示增删改查权限，0b1000是增，0b0100是删，用户权限值0b1100说明同时拥有增删权限，用permission & 0b0100判断是否有删权限,非零即真。

按位或（|）：两个二进制位只要有1就是1，它适合合并权限，把两个权限值叠加：0b1000 | 0b0100 = 0b1100,一个值搞定多种能力。

按位异或（^）：相同为0，不同为1，它有个好玩的特性：a ^ b ^ b === a，所以常被用来做无临时变量的值交换,或者在加密场景里做简单混淆。

按位非（~）：0变1，1变0，高效实现取反，在JS里~x等于-(x+1)，所以~~3.7可以快速把小数截断成整数3。

位移类按位运算符

左移（<<）：左边丢弃，右边补0，数值翻倍。1 << 4等于16，本质是做2的幂运算，在代码里看起来比Math.pow(2, 4)清爽得多。

有符号右移（>>）：右边丢弃，左边补符号位。-16 >> 2等于-4，用来快速除以4并向下取整，注意它对负数的处理方式是保留符号,适合做有符号数据的缩放。

无符号右移（>>>）：右边丢弃，左边始终补0，这个运算符会让负数变成很大的正数，所以它主要用在颜色值转换等必须处理无符号整数的场景，比如把带符号的颜色值-65280通过>>> 0转成正数4294902016再解析RGB。

前端项目里js位运算的实用场景

不少开发者觉得位运算只在编译器里有用，其实前端也能碰到,下面这几个场景就是位运算的高光区域。

• 权限系统：一套模块用一个数字表示权限位，用&校验、授权、^切换权限，相比存数组、做includes判断，位运算版本代码更短,逻辑也完全透明。
• 状态机标记：某个组件同时可能处于加载中、已提交、校验失败、可重试四种状态，用四个bit组合管理，通过位运算随时判断当前状态组合,替代多个布尔变量堆叠。
• 奇偶判断：n & 1 === 1判断奇数，n & 1 === 0判断偶数，这个写法的效率对比n % 2略有优势,代码也能让别人看出书写者懂底层。
• RGB颜色值解析：一个整数像0xFFAABB，用>> 16、>> 8 & 0xFF、& 0xFF分别提取红绿蓝分量,是Canvas和WebGL开发里的常见操作。
• 加密和哈希：^异或运算在简单数据混淆里用得很多，比如协议头校验、图片像素点加密等,计算速度快且逆向有门槛。

具体到操作步骤，以权限系统为例：先定义权限常量const READ = 1, WRITE = 2, EXEC = 4，用户变量let userPerm = READ | WRITE，校验时if (userPerm & EXEC)，授权时userPerm |= EXEC，撤销时userPerm &= ~EXEC,这四行代码就是完整的权限存取闭环。

js位运算和逻辑运算区别在哪

逻辑运算符&&、操作的是布尔值或真伪值，返回结果是某个操作数本身，位运算符操作的是数字的每一个比特位，返回的是数值,这两者的区别很容易让人混淆。

| 对比项 | 按位运算（&、|） | 逻辑运算（&&、||） |

| –| –| –|

| 操作对象 | 数字的二进制位 | 布尔语义的值 |

| 返回结果 | 数值 | 某个操作数 |

| 短路效果 | 无短路 | 有短路 |

| 典型场景 | 权限、颜色、掩码 | 条件判断、默认值 |

业内专家指出，不少初学者会把

&&和&混用，比如用a & b判断两个条件是否同时成立，结果得到的是数值而不是布尔值，在if里虽然也能用,但一旦参与后续运算就会埋坑。

另外位运算的优先级低于算术运算但高于关系运算，赋值运算a = b & 0xFF没问题，但a & 0xFF === 255会先执行0xFF === 255，再参与位运算，整个逻辑就错了,这种坑排查起来相当隐蔽。

js位运算的坑与注意事项

32位有符号整数限制：JS位运算先把操作数转成32位有符号整数再计算，超过这个范围的结果会被截断。2147483647 << 1结果是-2，不是4294967294，因此位运算只适合处理小整数，特别是颜色值、状态码这种不超过几万范围的数据,大数计算必须用其他方式。

NaN、Infinity和负数：NaN & 0结果是0，Infinity | 0结果是0，因为非有限值会被强制转成0，负数的二进制表示是补码形式，-1 >>> 0返回4294967295，这个结果用于颜色处理时没问题，但直接参加运算容易搞出反直觉的输出,所以建议在操作前先做一次数值校验。

可读性维护成本：位运算代码写起来短，读起来累。flags & ~(ACTIVE | ERROR)这行代码，新手大概率要停下来算一会儿，团队协作时没有注释的话，后续维护者很容易误解意图，建议只在确实需要性能或简洁性的独立函数里使用位运算,并配合清晰注释。

js按位异或能用来做什么

按位异或^常被单独提出来追问，因为它有别的运算符不具备的特性：交换律、结合律，且存在自反性a ^ b ^ a === b,这带来三个实用方向。

第一，交换两个数不需要临时变量：a ^= b; b ^= a; a ^= b;，面试题里偶尔能看到,实际工作中也会有需要内联操作减少变量的场景。

第二，数据加密与还原：对同一串密钥做两次异或得到原文，很多轻量协议字段保护就是这么做的，比如把用户ID和混淆因子做异或结果当作短链参数，回传时再异或一次还原ID,实现简单且不容易被直接猜出规律。

第三，找唯一数字，一堆重复数字里只有一个数出现一次，全部异或一遍，剩下的就是那个数字，这是LeetCode经典题，也是面试官最爱的考点之一,解法直观且根本不需要额外空间。

这四个维度的应用覆盖了异或在JS里的全部高价值玩法，理解了自反性,基本就能自己推导出更多变体。

回到开头的上文归纳： JS位运算执行高效、场景独特，在阿里、字节等大厂面试里出现频率也不低，但工作中不必强求，优先掌握&、、、^和位移在权限、颜色、状态管理等场景的写法，遇到性能瓶颈时调用，日常开发该用普通运算就用普通运算,代码的可读性永远是第一优先级。

js位运算常见问题解答

js位运算符跟按位非运算符能直接对小数取整吗？

可以，但有限制。~~3.9结果是3，~~-3.9结果是-3，它用的截断机制是Math.trunc而不是Math.floor，所以负数场景下结果和很多人预期的不同，另外对于超过32位整数范围的大数，结果会溢出,建议只对安全范围内的数值使用。

js位运算求整数除法向下取整怎么用？

正数场景直接用n >> 1表示除以2向下取整，n >> 2表示除以4向下取整，负数场景>>是按符号位右移，效果是向零取整，跟Math.floor不同，所以负数的”向下取整”需求不要用位移运算，直接Math.floor更准确，无符号右移>>>则适用于无符号数据，处理负数会得到非常大的正数,不能用来做除法。

前端面试问位运算到底考什么？

面试官核心考察三个点：一是是否具备底层二进制思维，能否看得懂别人写的位运算代码；二是是否理解JS位运算的32位限制和取整陷阱，这直接反映对语言规范的熟悉程度；三是能不能在权限系统、状态标志这类实际需求中把位运算用对，而不是只会背操作符表，回答时带上具体场景和代码演示,通过概率会明显提升。