What do you learn from this article?

The use of xor operators


The use of or operators
The use of an inverse operator with an operator



Binary operations (1)- Develop a base conversion tool

The last article focused on reading data from an ArrayBuffer memory, which means reading the binary values of each cell from an array of Bytes.


1. Realization of toggle function

Let’s look at how you can toggle between 1 and 0 when you click on a cell.





Each cell is bound to the click event toggleBit. This is to change the data in the ArrayBuffer memory by changing the values of the bytes array elements. As a result, the decimal numbers generated by reading the same block of memory through the Uint32Array also change. 
function toggleBit(bit) {    
    bytes[bit >> 3] = bytes[bit >> 3^ (0x1 << (bit & 0x7));    
    writeBits(); 
}Copy the code


Let’s look at this code.


First, the code bit>>3 and bit&0x7 were covered in the previous article and won’t be covered here.


Xor operation

The rules for xOR operators are as follows:


1 ^ 1 = 0

0 ^ 1 = 1

1 ^ 0 = 1

0 ^ 0 = 0


The xOR rule is not easy to remember, but just remember the phrase “addition does not carry” and everything will fall into place.


In binary, the result of 1 + 1 is 10. And if you don’t add, 1 + 1 = (1), 0 = 0, take the 1 out of the carry, so 1 to the 1 is going to be 0.


Then the xOR effect can be used to reverse the value of position N to achieve the toggle function.

0x00000n00 ^ 0x00000100Copy the code


We start by making a “negator” using the left shift operation, which is 0x00000100.

0x1 << 2(position of n)Copy the code


If n is 1,0 x00000100^0x00000100 you get 0x00000000,

If n is 0,0 x00000000^0x00000100 is 0x00000100;

You can always invert position n.



2. Implementation of set function

If you want to set the value of the cell directly to 1 or 0, how do you do that?

We bind setBit events to the 1 and 0 keys on the keyboard.

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();  
}Copy the code


Setting a cell to 1 uses the or operator, while setting a cell to 0 uses the and and invert operators.


Let’s talk about setting the cell to 1.




“| bitwise or” operations

The rules for bitwise or operators are as follows:

1 | = 1

0 | = 1

1 | 0 = 1

0 | 0 = 0


Let’s say we want to set position n to 1.

0x00000n00 | 0x00000100Copy the code


As usual we make a “setter” with the left shift operation, which is 0x00000100.

0x1 << 2(position of n)Copy the code


If n is 1, 0 x00000100 | 0 x00000100 got is 0 x00000100,

If n is 0, 0 x00000000 | 0 x00000100 get or 0 x00000100;

You can always set position N to 1.



Now let’s talk about setting the cell to 0.


“Bitwise and” and “inverse”

To review the rules of operation and:

1 and 1 = 1

0 and 1 = 0

1 & 0 = 0

0, 0 = 0


Last time we used and for get, but now we’re going to set position n to 0.

0x00000n00 & ~0x00000100Copy the code


As usual, we make a “zero” with the left displacement operation, that is, we get 0x00000100 first. Then invert 0x00000100 to get 0x11111011.

~ (0x1 << 2(position of n)Copy the code


If n is 1,0 x00000100&0x11111011 is 0x00000000,

If n is 0, 0 x00000000 & | 0 0 x11111011 get or 0 x00000000;

You can always set position n to 0.


3 summary

So far, we have gone through the main methods of this binary transformation visualization tool. It’s amazing to use almost all of the bytes operators by simply bitwise get, set, and reverse.


Next, the “byte series” of this public account will continue to update the content related to bit operation, which is also the original intention of the establishment of byte armed.


Review past



Binary operations (1)- Develop a base conversion tool


Binary, octal, decimal, hexadecimal data conversion


Binary to decimal mental arithmetic




Shorthand CARDS

When n is a binary number,


And operations 0x00000n00&0x00000100 read the value of n;
The xOR operation 0x00000n00 ^ 0x00000100 negates n;
Or operation 0 x00000n00 | 0 x00000100 set n to 1;
0x00000n00&0x00000100 set n to 0.