Bit operations in Javascript

What is a bit operation?

All data from modern computers is stored on the device in binary form. That is, 0, 1 two states, the computer on binary data operations (+, -, *, /) are called bit operations, that is, the symbol bit to participate in the operation of the operation.

Binary representation

JavaScript stores numbers as 64-bit floating-point numbers, but all bitwise operations are performed as 32-bit binaries. JavaScript converts the number to a 32-bit signed integer before performing a bit operation. When the bitwise operation is performed, the result is converted back to a 64-bit JavaScript number. Bitwise operations only work on integers. If an operator is not an integer, it is automatically converted to an integer before running.

In ECMAScript, all integer literals default to signed integers, with signed integers using 31 bits for integer values and 32 bits for integer symbols, 0 for positive numbers and 1 for negative numbers. The value ranges from -2147483648 to 2147483647.

An operator

The bitwise non-operation on any number is – (x+1)

If I shift any number x to the left, it’s x times 2 to the n

If I shift any x to the right, I get x over 2 to the n

Binary and decimal conversion

ToString and parseInt for base conversion:

// Decimal -> binary
num.toString(2)
// Binary -> decimal
parseInt(num,2)

Copy the code

The use of bit operations

1. integer

Sum decimals with 0

1.2 | 0 / / 1
Copy the code

~ ~ (1.2)
Copy the code

2. Border judgment

If we want to judge whether the mouse pointer is in the container, there will be up, down, left, right, left up, left down, right up, right down these 8 states, then we can put the flag bit with 1, 2, 4, 8 or can obtain these 8 states:

let flag = 0;
if (pos.left < left) flag = flag | 8;
if (pos.right > right) flag = flag | 2;
if (pos.bottom > bottom) flag = flag | 4;
if (pos.top < top) flag = flag | 1;
switch(flag) {
    / /
    case 1: 
    / / right
    case 2:
    / / right
    case 3:
    / /
    case 4:
    / / right
    case 6:
    / / left
    case 8:
    / / left
    case 9:
    / / lower left
    case 12:
    // code
}
Copy the code

If we have a series of control switch, through the form of a | b | c than ‘{a: true, b: true, c: true}’ easier

3. Judge odd and even

The last bit of odd binary is 1, so odd & 1 === 1

num & 1 // 1: odd, 0: even
Copy the code

4. Check system permissions

Assume that a management system has four levels of permissions (A, B, C, and D). Each account has one or more permissions. For example, the admin account has four levels of permissions (A + B + C + D), and the guest user has four levels of permissions (B + C). We put the permissions, respectively, in 0001, 0010, 0100, 1000 (that is, the most popular 1,2,4,8), said if the admin user has a, b, c, d four kind of permissions, the admin permissions for 1 | 2 | | 4 8 = 15, Guest user permissions for 4 | 8 = 12, then can judge whether the user has a certain permissions are as follows:

admin & 4= = =4
admin & 8= = =8
admin & 2= = =2
admin & 1= = =1
Copy the code

5. Switch variables 0 and 1

var flag = 0
flag = flag ^ 1 / / 1
flag = flag ^ 1 / / 0
Copy the code

6. Swap two variable values

let a= 1,b=2;
a=a^b;
b=a^b;
a=a^b;
// b:1,a:2
Copy the code

7. Use indexOf to determine

~arr.indexOf(..) / / ~ - 1 = = = 0
Copy the code

8. RGB and hexadecimal color conversion

Convert RGB (255, 255, 255) => ‘#’ + ‘FF’ + ‘FF’ + ‘FF’. Cleverly using the left shift, we treat the hexadecimal part of the value as an integer, FFFFFF, which we can interpret as FF0000 + FF00 + FF. As we explained above, if the left shift is calculated in hexadecimal, FF << 4, FF << 2, FF, FF, FF << 16 if we convert to binary: RGB ->hex

function RGBToHex(rgb){
    // Fetch values in RGB
    let arr = rgb.match(/\d+/g);
    if(! arr || arr.length ! = =3) {
        console.error('RGB values are not valid');
        return
    }
    let hex = (arr[0] < <16 | arr[1] < <8 | arr[2]).toString(16);
    // automatically complete the first digit
    if (hex.length < 6) {
        hex = '0' + hex;
    }
    return ` #${hex}`;
}
Copy the code

hex->rgb

function hexToRGB(hex){
    if (!/ ^ # ([0-9 a - fA - F]) {3} {1, 2} $/.test(hex)) {
        console.error('Color is illegal'); 
        return
    };
    // #f00 becomes #ff0000
    if (hex.length == 4) {
        hex = hex.replace(/([0-9a-fA-F])/g.'$1 $1');
    };
    let num = hex.replace(The '#'.'0x');
    let r = num >> 16;
    // 0xff = 255
    let g = num >> 8 & 0xff;
    let b = num  & 0xff;    
    return `rgb(${r}.${g}.${b}) `;
}
Copy the code

The resources

• www.w3school.com.cn/js/js_bitwi…
• www.cnblogs.com/mopagunda/p…