JavaScript bitwise operators

There are 7 bitwise operators in JavaScript, namely &, |, ^, ~, <<, >>, >>> (C# does not have this operator, but C# can pass > > logical right shift to implement this operation), the bit operations are all performed in binary.

Bitwise AND operator (&)

Returns 1 when the same bits of the two numbers are both 1, otherwise returns 0, for example, 1&2=0, the binary representation of 1 is 0001, the binary representation of 2 is 0010, both The operation returns 0000.

Bitwise OR operator (|)

Returns 1 when two numbers have the same digit but different digits, otherwise returns 0, such as 1|2=3.

Bitwise XOR operator (^)

When two numbers have the same bits and only one is 1, it returns 1, otherwise it returns 0, for example, 1^2=3.

The bitwise NOT operator (~)

~ is a unary operator that negates all bits. Here we must first talk about the storage of negative numbers. Negative numbers are stored in the two's complement of their positive numbers. Therefore, when we perform operations on negative numbers, we must correctly obtain their binary encoding, that is, the two's complement of their positive numbers. code. The complement is realized by inverting and then adding 1. Let’s look at the example below:

First calculate the complement of 3: the binary form of 3 is 00000011, its complement is 11111100, and its complement is 11111101, so the binary code of -3 is 11111101, then we require ~-3, which is to take its complement, which is 00000010. This is the complement of -3, and convert it into decimal 2.

If you try a few more, you will find that the complement of a number is actually its decimal opposite minus 1.

Left shift operator (<<)

The left shift operator collectively shifts all the bits of the number to the left, so that the first bit becomes the second bit, and the second bit becomes the third bit. . . The vacated new bits are filled with 0s. For example, 1 < The binary representation of is 1111 1111. Move it two places to the left to get 1111 1100. The number starting with 1 is a negative number. To convert it to decimal, you need to perform a complement calculation backwards, that is, first subtract 1 to get 1111 1011 , then negate it to get 0000 0100, convert it to decimal and add a negative sign to get 4. Here you need to pay attention to the binary subtraction algorithm: 1-1=0-0=0, 1-0=1, 0-1=1 (borrow from the high bit).

Here we can find that the left shift operation is to multiply the decimal number by the power of 2.

Signed right shift operator (>>)

Since the left shift is multiplied by 2, the right shift must be divided by 2. In fact, this is the case. If the number itself is a positive number, Then add 0 to the high bit, and if it is a negative number, add 1 to the high bit. For example, 3 > The encoding is 1111 1101. Move it 1 bit to the right to get 1111 1110. This is a negative number. The negative number is converted into decimal. First subtract one to get 1111 1101. Invert it to 0000 0010 to get -2.

The signed right shift operation is to divide its decimal number by the power of 2 and discard the remainder.

Unsigned right shift operator (>>>)

The result of the unsigned right shift operation of positive numbers is the same as the signed right shift operation, mainly the unsigned right shift operation of negative numbers. The difference between it and signed right shift is that whether it is a positive number or a negative number, the high bits are supplemented with 0, so for positive numbers, the signed and unsigned operations are the same, but for negative numbers, it is a world of difference. The difference. For example: -1 > 1111 1111 1111 1111 1111 1111 1111, the first digit is 0, which is a positive number. Converting it to decimal is 230+229+...+20=230(1-1/231)/(1-1/2)=231 -1=2147483647, so we finally got the result we need. The result is terrible, use with caution!

Application of bitwise operators:

After talking about it for so long, the ultimate goal is to use these operators. Let’s look at some examples:

RGB value of color and hexadecimal conversion: For example, a color value: # 33cc10, the first two digits represent red (R), the middle two digits represent green (G), and the last two digits represent blue (B). Convert it into binary encoding: 0011 0011 1100 1100 0001 0000 (assigned to color), First we want to get the red value, we need to shift it 16 bits to the right, color>>16, which is 0000 0000 0000 0000 0011 0011. In this way we get R=51, then if we want to get the green value we need to shift it first Shift right by 8 bits, color>>8, to get 0000 0000 0011 0011 1100 1100, and then change the first eight bits to 0, 0000 0000 0011 0011 1100 1100|0000 0000 0000 0000 1111 1111, to get 0000 0 000 0000 0000 1100 1100, In this way we get G=204, and finally take the blue value, which is to simply change the first eight digits to 0, color | 0000 0000 0000 0000 0001 0000, we get B=16, #33cc10 converted to RGB value is (51,204 ,16). On the other hand, converting RGB to hexadecimal is exactly the opposite method, which is G << 16 | G << 8 | B. I won’t go into details here.

Determine whether a node is the parent node of another node: For example, there are two nodes a and b. The method of ie is a.contains(b) to determine whether a is a child node of b, while other modern browsers use the method It is a.compareDocumentPosition(b). This return result is not a boolean value. If a and b are the same node, it returns 0. If a and b are in different documents or at least one of them is outside the document, it returns 1. If b is before a, 2 is returned, if a is before b, 4 is returned, if b contains a, 8 is returned, if a contains b, 16 is returned, and 32 is exclusive to browsers. The binary codes of 0, 1, 2, 4, 8, and 16 are respectively 0000 0000, 0000 0001, 0000 0010, 0000 0100, 0000 1000, 0001 0000. We can determine whether a.compareDocumentPosition(b) & 16 is converted into boolean. True or false to determine whether a is a node of b, then why not use a.compareDocumentPosition(b) == 16 to determine? Because a.compareDocumentPosition(b) should return 20 (4+ 16), you can use a.compareDocumentPosition(b) == 20 to operate. The advantage of using the & operator is that we don’t need to consider these, we only need Consider whether the & operation with the value 16 we need can return true. (John Resig has a method to simulate compareDocumentPosition, so that it can also be applied under IE. If you are interested, you can refer to the link at the end of the article~)

Bitwise left shift operation: We know that bitwise left shift by 1 bit is multiplied by 2. Then we can use a<<1 instead of a*2, because the efficiency of bit operations is faster than ordinary operations (sometimes you may get the opposite result. The speed of bit operations in JavaScript is very poor, much worse than C# Far away~).

Bitwise right shift: On the one hand, you can use a>>1 instead of a/2. In addition, bitwise right shift can easily convert decimals into integers, such as 3.1415>>0=3, because of the bitwise shift operation The operands must be of integer type (please refer to the ECMA-262 manual for details), so the decimal places will be discarded after the operation~

Note: Bitwise operators require that their numeric operands be of integer type, and these operands are used Represented as a 32-bit integer, the 32nd bit is the sign bit. Moreover, the operands are limited to the 32-bit integer range, and the right operand is required to be between 0 and 31. (The binary encoding in this article is not standardized and is only for convenience~)