JavaScript二进制操作与位掩码详解

作者:青柠

时间:2026-10-31

浏览:189

本文系统介绍JavaScript中的二进制基础与各类位运算符。涵盖按位AND、OR、XOR、NOT及左移右移操作,详解位运算赋值语法。通过实例演示如何利用位掩码提取字节高低4位,适用于权限控制、颜色处理等底层数据操作场景。

文章目录

二进制基础概念

二进制数由0和1组成,这是计算机使用的基础数字系统。二进制可以表示每个数字,与十进制相似。例如:10 的二进制表示为 1010。十进制和二进制之间的转换可以通过数学方法进行。例如,将十进制数字20转换为二进制:

以十进制数20为例,其转换为二进制的计算过程如下: 20 / 2 = 10 余数0 10 / 2 = 5 余数0 5 / 2 = 2 余数1 2 / 2 = 1 余数0 1 / 2 = 0 余数1

根据上述计算,20对应的二进制表示为 10100。

JavaScript位运算符概览

JavaScript支持多种针对数字类型的位运算符。以下是常用的几种运算符及其用法。

按位AND运算

按位AND运算符使用符号 &,对两个操作数的二进制位执行逻辑与操作,返回新的位模式。示例如下:

console.log(5 & 9); // 输出1

在此示例中,数字 5 的二进制为 101,数字 9 的二进制为 1001。执行按位AND操作后,结果为 1。

按位OR运算

按位OR运算符使用符号 |,对两个操作数的二进制位执行逻辑或操作,返回新的位模式。示例如下:

console.log(5 | 9); // 输出13

在此示例中,数字 5 的二进制为 101,数字 9 的二进制为 1001。执行按位OR操作后,结果为 1101。

按位XOR运算

按位XOR运算符使用符号 ^,对两个操作数的二进制位执行逻辑异或操作,返回新的位模式。示例如下:

console.log(5 ^ 9); // 输出12

在此示例中,数字 5 的二进制为 101,数字 9 的二进制为 1001。执行按位XOR操作后,结果为 1100。

按位NOT运算

按位NOT运算符使用符号 ~,对操作数的每一位进行取反,返回新的位模式。示例如下:

console.log(~5); // 输出-6

在此示例中,数字 5 的二进制为 101。执行按位NOT操作后,结果为 -6。

左移运算

左移运算符使用符号 <<,将第一个操作数的二进制位向左移动指定的位数,右侧空位补0。示例如下:

console.log(5 << 2); // 输出20

在此示例中,数字 5 的二进制为 101。执行左移操作后,结果为 10100,即十进制数 20。

右移运算

右移运算符使用符号 >>,将第一个操作数的二进制位向右移动指定的位数,左侧空位用符号位填充。示例如下:

console.log(10 >> 1); // 输出5

在此示例中,数字 10 的二进制为 1010。执行右移操作后,结果为 101,即十进制数 5。

位运算赋值操作符

除了基本位运算符,JavaScript还提供了位运算赋值操作符,用于将位运算结果直接存回原变量。常见操作符如下:

&=

按位AND赋值运算符使用符号 &=,将左侧操作数与右侧操作数进行逻辑与运算,并将结果存回左侧变量。示例如下:

let a = 5;
a &= 9;
console.log(a); // 输出1

在此示例中,变量 a 初始值为 5,即二进制 101。执行按位AND赋值操作后,结果为 1,因为 101 & 1001 等于 1。

|=

按位OR赋值运算符使用符号 |=,将左侧操作数与右侧操作数进行逻辑或运算,并将结果存回左侧变量。示例如下:

let a = 5;
a |= 9;
console.log(a); // 输出13

在此示例中,变量 a 初始值为 5,即二进制 101。执行按位OR赋值操作后,结果为 1101,因为 101 | 1001 等于 1101。

^=

按位XOR赋值运算符使用符号 ^=,将左侧操作数与右侧操作数进行逻辑异或运算,并将结果存回左侧变量。示例如下:

let a = 5;
a ^= 9;
console.log(a); // 输出12

在此示例中,变量 a 初始值为 5,即二进制 101。执行按位XOR赋值操作后,结果为 1100,因为 101 ^ 1001 等于 1100。

<<=

左移赋值运算符使用符号 <<=,将左侧操作数向左移动指定位数,右侧补0,并将结果存回左侧变量。示例如下:

let a = 5;
a <<= 2;
console.log(a); // 输出20

在此示例中,变量 a 初始值为 5,即二进制 101。执行左移赋值操作后,结果为 10100,即十进制数 20。

>>=

右移赋值运算符使用符号 >>=,将左侧操作数向右移动指定位数,左侧补符号位,并将结果存回左侧变量。示例如下:

let a = 10;
a >>= 1;
console.log(a); // 输出5

在此示例中,变量 a 初始值为 10,即二进制 1010。执行右移赋值操作后,结果为 101,即十进制数 5。

位掩码技术应用

位掩码是利用位运算符设置或清除特定位的技术。在JavaScript中,位掩码可用于多种场景,例如:

  • 布尔状态:利用单个位表示真或假。
  • 权限管理:利用多个位表示不同类型的访问权限。
  • 颜色编码:利用三个字节(24位)分别表示红、绿、蓝分量。

以下示例展示如何使用位掩码从单个字节中提取两个独立值:

const byte = 0b10110110;
const mask1 = 0b11110000;
const mask2 = 0b00001111;
const value1 = (byte & mask1) >> 4; // 提取高4位并右移4位
const value2 = byte & mask2; // 提取低4位
console.log(value1, value2); // 输出 11 6

在此示例中,首先定义字节 0b10110110。接着定义两个掩码:mask1 用于保留高4位,mask2 用于保留低4位。通过按位AND运算应用掩码,对 value1 结果右移4位以获取正确值。最终输出 value1 和 value2,其值分别为 11 和 6。

总结

JavaScript的二进制操作和位运算为处理底层数据提供了有力工具。本文介绍了基本位运算符、赋值运算符及位掩码的提取技巧。尽管日常开发中不常直接使用,但在需要高效处理二进制数据时,这些技术极具价值。

以上就是关于JavaScript二进制操作及位掩码应用的详细解析,更多相关技术内容请参阅本站其他文章。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章