深入理解 JavaScript 中的按位与运算符 (&)：从原理到实战应用

2026-02-17 11:53:47 0条评论 1次阅读 0人点赞

在日常的 JavaScript 开发中，我们经常需要处理各种复杂的逻辑判断和数值运算。虽然高级语法糖让我们的代码看起来更加简洁，但在某些追求极致性能的场景下，底层的位运算往往能发挥出意想不到的作用。今天，我们将深入探讨 JavaScript 位运算家族中的重要成员——按位与运算符（AND Bitwise Operator）。

在这篇文章中，我们不仅会学习它的工作原理，还会通过多个实战案例，看看它是如何帮助我们解决诸如判断奇偶性、权限管理、位掩码操作等实际问题的。准备好了吗？让我们开始这场位运算的探索之旅吧。

什么是按位与 (&) 运算符？

按位与运算符用符号 INLINECODEe20bf794 表示。它是一个二元运算符，意味着它需要两个操作数。与我们平时使用的逻辑与运算符 INLINECODE00f6828b 不同，INLINECODE14a80164 是直接操作布尔值，而 INLINECODE9509a105 则是深入到数字的“骨髓”——二进制位中去进行操作。

当我们在两个操作数之间使用 & 时，JavaScript 引擎会执行以下步骤：

  • 转换为 32 位整数：JavaScript 中的数字默认是 64 位浮点数，但在进行位运算前，引擎会先将它们转换为 32 位有符号整数。
  • 逐位比较：它会将这两个数的二进制表示一位一位地对齐。
  • 逻辑判定：对于每一位，只有当两个数中对应的位都为 1 时，结果的该位才为 1；否则，该位为 0。

为了让你更直观地理解这个规则，我们可以参考下面的真值表。这是所有位运算逻辑的基础：

位 A

位 B

输出 ( A & B ) :—

:—

:— 0

0

0 0

1

0 1

0

0 1

1

1

#### 语法格式

result = a & b;

深入原理：它是如何工作的？

光说不练假把式。让我们通过一个具体的计算过程来拆解一下。

假设我们有两个数字：INLINECODE4adb663e 和 INLINECODE1e5e34a9。我们要计算 5 & 3。

首先，我们需要将这两个十进制数转换为 32 位二进制（为了简洁，这里只展示最后 4 位）：

  • 5 的二进制：0101
  • 3 的二进制：0011

现在，我们让它们上下对齐，按位进行与运算：

  0101  (5)
& 0011  (3)
-------
  0001  (结果)

让我们逐列分析：

  • 最右边位（第0位）：1 (来自5) & 1 (来自3) = 1
  • 第1位：0 (来自5) & 1 (来自3) = 0
  • 第2位：1 (来自5) & 0 (来自3) = 0
  • 第3位：0 (来自5) & 0 (来自3) = 0

得到的结果二进制是 INLINECODE34a7ddbd。将它转换回十进制，结果就是 INLINECODEeba3ae0c。

#### 代码示例 1：基础运算演示

let a = 5;  // 二进制: 101
let b = 3;  // 二进制: 011

// 执行按位与运算
let result = a & b;

console.log(result); // 输出: 1 
// 原理: 101 & 011 -> 001 (即十进制的 1)
console.log(result.toString(2)); // 输出: 1 (查看二进制形式)

实战应用场景

理解了原理之后，你可能会问：“这东西到底有什么用？”其实在底层开发、图形处理、算法优化以及权限系统中，& 运算符大有用武之地。

#### 1. 高效判断奇偶数

这是面试和实际开发中最经典的技巧。通常我们判断奇偶数是用 INLINECODEe31965ca。但使用位运算 INLINECODE56ab6cbf 会更快，因为它是直接对 CPU 寄存器进行操作，省去了取模的复杂计算。

原理：

任何整数的二进制形式中，如果最后一位（最低有效位 LSB）是 1，它就是奇数；如果是 0，它就是偶数。

  • 如果我们让一个数 INLINECODEa1147b19 和 INLINECODEc66731b4 (二进制 INLINECODEb6392010) 进行 INLINECODE885072e2 运算：

* 如果 INLINECODE2bc8a68b 是奇数（如 3, INLINECODEb9aece9a），结果为 1。

* 如果 INLINECODEd7ca145f 是偶数（如 4, INLINECODE45cbe2d5），结果为 0。

#### 代码示例 2：奇偶数检查函数

function checkNumberType(n) {
    // 我们使用按位与来检查最低位
    // (n & 1) 的结果要么是 1，要么是 0
    const isOdd = (n & 1) === 1;

    if (isOdd) {
        console.log(`${n} 是一个奇数`);
    } else {
        console.log(`${n} 是一个偶数`);
    }
}

