What is a bit operation

So before we look at what a bit operation is, let’s look at what a bit operation is. A bit is the smallest unit of information stored in a computer. In a binary number system, a bit is represented by a 0 or a 1. When we learn the data type of a programming language, we will always tell us that the storage of int needs 4 bytes, ranging from -2 147 483 648 to 2 147 483 647. The value of 1 in int is 0000 0000 0000 0000 0000 0001. So bitwise operations operate directly on the binary bits of an integer in memory.

Next, the conversion between binary and decimal is introduced

Decimal to binary (positive) —- Mod 2, reverse order (ps: decimal and negative conversion is different)

Binary to decimal —- add by weight

The operator

1, according to the position and (&) 1 return 1

10 &13 10:0000 0000 0000 10: 0000, 0000, 0000, 1101 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- result: 0000 0000 0000 1000Copy the code

2, the bitwise or (|) have 1 back to 1

42 | 13 42:0000, 0000, 0010, 1010, 13: 0000, 0000, 0000, 1101 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- result: 0000 0000 0010 1111Copy the code

3, according to the bit or (^) different return 1, the same return 0

42 ^ 13 42:0000 0000 0000 1010 13: 0000, 0000, 0000, 1101 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- result: 0000 0000 0010 0111Copy the code

4. Invert (~) invert all bits (binary inverse)

42:0000, 0000, 0010, 1010 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 42:1111 1111 1101 0101Copy the code

5, signed shift left (<<) move n bits to the left

13 < < 2, 13:0000, 0000, 0000, 1101 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- < < 2: 52 -----> 13 * (2^2) = 52Copy the code

6, signed move right (>>) Move n bits to the right (copy the leftmost bits to the leftmost)

13 > > 2:13, 0000, 0000, 0000, 1101 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > > 2: 3 -----> 13 / (2^2) = 3Copy the code

7, unsigned right shift (>>>) (the leftmost bit is filled with 0, so the result must be non-0

Application of bit operation

1. Judge whether odd or even

// Even &1 = 0 // odd &1 = 1 console.log(2&1) // 0 console.log(3&1) // 1Copy the code

We can see from the binary-to-decimal method above that except for the rightmost bit, 1 X 1* 0 = 1, all the other bits are 1 times 2 to the n, so all the other bits must be even, which implies that the last bit must be odd.

2. Exchange variables of two values

var a = 5
var b = 8
a ^= b
b ^= a
a ^= b
console.log(a)   // 8
console.log(b)   // 5
Copy the code

The key point

b = (a ^ b) ^ b = a ^ (b ^ b) = a ^ 0 = a;
Copy the code

Two identical numbers are bitwise xor 0, and one number is bitwise xor 0 itself.

3. Authority authentication and type judgment

Scenario: In the background management system, the operation rights are divided into level-1, level-2, and level-3 administrators. Level-1 administrators have the highest operation rights, while level-2 and level-3 administrators have lower operation rights. What kind of data structure would make it easy for a logged-in user to perform an operation? We use bits to represent the management permissions, level 1 uses bit 3, level 2 uses bit 2, level 3 uses bit 1, that is, level 1 permissions are expressed as 0B100 = 4, level 2 permissions are expressed as 0B010 = 2, level 3 permissions are expressed as 0B001 = 1. If A can only be operated by the first and second levels, then this value is expressed as 6 = 0b110, which is the same as the first level and the following: 6&4 = 0b110&0b100 = 4, the value obtained is not 0, so it is considered to have permission. Similarly, the value of 6&2 = 2 is not 0, and the value of 6&1 = 0, so the level 3 has no permission. Here the flag bit 1 means open and 0 means closed. The advantage of this is that we can use a number instead of an array to represent the set of permissions for an operation, and it is also very convenient to make permissions judgments.

Bit operations in VUE practice

VUE3 uses static markup to improve rendering performance, where bit-based operations are used

The enumeration type here uses the signed left shift to indicate the dynamic type of the tag, and the & is used to check for the presence of a dynamic tag

The source code address is attached

React also uses the source address

conclusion

Bit operations can be found in various frameworks and library source code, react, Vue, Lodash, etc. Understand bit operation can be used as the pre-knowledge of reading source code, in the development of systems and components, libraries can also be used flexibly