JavaScript中逻辑运算符(&& ||)与位运算符(& |)的区别

核心概览：逻辑运算符与位运算符的关键定位与行为特性

在 JavaScript 中，双符号的 && 与 || 是逻辑运算符，主要用于条件判断与流程控制，具备“短路求值”特性，且返回的是决定结果的操作数原值；而单符号的 & 与 | 是按位运算符，用于对数字底层的 32 位二进制位执行逐位逻辑运算，不具备短路机制，且始终将操作数强转为 32 位有符号整数并返回一个数值结果。

一、底层定位与类型处理机制

理解两者区别的第一步，是看它们如何看待传入的操作数。JavaScript 是一门弱类型动态语言，但逻辑运算符与位运算符在规范层面对待数据类型有着截然不同的处理流程：

• 逻辑运算符（&&、||）：面向“真假值”（Truthy / Falsy）进行语义评估。在求值过程中，引擎不会将操作数转换为数字或二进制位，而是根据 ECMAScript 规范的 ToBoolean 抽象操作判断其真伪（例如 false、0、""、null、undefined、NaN 均为 Falsy，其余均为 Truthy）。
• 位运算符（&、|）：面向“32位有符号整数”（ToInt32）进行运算。任何传入位运算符的操作数，都会首先被强制调用内部的 ToInt32 抽象操作转换为 32 位二进制补码格式。非数字对象、布尔值或字符串会被强行转换成数字，浮点数的小数部分则被直接截断。

图 1：逻辑运算符与位运算符的执行流程对比（推导流程）

二、运算流程与短路求值（Short-circuit）特性

“短路求值”是逻辑运算符最关键的运行特征，也是其与位运算符在日常业务代码中最重要的行为差异。

1. 逻辑运算符的短路规则

逻辑运算符按照从左到右的顺序求值，一旦左侧操作数已经能够完全决定整个表达式的最终结果，引擎就会立即终止计算，右侧的任何表达式、函数调用或属性读取都不会被执行：

• A && B：若 A 为假值（Falsy），则整个与逻辑必定不成立，引擎直接返回 A，完全不会对 B 求值。
• A || B：若 A 为真值（Truthy），则整个或逻辑必定成立，引擎直接返回 A，完全不会对 B 求值。

2. 位运算符的全面求值规则

按位运算符 & 和 | 并不具备任何短路机制。无论左侧操作数的值是什么，右侧表达式都必须被完整求值，随后两者的结果才会被送入二进制运算器：

let apiCallCount = 0;

function fetchUserInfo() {
  apiCallCount++;
  return 100;
}

// 场景 1：使用逻辑与 (&&)
let condition = false;
let resultLogical = condition && fetchUserInfo();
console.log("逻辑与执行后 apiCallCount:", apiCallCount); // 输出: 0 (函数被短路跳过)
console.log("逻辑与返回结果:", resultLogical);           // 输出: false

// 场景 2：错误使用位与 (&)
let resultBitwise = condition & fetchUserInfo();
console.log("位与执行后 apiCallCount:", apiCallCount);   // 输出: 1 (函数被强制执行！)
console.log("位与返回结果:", resultBitwise);             // 输出: 0 (false转为0，0 & 100 = 0)

逻辑与执行后 apiCallCount: 0
逻辑与返回结果: false
位与执行后 apiCallCount: 1
位与返回结果: 0

图 2：短路特性对代码副作用（Side Effect）的实际影响对比

三、底层二进制运算过程剖析

为了透彻理解位运算符 & 与 | 的计算结果，我们需要观察其在 32 位整型下的二进制逐位对齐运算过程。

以表达式 5 & 3 与 5 | 3 为例：

• 数字 5 的 32 位有符号二进制补码为：0000 0000 0000 0000 0000 0000 0000 0101
• 数字 3 的 32 位有符号二进制补码为：0000 0000 0000 0000 0000 0000 0000 0011

图 3：32 位二进制转换与按位与(&) / 按位或(|) 计算原理

逐位对齐计算：

• 按位与（5 & 3）：规则为“同为 1 则为 1，否则为 0”。低 4 位对比中，第 0 位（最右侧）均为 1 得到 1，其余位皆有 0，结果为 0001，转换为十进制即为 1。
• 按位或（5 | 3）：规则为“只要有 1 则为 1，全 0 才为 0”。低 4 位对比中，第 0、1、2 位均至少含有一个 1，结果为 0111，转换为十进制即为 7。

// 1. 浮点数小数部分被直接丢弃 (截断)
console.log(5.9 & 3.2);  // 相当于 5 & 3，输出: 1
console.log(5.9 | 0);    // 常用技巧：利用 | 0 快速向下截断取整，输出: 5

// 2. 非数值类型的隐式转换
console.log("5" & "3");  // 字符串转为对应整型，输出: 1
console.log(true | false); // true转为1，false转为0，1 | 0 输出: 1
console.log(null & 3);   // null转为0，0 & 3 输出: 0
console.log(undefined | 3); // undefined转为NaN，NaN转为0，0 | 3 输出: 3

