This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

I’m sure many of you are confused when you first see these arithmetic symbols in Javascript. I am not the same, at first look meng force I flash, so see these operators, two faces meng force. In case you don’t understand the awesome code written by a colleague, tidy up this article.

An operator

| & ~ ~ ~ ^ > > < < binary operators, all of these are operated in numerical binary form directly.

Bitwise or |

If you operate directly on the binary form of a number, one of each digit is 1.

var i = 8 | 1
console.log(i);	/ / 9
Copy the code
8 = 0000 0000 0000 0000 0000 0000 0000 1000 
1 = 0000 0000 0000 0000 0000 0000 0000 0001 
-------------------------------------------- 
OR = 0000 0000 0000 0000 0000 0000 0000 1001
Copy the code

Binary 1001 converts to base 10 to 9.

The bitwise and &

When you operate directly on the binary form of a number, if each digit is 1, it is 1, otherwise it is 0.

var i = 10 & 3
console.log(i);	/ / 2
Copy the code
10 = 0000 0000 0000 0000 0000 0000 0000 1010 
3  = 0000 0000 0000 0000 0000 0000 0000 0011 
-------------------------------------------- 
AND = 0000 0000 0000 0000 0000 0000 0000 0010
Copy the code

Binary 0010 is converted to base 10 to 2.

Xor ^ by bit

Operation directly on the binary form of a number, equal bits are 0, unequal bits are 1.

var i = 10 ^ 3
console.log(i);	/ / 9
Copy the code
10 = 0000 0000 0000 0000 0000 0000 0000 1010 
3  = 0000 0000 0000 0000 0000 0000 0000 0011 
-------------------------------------------- 
XOR = 0000 0000 0000 0000 0000 0000 0000 1001
Copy the code

Binary 1001 converts to base 10 to 9.

Bitwise not ~

Operate directly on the binary form of a number, and invert any number x by bit.

var i = ~5
console.log(i);	/ / - 6
Copy the code

The result is -(x + 1), and the calculation principle is as follows:


5      = 0000 0000 0000 0000 0000 0000 0000 0101 
~      = 1111 1111 1111 1111 1111 1111 1111 1010
-------------------------------------------- 
32The first digit is theta1So this is a negative number. To convert binary to negative, you need to reverse and then +1, to10After base, we add negative numbers. Radix-minus-one complement =0000 0000 0000 0000 0000 0000 0000 0101Radix-minus-one complement +1  = 0000 0000 0000 0000 0000 0000 0000 0110(Converted to decimal6) is converted to decimal6Plus the sign becomes a negative minus6
Copy the code

The inverse of ~x is ~~x, which is -(-(x+1) +1). For floating point numbers, ~~value can replace parseInt(value).

console.log(~~10.5) / / 10
console.log(~~-10.5) / / - 10
Copy the code

And the former is more efficient. Its disadvantage is that it is difficult to understand, but its advantage is that it can be used to pretend.

var count = 5000000;
var h = 2.101;

console.time('parseInt');
for (var i = count; i > 0; i--) {
    parseInt(h);
}
console.timeEnd('parseInt'); / / 55.91796875 ms

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

Moves to the right > >

The right-shift operator moves the first operand to the right by a specified number of digits. The excess right digit is cleared and the left digit is zeroed.

var i = 10 >> 3
console.log(i);	/ / 1

var j = 4 >> 3
console.log(j);	/ / 0
Copy the code
10  = 0000 0000 0000 0000 0000 0000 0000 1010 
-------------------------------------------- 
>>3 = 0000 0000 0000 0000 0000 0000 0000 0001

4   = 0000 0000 0000 0000 0000 0000 0000 0100 
-------------------------------------------- 
>>2 = 0000 0000 0000 0000 0000 0000 0000 0000

Copy the code

Binary 0001 is converted to base 10, which is 0.

The left < <

The left-shift operator moves the first operand to the left by the specified number of digits. The excess left digit is cleared and the right digit is zeroed.

var i = 1 << 3
console.log(i);	/ / 8
Copy the code
1    = 0000 0000 0000 0000 0000 0000 0000 0001 
-------------------------------------------- 
<< 3 = 0000 0000 0000 0000 0000 0000 0000 1000 
Copy the code

Binary 1000 converts to base 10 to 8.

Other non-binary operators

The power operator **

The power operator (**) returns the result of exponentiating the first and second operands. It is equivalent to math.pow, but it also accepts BigInts as its operand.

console.log(3支那4);
console.log(Math.pow(3.4));
// expected output: 81

console.log(10* * -2);
console.log(Math.pow(10, -2));
/ / expected output: 0.01
Copy the code

The exponentiation operator is right-associative: a ** b ** c is equal to a ** (b ** c).

console.log(3支那2支那2);
console.log(3* * (2支那2));
// expected output: 81
Copy the code

But note that if the base is negative, use the following syntax.

(-4) * *2
// expected output: 16
Copy the code

Or if you expect the inverse of the exponentiated number, it should look like this:

- (4支那2)
// expected output: -16
Copy the code

An error occurs when using an ambiguous syntax.

- 4支那2
// Uncaught SyntaxError: Unary operator used immediately before exponentiation expression. Parenthesis must be used to disambiguate operator precedence
Copy the code

The power assignment operator **=

The power assignment operator (**=) assigns a variable to its initial value and the value to the right of the equals sign exponentiated.

let a = 3;

console.log(a **= 2);
// expected output: 9

console.log(a **= 0);
// expected output: 1

console.log(a **= 'hello');
// expected output: NaN
Copy the code

The null-value merge operator??

Null-value merge operator (??) Is a logical operator that returns the right-hand operand if the left-hand operand is null or undefined, otherwise returns the left-hand operand.

var a = null;
var b = undefined;

var aa = a ?? 'xxx'
console.log(aa) // 'xxx'

var bb = b ?? 'yyy'
console.log(bb) // 'yyy'
Copy the code

At first glance and | | is similar, please see when the value is 0 (left) or “‘

var a = 0;
var b = ' ';

console.log(a ?? 'xxx') / / 0
console.log(a || 'xxx') // xxx

console.log(b ?? 'yyy') / /"
console.log(b || 'yyy') // yyy
Copy the code

?? Return an rvalue only if the left-hand operand is null or undefined, remember.

Numeric delimiter _

Run into a long number can not count over, do not know how many digits it has? The es new standard number separator _ is designed to solve this problem. It’s not exactly an operator. They put it in to make up the numbers. Its proposals are at github.com/tc39/propos… .

let budget = 1 _000_000_000_000;

// It is a number
console.log(budget === 10支那12); // true

let budget2 = 1 _000

console.log(budget2 === 10支那3); // true
Copy the code

Do you feel fresh?

Reference thanks

Thanks for reading it. You know what I mean.

  • Javascript bitwise inverse operator (~)