The principle analysis of one line JS code

Besides this line of code, let's preview the knowledge first.

We all know that the computer operating system is divided into 32-bit or 64-bit. So what does this 32-bit or 64-bit mean? In fact, to explain it is not difficult, in fact, this is the computer processing data mechanism, 32-bit represents the computer's CPU (central processing

Device) can handle 32 bits of data at a time, the computer data is stored in bits, the unit is 8 bits = 1 bytes (b). Then push up, 1kb (Kbytes) = 1024b (bytes), 1MB (MBytes) =1024kb (Kbytes), 1GB (gigabytes) =

1024MB (MBytes).

What does that have to do with today's talk? It certainly does.

Let's start by looking at a bunch of code, as shown in:

Then run the view effect on the browser, as shown in:

Isn't it amazing? The two letters of the "SB" can be output by the usual symbols, which is just too much for me. Next, I'll analyze the principles.

First, before analyzing, we need to know a little bit of knowledge, that is, since the computer is bitwise processing data, then the browser processing the data in the JS code is no exception. So there is a basic concept in JS, that is, the bitwise operator.

What is a bitwise operator? Simply put, in the most basic level, the number of values in the memory of the bit to manipulate the value. We can understand the meaning of the bitwise operator by means of the bit operation principle of the computer. But there is one thing that needs to be different: The bitwise operator cannot

Directly manipulate the 64-bit numeric value, instead of converting the 64-bit value to a 32-bit value.

And the number of conversions is only two, that is 0 and 1.0 is a positive number, 1 is negative. A long string of 0 and 1, such as 0000 0000 0000 0000 0000 0000 0000 0000 (4 X 8 = 32), is called machine code.

Machine code is a binary format for storing data. So-called binary, that is, only 0 and 12 numbers to store.

The first 31 bits represent integers, and the 32nd bit represents a numeric symbol. That is, the + or-number, you can interpret it as a mathematical positive negative sign.

Positive numbers can be stored directly in binary, and negative numbers require twos complement. That is, we first take the absolute value of a negative number, that is, the negative number is converted to a positive number to take the binary code, and then take the inverse, here is the inverse meaning because the binary is only 0 and 12 kinds of

Numbers, so it goes without saying that 0 becomes 1 and 1 becomes 0.

Then add a 1, when the last digit of the binary is 1 o'clock, plus one needs to carry the previous one 0 to 1, and then this last 1 becomes 0.

We are usually decimal number, such as 10, then how to convert to a binary number, by dividing by 2, then take the remainder, and finally the remainder is inverted. To keep the quotient equal to 0 o'clock without continuing to remove, and then take their remainder, reversed order.

For example 10/2 Quotient 5, the remainder is 0, quotient 5 is not equal to 0, continue in addition, the quotient 2, the remainder is 1, the quotient is not equal to 0, continue to divide, the quotient is 1, the remainder is 0, and then once, the quotient 0, the remainder of 1, then the quotient is 0, can not be removed,

The column is 0101, then the inverted row is 1010, no use of the bit with 0 complement, or do not fill, here for the sake of understanding, we are not on the front of the 28 0 is 0000 0000 0000 0000 0000 0000 0000 1010. So the 10 binary number is

Is 1010. Then-10 of the binary number should be the first 10 of the binary number to find 1010, and then take the inverse 0 change to 0, 0101. Because the last one is 1, according to the above, then add a 1, 0110.

What's the point of saying so much, with today's code? That's of course. After understanding the bit operators, we also need to understand a knowledge that is the JS operator priority, such as:

First of all, we need to be patient with the meaning of the above symbol, at least the meaning of the corresponding symbol used in the above code to clarify. Then we can break the above code into multiple sub-expressions based on the precedence rules of the operators.

The main explanation is that the number is negative first, then minus 1. Returns a Boolean value. Then there is the transformation rule problem, which, for a non-primitive data type, is first converted to the original data type, the original data type. It's actually

Toprimitive () This method to convert. It has two parameters, the first parameter represents the data type, and the second argument is a numeric value or a string. If the first parameter is the original data, then the original is returned, which is the value itself. Otherwise, it returns an object

Like. As for what is the original data type, it is actually the basic data type (string, Boolean, Value ...). I believe I have to tell you later. The second parameter returns any original value, and if the object also returns itself.

So, next, we'll split the long string of code above.

First look at the leftmost (!) ( ~+[]) +{}), we know that () represents a call to a function or a grouping of an expression, so I'll split it (~+[]), well, first look at [] This symbol, is actually an empty array, the empty array will be converted to 0, for what?

First, it calls the object's underlying valueof () method to return the array itself, and in fact it gets a null value, and the null value calls the number () function when it encounters an operator of +, but there is actually a bottom

The Tonumber () function is converted to a convertible numeric data, which is then converted to a numeric value of 0 by the number () function. Then it becomes the ~ + 0, then the first take negative, change-0, then minus 1 becomes-1, then becomes the!-1, will return a false

Boolean value (can be viewed by viewing!) the logical non-conversion returns the relevant knowledge about why this returns false).

Then another expression (False + {}), this is the key, first of all, {} This is an empty object, it is obvious that the toprimitive () method is called, the first data type is an object, so return object, the second call this method, found that the first

Two parameters are also objects, so it returns an object, so (false + {}) is also a false[object,object].

OK next go on, because the second one is a bit long, we know that a pair of brackets wrap up the subscript of an array.

Then [--[~+ ""][+[]]*[~+[]]+~~!+[] "such a long string, we can do so, first look at [~ +"], first "" empty string is actually the same as NULL is converted to the value 0, and then ~+0 is 1,-- The operator is to subtract 1 and then participate in the operation, so that's 1-1.

Became-2.

See [+[]] actually through the above rules is not difficult to draw is [0] so also become [ -2][0], this means, is an array only-21 elements, and now to be removed is labeled 0 is the first element namely-2, so also returned-2, then

[~+[]] it is self-evident that [ -1],[-2]*[-1] This is obviously going to be -2* (-1) and naturally it will come to 2.

Next See ~~!+[] here is actually from the right to the left, because the operator's priority problem, through the above diagram can be seen, so here is the first conversion!+[] return true, and then converted to 1, and then ~~1, according to the number of the first to reverse and subtract

The law of 1 gets here is actually 1, then a long string of symbols becomes [2+1] that is [3], and then becomes

False[object Object][3], through such a difficult analysis to get the letter S, and then look at this part ({}+[]) [[~!+[]]*~+[]], in the first operation expression inside, it is obvious that the object + an object will derive what, naturally is [object, Object], here's

+ is clearly considered as the role of splicing, do not forget it is not just to do the addition operation, but also do the stitching symbol it.

And then the subsequent conclusion [-2 *-1] came to [2], then [object,object][2], take out B, so the two words of SB.

The principle analysis of one line JS code