~, &, |, ^ allelic operator in some applications in JavaScript

Out of curiosity, I’ve recently seen some code using bitwise operators. What is used in front end development. To sum up ~

Note: the code using the operator becomes less readable. If you have any questions, please point out or add

application

Judge odd and even

Num & 1 === 1 // Num is odd

Num & 1 === 0 // Num is even

Since the least significant binary odd number is 1 and the least significant binary even number is 0, ampersand 1 can be used to determine even and odd numbers (ampersand below).

The efficiency of

Same as % 2 to judge the parity speed

integer

Similar to the parseInt

~ ~ 3.14159 / / 3

3.14159 > > 0 / / 3

3.14159 > > > 0 / / 3

3.14159 | 0 / / 3

‘>>>’ is not used to round negative numbers, anything else

The efficiency of

var count = 5000000
var num = 1.51
console.time('parseInt');
for (var i = count; i > 0; i--) {
    parseInt(num);
}
console.timeEnd('parseInt'); / / 51.822998046875 ms

console.time('~ ~');
for (var i = count; i>0; i--) {
    ~~num;
}
console.timeEnd('~ ~'); / / 14.94580078125 ms
Copy the code

Bitwise operators are much more efficient, but less readable

Compares whether the values are equal

The equivalent of = =

^ Also converts a string number to a number and then evaluates it

1 ^ 1 // 0

Equal returns 0 and unequal returns non-0

The efficiency of

Compared with ==, ^ is more efficient but less readable

When the variable value is a number, the exchange of values is complete

A to the b is the same thing as a to the b

var a = 1 , b = 2
a ^= b
b ^= a
a ^= b
console.log(a) / / 2
console.log(b) / / 1
Copy the code

process

a.toString(2) / / 1 = > 1
b.toString(2) / / 2 = > 10
a = a ^ b
// a is now binary 11, which is binary 3
a.toString(2) / / 3 = > 11
b.toString(2) / / 2 = > 10
b = b ^ a
// b is now binary 1 (decimal 1) according to ^, and a is successfully assigned to B
a.toString(2) / / 3 = > 11
b.toString(2) / / 1 = > 1
a = a ^ b
// b is now binary 10 (2 in decimal), and is successfully assigned to A
Copy the code

The efficiency of

var count = 5000000
var num = 1.51
console.time('Temporary variable');
for (var i = count; i > 0; i--) {
    var t,a = 1,b = 2;
    t = a;
    a = b;
    b = t;
}
console.timeEnd('Temporary variable'); / / 14.343994140625 ms

console.time(A '^');
for (var i = count; i>0; i--) {
    var d = 1, g = 2
	d ^= g
	g ^= d
	d ^= g
}
console.timeEnd(A '^'); / / 13.31396484375 ms
Copy the code

It is almost as efficient as the temporary variable method but ^ can only be used for numeric types

Conversion of RGB values to hexadecimal color values

Convert hexadecimal to RGB

function hexToRGB(hex){
    var hex = hex.replace("#"."0x"),
        r = hex >> 16,
        g = hex >> 8 & 0xff,
        b = hex & 0xff;
    return "rgb("+r+","+g+","+b+")";
}
Copy the code

RGB to hexadecimal

function RGBToHex(rgb){
    var rgbArr = rgb.split(/[^\d]+/),
        color = rgbArr[1] < <16 | rgbArr[2] < <8 | rgbArr[3];
    return "#"+color.toString(16);
}
Copy the code

RGB values and hexadecimal color conversion here I do not understand, guess should be RGB values and hexadecimal color conversion between the corresponding relationship

Break down

Bit operation NTO ‘~’

What the W3C says

Definition: One of the few ECMAScript operators related to binary arithmetic

Processing process:

• Convert operands to 32-bit numbers
• To convert a binary number into its binary inverse
• Convert binary numbers into floating point numbers

You’re essentially taking the negative of the number and subtracting it by 1 (-x-1).

Since binary is made up of zeros and ones, the decimal part doesn’t exist when you convert it to binary

console.log('~null: ', ~null);       / / = > 1
console.log('~undefined: ', ~undefined);  / / = > 1
console.log('~0: ', ~0);          / / = > 1
console.log('~ {} :, ~ {});/ / = > 1
console.log('~ [] :', ~ []);/ / = > 1
console.log('~ (1/0) :, ~ (1/0));      / / = > 1
console.log('~false: ', ~false);      / / = > 1
console.log('~true: ', ~true);       / / = > - 2
console.log('~ 3:, ~3);     / / = > - 4
console.log('- 3.3:, ~3.3);       / / = > - 4
console.log('~ (2.999) :, ~ (2.999));   / / = > 1
Copy the code

So ~~ is the number minus minus 1 and then minus 1 (minus x minus 1) and then minus 1 can be used to round

console.log('~~null: ', ~ ~null);       / / = > 0
console.log('~~undefined: ', ~ ~undefined);  / / = > 0
console.log('~ ~ 0:', ~ ~0);          / / = > 0
console.log('~ ~ {} :~ ~ {});/ / = > 0
console.log('~ ~ [] :'~ ~ []);/ / = > 0
console.log('~ ~ (1/0) :, ~ ~ (1/0));      / / = > 0
console.log('~~false: ', ~ ~false);      / / = > 0
console.log('~~true: ', ~ ~true);       / / = > 1
console.log('~ ~ 3:, ~ ~3);     / / = > 3
console.log('~ ~ 3.3:, ~ ~3.3);       / / = > 3
console.log('~ ~ (2.999) :, ~ ~ (2.999));   / / = > - 2
Copy the code

Bit operation AND ‘&’

What the W3C says

Definition: To operate on the binary form of a number. It aligns the digits in each digit, AND then applies the following rules to two digits in the same position

Rule: Both 1’s are 1’s

Such as:

var num = 1651 & 1
console.log(num) / / 1
Copy the code

In the operation, the two digits are converted to binary (32 bits) and then ampersand is performed as described above

 1651 = 0000 0000 0000 0000 0000 0110 0111 0011 
  1   = 0000 0000 0000 0000 0001 0000 0000 0001 
---------------------------------------------
 AND  = 0000 0000 0000 0000 0000 0000 0000 0001
Copy the code

An operation OR ‘|’

What the W3C says

Operate directly on the binary form of a number. When calculating bits, the OR operator follows the following rule: if one is 1, it is 1

For example,

var iResult = 25 ^ 0
alert(iResult);	/ / output "25"
Copy the code

The operation process

25 = 0000 0000 0000 0000 0000 0000 0001 1001
 0 = 0000 0000 0000 0000 0000 0000 0000 0000
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1001
Copy the code

The number from 1001 to 10 is 25

Bit operation XOR ‘^’

What the W3C says

Definition: Operations directly on binary forms. XOR differs from OR in that it only returns a 1 if only one digit stores a 1

Rules:

Such as:

var iResult = 25 ^ 3;
alert(iResult);	/ / output "26"
Copy the code

Process:

 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010Binary code11010Equal to decimal26 
Copy the code

Left shift operation <<, signed right shift operation >>, unsigned right shift operation >>>

Here I will directly post the link, W3C arbitrary door

Reference:

www.deanhan.cn/js-bitwise-… Segmentfault.com/a/119000000…