1
5
1
1
0
3

四、返回值类型差异

初学者常误以为逻辑运算符 && 和 || 总是返回 true 或 false。实际上，JavaScript 逻辑运算符返回的是决定该结果的操作数本身，其类型与该操作数保持一致；而位运算符始终返回 Number 类型的 32 位整数。

const defaultProfile = { role: "guest" };
const userConfig = null;

// 逻辑运算符：返回操作数本身
const selected = userConfig || defaultProfile;
console.log("返回值:", selected);         // 输出: { role: "guest" }
console.log("类型:", typeof selected);    // 输出: "object" (保留原始对象引用)

// 位运算符：强制转为 32位 整数数值
const bitwiseResult = userConfig | 0;
console.log("位运算值:", bitwiseResult);  // 输出: 0
console.log("类型:", typeof bitwiseResult); // 输出: "number"

返回值: { role: 'guest' }
类型: object
位运算值: 0
类型: number

五、实际开发中的经典应用场景

1. 逻辑运算符的典型工程实践

• 属性安全链式读取（短路保护）：在缺乏可选链操作符（?.）或组合验证条件时，通过 data && data.items && data.items.length 防御解构异常。
• 默认配置回退：const timeout = options.timeout || 3000;（注：若业务中合法值包含 0 或 ""，现代标准更推荐使用空值合并运算符 ??）。
• 条件触发执行：例如 isDebugMode && console.log("Debug trace:", traceId);。

2. 位运算符的典型工程实践（RBAC 权限管理系统）

位运算符因其极高的运算速度与紧凑的内存占用，常用于权限掩码（Permission Mask）、状态机标记以及图像像素处理等场景：

// 1. 使用二进制位定义独立权限标志 (每个权限占用1个独立二进制位)
const PERMISSION_READ    = 1 << 0; // 二进制: 0001 (十进制: 1)
const PERMISSION_WRITE   = 1 << 1; // 二进制: 0010 (十进制: 2)
const PERMISSION_DELETE  = 1 << 2; // 二进制: 0100 (十进制: 4)
const PERMISSION_EXECUTE = 1 << 3; // 二进制: 1000 (十进制: 8)

// 2. 赋予权限：使用按位或 (|) 组合多个独立权限
let userPermissions = PERMISSION_READ | PERMISSION_WRITE; 
// 0001 | 0010 = 0011 (十进制: 3)

// 3. 校验权限：使用按位与 (&) 检查是否包含目标权限
function checkPermission(currentMask, required) {
  return (currentMask & required) === required;
}

console.log("是否有读取权限?", checkPermission(userPermissions, PERMISSION_READ));   // true
console.log("是否有删除权限?", checkPermission(userPermissions, PERMISSION_DELETE)); // false

// 4. 移除权限：使用按位与结合取反 (& ~)
userPermissions = userPermissions & ~PERMISSION_WRITE;
console.log("移除写权限后是否有写权限?", checkPermission(userPermissions, PERMISSION_WRITE)); // false

是否有读取权限? true
是否有删除权限? false
移除写权限后是否有写权限? false

六、高频误区与避坑指南

在日常开发与代码审查中，这两类运算符常引发不易察觉的隐蔽缺陷：

• 误区 1：混淆单符号与双符号的书写：将 if (a && b) 误写为 if (a & b)。当 a 为真值对象（如 {}）时，位运算会将对象强转为 NaN 并视为 0，进而得出全为 0 的假象，导致逻辑判断彻底失效。
• 误区 2：对超出 32 位的大整数使用位运算：JavaScript 中的 Number 采用 IEEE 754 双精度浮点格式，安全整数范围为 [-2^53 + 1, 2^53 - 1]。但是位运算符强制转换为 32 位整数（-2^31 至 2^31 - 1）。若对诸如分布式 ID（雪花算法 ID，如 1728394857463728192）使用 | 0 或位运算，高 32 位会被直接抹去，造成严重的精度丢失事故。
• 误区 3：忽视位运算对布尔值的弱类型污染：在 TypeScript 或复杂逻辑中，true & true 输出的是数字 1，而不是布尔值 true。如果后续有强类型校验或全等比较 === true，校验将会直接判定失败。

图 4：逻辑运算符 vs 位运算符综合选型决策与关键属性对照

七、总结与核心差异速查表

为了方便快速查阅与选型，下表对 JavaScript 中逻辑运算符与位运算符的关键维度进行了集中归纳：

在日常业务编码中，只要涉及“如果满足条件则执行”或“变量降级取值”，请始终使用逻辑运算符；只有在处理低级二进制协议、数据流压缩或紧凑权限掩码位时，才选用按位运算符。明确两者的执行边界，可以有效杜绝因副作用被意外触发或大整数被截断而产生的隐蔽缺陷。