// 测试一下
checkNumberType(123); // 输出: 123 是一个奇数
checkNumberType(246); // 输出: 246 是一个偶数
checkNumberType(0);   // 输出: 0 是一个偶数

#### 2. 位掩码：处理权限系统（开关）

想象一下，我们在开发一个用户权限系统（比如 Linux 的文件权限或者游戏中的角色状态）。我们有三种权限：读、写、执行。如果用普通变量，我们需要三个布尔值。但用位运算，我们只需要一个数字就能搞定！

我们可以定义常量来代表不同的位：

  • 读 (READ): 001 (1)
  • 写 (WRITE): 010 (2)
  • 执行 (EXECUTE): 100 (4)

检查权限： 假设用户的权限掩码是 INLINECODE083635ed (二进制 INLINECODE26e65d0e)，这意味着他有写和执行的权限。如何检查他是否有“读”权限？

#### 代码示例 3：权限检查系统

// 定义权限标志位
const READ = 1;    // 二进制 001
const WRITE = 2;   // 二进制 010
const EXECUTE = 4; // 二进制 100

// 当前用户的权限状态 (读 + 写 = 3)
// 二进制表示: 011
let userPermissions = READ | WRITE; 

console.log(`当前权限值: ${userPermissions}`);

// 检查用户是否有“读”权限
// 我们将 userPermissions 与 READ 进行按位与
if ( (userPermissions & READ) ) {
    console.log("用户拥有读权限"); // 结果为真 (001 & 011 = 001)
} else {
    console.log("用户没有读权限");
}

// 检查用户是否有“执行”权限
if ( (userPermissions & EXECUTE) ) {
    console.log("用户拥有执行权限");
} else {
    console.log("用户没有执行权限"); // 结果为假 (011 & 100 = 000)
}

关键点： 这里我们利用了 & 的特性。如果某一位在掩码中是开启的（1），而在权限常量中也是开启的（1），那么结果就不会是 0。这是一种极其节省内存且高效的状态管理方式。

#### 3. 状态清理（关闭特定位）

不仅用于检查，& 还经常用于“关闭”某个特定的位。在计算机科学中，这被称为“位清除”。

如果你想关闭某个特定的开关，但保留其他开关的状态，你需要将当前状态与一个“掩码”进行 & 运算。这个掩码中，你想保留的位设为 1，你想清除的位设为 0。

比如：1111 & 1101 = 1101 （倒数第二位被清零了）。

#### 代码示例 4：移除特定权限

// 假设用户拥有全部权限 (1 + 2 + 4 = 7, 二进制 111)
let myPerms = READ | WRITE | EXECUTE;
console.log(`初始权限值: ${myPerms.toString(2)} (二进制)`); // 输出 111

// 我们想移除“写”权限 (WRITE = 010)
// 我们需要构造一个掩码：除了 WRITE 位是 0，其他都是 1
// 这可以通过“按位取反(~)”运算符轻松实现： ~WRITE
const removeWrite = ~WRITE; // ~010 变成 ...101 (在32位整数中)

// 执行清除操作
myPerms = myPerms & removeWrite;

console.log(`移除写入后的权限值: ${myPerms}`); // 输出 5 (二进制 101)
// 现在用户只有读和执行权限了

#### 4. 字符串转 RGB 颜色值

在处理网页颜色时，我们经常遇到十六进制颜色字符串（如 #FF0000）。我们需要将其转换为 R, G, B 三个独立的十进制数值（0-255）来操作。按位与运算在这里是提取数据的神器。

一个颜色值通常是 24 位的：RRRRRRRR GGGGGGGG BBBBBBBB。

  • 要提取红色，我们需要右移 8 位两次，或者直接除以 65536。
  • 要提取绿色，我们需要右移 8 位一次，但这会带上红色的高位。这时用 INLINECODE905d27df (即 INLINECODEcf00a9ec，二进制 11111111) 可以完美地截取后 8 位，丢弃高位。
  • 要提取蓝色，直接与 0xFF 进行与运算即可。

#### 代码示例 5：颜色解析器

function hexToRgb(hex) {
    // 1. 将十六进制字符串转换为整数
    // parseInt 的第二个参数 16 表示进制
    const bigint = parseInt(hex, 16); 
    console.log(`整数表示: ${bigint}`);

    // 2. 提取 R 分量
    // 右移 16 位，然后与 255 (0xFF) 按位与，确保只取最后8位
    const r = (bigint >> 16) & 255;

    // 3. 提取 G 分量
    // 右移 8 位，然后与 255 按位与
    const g = (bigint >> 8) & 255;

    // 4. 提取 B 分量
    // 不需要移位，直接与 255 按位与，截取最后8位
    const b = bigint & 255;

    return { r, g, b };
}

