二进制位运算实战(2)-异或，按位或，按位与，取反上篇文章主要讲了从ArrayBuffer内存中读取数据，也即是从byt

从本文你将了解到什么?
异或运算符的使用
或运算符的使用
与运算符搭配取反运算符的使用

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

1 toggle功能的实现

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

每一个单元格都绑定了点击事件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的情况。

“|按位或”运算

按位或运算符的规则如下所示:

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的情况。

"按位与"和“取反”

来回顾下与运算的规则:

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)-开发一个进制转换工具

二进制、八进制、十进制、十六进制数据转换

二进制转十进制心算大法

速记卡

当n为二进制数时，
与运算 0x00000n00 & 0x00000100 读取n的值；
异或运算 0x00000n00 ^ 0x00000100 对n取反；
或运算 0x00000n00 | 0x00000100 把n设为1；
与运算+取反运算 0x00000n00 & ~0x00000100 把n设为0。