深入了解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二进制及位掩码的资料请关注脚本之家其它相关文章!

相关文章

  • Js Jquery创建一个弹出层可加载一个页面

    Js Jquery创建一个弹出层可加载一个页面

    Js Jquery创建一个弹出层,当加载一个页面进弹出层时出现乱码,示例代码如下,大家可以参考参考
    2014-05-05
  • [js高手之路]原型式继承与寄生式继承详解

    [js高手之路]原型式继承与寄生式继承详解

    下面小编就为大家带来一篇[js高手之路]原型式继承与寄生式继承详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript引用赋值与传值赋值总结

    JavaScript引用赋值与传值赋值总结

    这篇文章主要介绍了JavaScript引用赋值与传值赋值总结,在JavaScript中基本数据类型都是传值赋值,复合数据类型都是引用赋值(传地址)也叫引用传址,下文更多相关资料,需要的小伙伴可以参考一下
    2022-05-05
  • javascript中的有名函数和无名函数

    javascript中的有名函数和无名函数

    javascript中的有名函数和无名函数...
    2007-10-10
  • 细数localStorage的用法及使用注意事项

    细数localStorage的用法及使用注意事项

    这篇文章主要介绍了细数localStorage的用法及使用注意事项,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解babel是如何将class语法糖转换为es5的语法

    详解babel是如何将class语法糖转换为es5的语法

    这篇文章主要详细介绍了babel是如何将class语法糖转换为es5的语法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • 解决JSON.stringify()自动将中文转译成unicode的问题

    解决JSON.stringify()自动将中文转译成unicode的问题

    下面小编就为大家分享一篇解决JSON.stringify()自动将中文转译成unicode的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • uni-app使用微信小程序云函数的步骤示例

    uni-app使用微信小程序云函数的步骤示例

    这篇文章主要介绍了uni-app使用微信小程序云函数的步骤示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • js如何修改对象数组的key值

    js如何修改对象数组的key值

    这篇文章主要介绍了js如何修改对象数组的key值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • 微信小程序实现摇筛子效果

    微信小程序实现摇筛子效果

    这篇文章主要为大家详细介绍了微信小程序实现摇筛子效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05

最新评论