十六进制7a转二进制_二进制位运算实战(2)-异或,按位或,按位与,取反

dc0174ed9e40c5ce175c6a080154a7a1.png
从本文你将了解到什么?
异或运算符的使用
或运算符的使用
与运算符搭配取反运算符的使用
二进制位运算实战(1)-开发一个进制转换工具​mp.weixin.qq.com
b5105cfb32cdfe22a74db2437d540098.png

上篇文章主要讲了从ArrayBuffer内存中读取数据,也即是从bytes数组中读取每个单元格对应的二进制值。

下面我们接着来讲一下点击单元格时值在1和0之间来回切换是怎么实现的。

1 toggle功能的实现

a4dda1559314b5e8ef52223e53e13d4d.png


每一个单元格都绑定了点击事件toggleBit。其实就是通过改变bytes数组的元素值来改变ArrayBuffer内存中的数据。这样一来,通过Uint32Array读取同一块内存数据后得到的十进制数也会跟着一起变动。

function toggleBit(bit) {    
    bytes[bit >> 3] = bytes[bit >> 3] ^ (0x1 << (bit & 0x7));    
    writeBits(); 
}


我们分析下这段代码。
首先代码中的bit>>3和bit&0x7上篇已经讲过,这里就不再累述了。

“异或”运算


异或运算符的规则如下所示:
1^1=0
0^1=1
1^0=1
0^0=0
异或的规则不太好记, 但是只要记住一句话"加法不进位", 那么一切将会豁然开朗;
在二进制中,1 + 1 的结果是10。而加法不进位就是 1 + 1 = (1)0 = 0,把进位的1去掉,所以1^1的结果就是0。
那么异或效果可以用于对位置n的值取反, 实现toggle功能。

0x00000n00 ^ 0x00000100


我们先用左位移运算制作一个"取反器",也即是得到0x00000100。

0x1 << 2(n的位置)


如果n是1,0x00000100^0x00000100的得到的就是0x00000000,
如果n是0,0x00000000^0x00000100的得到的就是0x00000100;
总是可以对位置n的值取反。

2 set功能的实现


如果想要把单元格的值直接置为1或者0,那么又应该怎么实现呢。
我们对键盘的1和0按键绑定setBit事件。

function setBit(bit, value) {    
    if (value === 1) {      
        bytes[bit >> 3] = bytes[bit >> 3] | (0x1 << (bit & 0x7));    
    } else if(value === 0) {      
        bytes[bit >> 3] = bytes[bit >> 3] & ~(0x1 << (bit & 0x7));    
    }    
    writeBits();  
}


把单元格设置为1时,会用到“或”运算符,而把单元格设置为0时,就要用到“与”运算符和“取反”运算符。
我们先讲讲把单元格设置为1的情况。

81b589c56aa9efee0e3993c8af33b484.gif


“|按位或”运算


按位或运算符的规则如下所示:
1|1=1
0|1=1
1|0=1
0|0=0
比如我们要把位置n的值设置为1。

0x00000n00 | 0x00000100


照例我们先用左位移运算制作一个"设置器",也即是得到0x00000100。

0x1 << 2(n的位置)


如果n是1,0x00000100|0x00000100的得到的就是0x00000100,
如果n是0,0x00000000|0x00000100的得到的还是0x00000100;
总是可以把位置n的值设置为1。
下面再讲讲把单元格设置为0的情况。

a8e0ce9284e78ca34ce8f50cd19ef08c.gif


"按位与"和“取反”


来回顾下与运算的规则:
1&1=1
0&1=0
1&0=0
0&0=0
上篇我们用到与运算是为了get值,但现在我们要把位置n的值设置为0。

0x00000n00 & ~0x00000100


照例我们先用左位移运算制作一个"置0器",也即是先得到0x00000100。然后对0x00000100取反, 得到0x11111011。
~(0x1 << 2(n的位置))
如果n是1,0x00000100&0x11111011的得到的就是0x00000000,
如果n是0,0x00000000|0&0x11111011的得到的还是0x00000000;
总是可以把位置n的值设置为0。

3 总结

到这里,关于这个二进制转换可视化工具的主要方法我们都讲了一遍。只是简单地对bytes数组的元素进行按位get值,set值,取反,居然就把的各种二进制位运算操作符差不多都用了一遍,是不是感觉很神奇。
接下来“字节系列”会持续更新位运算相关的内容,这也是字节武装建立的初衷。

往期回顾

二进制位运算实战(1)-开发一个进制转换工具​mp.weixin.qq.com
b5105cfb32cdfe22a74db2437d540098.png
二进制、八进制、十进制、十六进制数据转换​mp.weixin.qq.com
019442b537a130d5793c9f1fe6dacc5c.png
二进制转十进制心算大法​mp.weixin.qq.com
dee8772325f3c66ca7f55faa3ef2bc5a.png


速记卡

当n为二进制数时,
与运算 0x00000n00 & 0x00000100 读取n的值;
异或运算 0x00000n00 ^ 0x00000100 对n取反;
或运算 0x00000n00 | 0x00000100 把n设为1;
与运算+取反运算 0x00000n00 & ~0x00000100 把n设为0。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值