Bit arithmetic in JS

Bitwise operators treat operands as a series of individual bits, rather than as a numeric value. So before this, you have to mention what is "bit":
Values or characters are stored in memory as 0 and 1 sequence, each 0 and 1 is called 1 bits, for example, 10 binary data 2 is stored in the computer as 0 0 0 0 0 0 1 0, when we change the in-memory bit value, this value represents the meaning of the changes, such as moving 2 forward, Now the storage unit becomes 0 0 0 0 0 1 0 0, this value represents the decimal 4, which is the bitwise operator principle.

There are 6 bitwise operators
& Bitwise AND
| bitwise OR
^ Bitwise XOR OR
~ Take counter
>> Right Shift
<< left Shift


1 & Operators
& is a two-dollar operator that combines the corresponding bits of the operand in a particular way if the corresponding bit is 1, then the result is 1, and if any bit is 0, the result is 0.
1 & 3 Results for 1
Let's see how it works:
The binary representation of 1 is0 0 0 0 0 0 1
The binary representation of 3 is0 0 0 0 0 1 1
According to the rules of &, the result is 0 0 0 0 0 0 0 1, decimal means 1

as long as any one is 0 & the result of the operation is 0., so you can use & to set an unnecessary bit of a variable to 0, such as the binary representation of a variable is 0 1 0 0 1 0 0 1, I want to keep low 4 bits, eliminate the high 4 bits with & 0x0f on it (live: 0x0f is 16 notation, corresponding binary is 0 0 0 0, 1 1 1 1), this feature has a very important application, which will be mentioned later.

2 | Operator
| The difference with & is that if any one of the operands in the corresponding bit is 1 then the result is 1.
1 | The result of 3 is 3.

3 ^ operator
^ Operator with | Similar, but a little different is if the two operation bits are 1, the result is 0
0 1 0 0 0 0 0 1
0 1 0 1 1 0 1 0
Generate 0 0 0 1 1 0 1 1

4 ~ operator
~ is to reverse 1 to 0, 0 to 1

5 shift operator shift operator moves the bit left or right by the specified value
<< moves left and >> moves to the right, the bits that exceed are lost, and the vacated bits are 0

such as 0 1 0 0 0 0 0 0 0 0 0 0 0 1 1 (decimal 16387) move left two bits will become
0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 (decimal 12)
Move the two digits to the right.
0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 (decimal 4096)


Here are some specific applications
Mentioned earlier 2 move forward 1 bits to 4 Use this feature to do multiplication
2 << 1 =4
3 << 1 = 6
4 << 1 = 8
Similarly, >> can do division


Any decimal place it >> 0 can be rounded
such as 3.14159 >> 0 = 3;

^ The operating suit has a magical character.
As the following code

<textarea id="runcode0" class="pt" rows="12"></textarea>

Run code Copy Code Save Code Hint: You can modify some of the code before running

This way you will find N1 = 4, n2=3,n1,n2 exchange values without using any of the intermediate variables, and all integers apply this case

Processing of colors
We know that a set of 16 binary values can represent an RGB color
such as 0xff0000, where r=ff, G = xx, b = 00,3 color combinations become red
We can extract from the color values red, yellow, blue, or combine 3 colors into an RGB color
This is very useful in the ease of color.

First, the binary representation of the color 0xFF0000 is 1111 1111 0000 0000 0000 0000
The high 8 bit is the red value, the low 8 bit is the green value, the middle is the blue value
Obviously, moving the color right 16 bits is the red value.

2. var color = 0xFF0000;
3. var r = Color >> 16;

Copy Code

How do I get the green value (8-bit)?
First move the color to the right 8 bits
turns 0000 0000 1111 1111 0000 0000, now the green value is low 8 bits, we just turn 8 bits of the previous bit into 0 then we get the green value, the & operator mentioned earlier, if any one is 0 then the result is 0.
So we put the value & 0000 0000 0000 0000 1111 1111 To get the green value, then
var g = Color >> 8 & 0xFF to get the green value
Blue values in the same way
var b = color & 0xFF

<textarea id="runcode1" class="pt" rows="12"></textarea>

Run code Copy Code Save Code Hint: You can modify some of the code before running

The red value of 0xff0000 should be 255, green and blue 0

What if 3 values are combined into an RGB color?
r = 0000 0000 0000 0000 1111 1111 (255)
g = 0000 0000 0000 0000 1111 1111 (255)
b = 0000 0000 0000 0000 0000 0000 (0)
First move G to the left 8 bits
became 0000 0000 1111 1111 0000 0000
Then proceed with B | Operation
| The action is if any one of the operands in the corresponding bit is 1 then the result is 1.
then it becomes 0000 0000 1111 1111 0000 0000
The same way to move R right 16 bit again with the value just now | The operation consists of a full RGB color (without transparency)

Here's a verification.
We know that when r=255, G = 255, B = 255, the composition of the color is white, that is, 0xFFFFFF;

<textarea id="runcode2" class="pt" rows="12"></textarea>

Run code Copy Code Save Code Hint: You can modify some of the code before running

The correct output of the FFFFFF;

Bit arithmetic in JS