// 测试一个鲜艳的蓝色 #0000FF
const color = hexToRgb("0000FF");
console.log(`R: ${color.r}, G: ${color.g}, B: ${color.b}`); 
// 输出: R: 0, G: 0, B: 255

// 测试一个复杂的灰色 #A3A3A3
const grey = hexToRgb("A3A3A3");
console.log(`R: ${grey.r}, G: ${grey.g}, B: ${grey.b}`);

常见错误与陷阱

虽然按位与运算符很强大，但在使用时有一些“坑”是我们必须注意的。

#### 1. 优先级混淆

按位与运算符 INLINECODE73bd4f05 的优先级低于比较运算符（如 INLINECODE7228563d, INLINECODE191b6c49, INLINECODE63e4f384），但高于逻辑与 INLINECODE23b3ec02 和赋值运算符 INLINECODE81541e93。

  • 错误写法：
    •     if (n & 1 === 1) { ... }

这里，INLINECODE600355fe 会先执行。JavaScript 会先计算 INLINECODE091849f9（结果是 INLINECODE508baa1a，即 INLINECODE890ffa0b），然后再执行 INLINECODEc7996be2。这导致逻辑完全错误，无论 INLINECODE606e15ab 是什么，结果都是 INLINECODEa8daf8eb 本身或 INLINECODE9f6d4352，只要 n 不是 0，判断就会通过。

  • 正确写法：
    •     if ((n & 1) === 1) { ... }
    // 或者
    if (n & 1) { ... }

务必使用括号来明确你的意图。

#### 2. JavaScript 数字的 32 位限制

正如我们在前面提到的，JavaScript 的位运算会将操作数视为 32 位有符号整数。这意味着最高位是符号位。

如果你处理的数字超过了 32 位整数的范围（即大于 INLINECODE9ae08536 或小于 INLINECODEbb79ddd2），位运算的结果可能会出乎意料，因为高位会被截断。

let largeNum = 2147483648; // 2^31
// 在二进制中这应该是 100...0 (31个0)
// 但由于是有符号32位整数，最高位是1，这被视为负数
console.log(largeNum.toString(2)); // 正常数字
console.log(largeNum & 1); // 位运算时，它可能被视为负数处理

在处理大数或非整数运算时，请务必谨慎。如果你需要处理 64 位整数或更高精度的位运算，你可能需要使用专门的 BigInt 类型或位运算库，但在标准的数值运算中，请记住这个 32 位的隐形限制。

性能优化建议

在现代 JavaScript 引擎（如 V8）中，普通的算术运算已经被高度优化了。虽然 INLINECODE2488bf97 理论上比 INLINECODE935ce1d1 快，但在现代浏览器中，这种差异通常是微乎其微的（纳秒级别）。

然而，在以下场景中，位运算（包括 &）依然是首选：

  • 嵌入式设备或 IoT：在算力有限的设备上运行 JS（如某些智能家电），位运算能显著降低 CPU 负担。
  • 大规模循环与算法：如果在图形渲染、物理引擎或加密算法中对数百万个数据进行处理，微小的性能提升会被放大成巨大的性能收益。
  • 代码可读性（特定场景）：在处理标志位、权限、颜色等概念上，位运算往往比一堆 if-else 或除法取模更能表达“位操作”的语义。

总结

在这篇文章中，我们深入探讨了 JavaScript 中的按位与运算符 &。我们不仅学习了它如何通过 32 位二进制位进行比较，还通过判断奇偶性、权限系统、状态清除和颜色解析等多个实战例子，看到了它在具体开发中的威力。

掌握位运算不仅能让你写出更高效的代码，还能让你更好地理解计算机底层数据的存储方式。当你下次遇到需要处理状态标志、进行底层优化或者解析二进制数据时，不妨想想我们今天讨论的 & 运算符，它可能是解决你问题的完美工具。

希望这篇文章对你有所帮助。继续探索 JavaScript 的奥秘，你会发现这门语言还有很多像这样精巧而强大的工具等待着你去发掘。

浏览器兼容性

按位与运算符是 ECMAScript 1 的一部分，因此它被所有的现代浏览器广泛支持，无需担心兼容性问题：

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

如果你对其他位运算符（如按位或 INLINECODEec205503、按位异或 INLINECODE2f5ca093、左移 << 等）感兴趣，我们建议你查阅相关的 JavaScript 位运算完整指南，以构建更完整的底层知识体系。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如需转载，请注明文章出处豆丁博客和来源网址。https://shluqu.cn/53422.html
点赞
0.00 平均评分 (0% 分数) - 0 票

相关文章美国1G带宽/1T流量高速vps $17.99/年