从本文你将了解到什么?
异或运算符的使用
或运算符的使用
与运算符搭配取反运算符的使用
上篇文章主要讲了从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值，取反，居然就把的各种二进制位运算操作符差不多都用了一遍，是不是感觉很神奇。
接下来本公众号的“字节系列”会持续更新位运算相关的内容，这也是字节武装建立 的初衷。
往期回顾
速记卡
当n为二进制数时，
与运算 0x00000n00 & 0x00000100 读取n的值；
异或运算 0x00000n00 ^ 0x00000100 对n取反；
或运算 0x00000n00 | 0x00000100 把n设为1；
与运算+取反运算 0x00000n00 & ~0x00000100 把n设为0。
