深入了解JavaScript中的二进制操作及位掩码应用

 更新时间:2023年06月09日 10:29:12   作者:饺子不放糖  
在JavaScript中,二进制操作可以说是一项非常强大和有用的技能,尤其是在处理数据和位掩码时,它们是不可或缺的,本文将介绍JavaScript中的二进制操作,包括什么是二进制以及如何在JavaScript中进行二进制操作

什么是二进制?

二进制数由0和1组成,这是计算机使用的基础数字系统。二进制可以表示每个数字,与十进制相似。例如:10 的二进制表示为 1010。十进制和二进制之间的转换可以通过数学方法进行。例如,将十进制数字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运算符用符号 & 表示,它在两个数字的二进制位上执行逻辑AND操作,并返回一个新的位模式。例如:

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

在这个例子中,数字 5 的二进制表示为 101,而数字 9 的二进制表示为 1001。执行按位AND操作后,我们得到的结果是 1

按位 OR(|)

按位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

左移(<<)

左移运算符用符号 << 表示,它将其第一个操作数向左移动指定的位数,并使用零填充右侧的空位。例如:

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

在这个例子中,数字 5 的二进制表示为 101。执行左移操作后,我们得到的结果是 10100,即十进制数 20

右移(>>)

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

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

在这个例子中,数字 10 的二进制表示为 1010。执行右移操作后,我们得到的结果是 101,即十进制数 5

位运算赋值

除了上述基本位运算符之外,JavaScript还提供了一些位运算赋值操作符,用于对变量或表达式进行位运算并将结果保存回同一个变量中。以下是最常见的位运算赋值操作符:

&=

按位AND赋值运算符用符号 &= 表示,它将其左侧的操作数与右侧的操作数进行逻辑AND操作,并将结果保存回左侧的操作数中。例如:

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

在这个例子中,变量 a 初始值为 5,即二进制 101。执行按位AND赋值操作后,我们得到的结果是 1,因为 101 & 1001 等于 1

|=

按位OR赋值运算符用符号 |= 表示,它将其左侧的操作数与右侧的操作数进行逻辑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

<<=

左移赋值运算符用符号 <<= 表示,它将其左侧的操作数向左移动指定的位数,并使用零填充右侧的空位,并将结果保存回左侧的操作数中。例如:

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中,可以将位掩码用于各种目的,例如:

  • 布尔值:使用一个位表示 true 和 false。
  • 权限:使用几个位来表示不同类型的权限。
  • 颜色:使用三个字节(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位以获取正确的值。最后,我们输出 value1value2 的值,它们分别为 116

结论

JavaScript中的二进制操作可以帮助您更好地处理数字和位掩码。本文介绍了一些基本的二进制运算符和位运算赋值操作符,并展示了如何使用位掩码从一个字节中提取多个值。虽然这些技术可能不会在您的日常编程中经常使用,但当您需要进行二进制操作时,它们可能会非常有用。

以上就是深入了解JavaScript中的二进制操作及位掩码应用的详细内容,更多关于JavaScript二进制及位掩码的资料请关注脚本之家其它相关文章!

相关文章

  • javascript文本框内输入文字倒计数的方法

    javascript文本框内输入文字倒计数的方法

    这篇文章主要介绍了javascript文本框内输入文字倒计数的方法,涉及javascript针对键盘事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript WeakMap的具体使用

    JavaScript WeakMap的具体使用

    本文主要介绍了JavaScript WeakMap的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • layui动态表头的实现代码

    layui动态表头的实现代码

    这篇文章主要介绍了layui动态表头的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 轻松实现JavaScript图片切换

    轻松实现JavaScript图片切换

    这篇文章主要帮助大家轻松实现JavaScript图片切换,内容很精简,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JavaScript让IE浏览器event对象符合W3C DOM标准

    JavaScript让IE浏览器event对象符合W3C DOM标准

    IE浏览器event对象跟W3C实现的不一样.所以自己封装一个EventUtil类来让IE浏览器的event对象与W3C一样.
    2009-11-11
  • 微信小程序返回上一页的各种方法实例

    微信小程序返回上一页的各种方法实例

    在开发小程序的时候我们总是能遇到各种奇怪的需求,下面这篇文章主要给大家介绍了关于微信小程序返回上一页的各种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • js中encode、decode的应用说明

    js中encode、decode的应用说明

    这里简单介绍下js中的encode、decode的字符
    2012-10-10
  • 高亮显示web页表格行的javascript代码

    高亮显示web页表格行的javascript代码

    本文从简单的css高亮显示表格的某一行说开去,探讨了在不同浏览器下对于高亮功能的兼容性。阐述针对表格本身绑定javascript事件实现这一功能的方法。
    2010-11-11
  • JavaScript实现复选框全选功能

    JavaScript实现复选框全选功能

    这篇文章主要为大家详细介绍了JavaScript实现复选框全选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • webpack结合express实现自动刷新的方法

    webpack结合express实现自动刷新的方法

    这篇文章主要给大家介绍了关于webpack结合express实现自动刷新的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用webpack具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05

最新评论