Saturday, April 11, 2020

Fancy representation of JavaScript topics 26 letters

Look at the effect first.

Let's think first:
 // What does the following sentence print? 
[+ [] [0] + []] [ 0] [1 ]
We look directly at the effect:


If you feel that printing a letter is too addictive, print a word?
 // Note that printing in Chrome

[[] [0] + []] [ 0] [5 ] + [[] [[] [0] + []] [ 0] [4 ] + [[] [0] + []] [ 0] [5 ] + [[] [0] + []] [ 0] [1 ] + [[] [0] + []] [ 0] [2 ]] + []] [0] [ 8] + [[[] == []] [ 0] + [] [ 0] [2] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [6 ] + [[] [[] [0] + []] [ 0] [4 ] + [[] [0] + []] [ 0] [5 ] + [[] [0] + []] [ 0] [1 ] + [[] [0] + []] [ 0] [2 ]] + []] [0] [ 23] + [[] [0 ] + []] [0] [ 3] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [8 ] + [+ [1+[] [ 0] + [] [ 0] [3] + 309] [0 ] + []] [0] [ 7] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [6 ] + [[] [0] + []] [ 0] [0 ]
Let's look at the effect again:



Basic test

If you want to understand how the above is implemented, first check your own understanding of JavaScript implicit type conversion:

 // What will the following values print? 
console.log (+ []);
console.log ( 1+ []);
console.log (+ undefined);
console.log ([] == []);
console.log (+ [] == + []); 

If you cannot accurately state the above results, or if you want to better understand the above conversion process, we recommend that you first look at two articles:

JavaScript thematic headache type conversion (Part 1) .md

JavaScript topic headache type conversion (bottom) .md

Start Decryption

First effect:

  [] [0]

Because the empty array does not have the first element, undefined will be printed

Second effect:

  undefined + []

undefined + [] is equivalent to undefined + “” resulting in a “undefined” string.

This time has obtained an undefined string, we can only use the corresponding letters through the subscript.

However, if we don't use parentheses, how do we get the value? At this point, we need to use a trick:

The third effect:

  ['undefined'] [ 0] [0 ]

This time we get the “u” letter, by changing the subscript, we can get u, n, d, e, f, i total of 6 letters

Isn't it interesting, but that's just the beginning.

NaN

First effect:

  +undefined

is equivalent to Number (undefined), the result is NaN

Second effect:

  NaN+ []

equivalent to NaN+“” result to NaN string

The third effect:

  [NaN] [0 ] [1]

In this way we can get the letter a.

false

First effect:

  [] == []

The result is naturally false

Note, because of the two previous examples, you may have gradually understood that when taking out a value, if you turn into a string, if you take the letter of the subscript

Second effect:

 // convert to string by value + []
false + []

The third effect:

 // take the letter by [value] [0] [n]
['false'] [ 0] [0 
]

we can take out the f letter.

In this way, we can take out the five letters “f”, “a”, “l”, “s”, “e”.

true

Take a direct look at the core steps:

  + [] == + []

equivalent to comparing “” == “”, the result is naturally true

The rest of us must have been cooked.

The

letters obtained by the above 4 methods are still limited, and we need some other way to get more letters.

Infinity

Note: In the front we have taken the letter e.

  + (“1e309")

to a number, the equivalent of 1 times 10 309 times, greater than the maximum number of JavaScript, so the result will be Infinity, and the rest of the The steps are the same as above and will not be discussed later.

We can remove t and y from it.

function

Note: By this point we have obtained u n d e f i t r f a l s t y, from which we can spell the string “find”.

[]["find"]

displays the find function of the array, with the result:

function find() { [native code] }

With this approach, we can take out c o v.

But note: taking the letter v this way will have compatibility issues!!!

The magic constructor

Note that we already have 17 letters, we can now spell “constructor”!

constructor can be a magical property because through it we can get constructors for various types of value objects!

0["constructor"] // function Number() { [native code] }

""["constructor"] // function String() { [native code] }

...

In the above way, we can take m, g

Perhaps we wonder, how does“” mean it?

[] + [] === "" // true

name

With m, we can now spell the name, but what is the use of name?

"to" + ""["constructor"]["name"] // "toString"

Our ultimate goal is to spell out the “toString” string

The almight toString

The reason

we spelled out toString is because using toString this method can represent 26 letters!

At this time, we would like to introduce the usual obscure, but here indeed the final protagonist toString method!

The following quote from W3C school:

Role:

The
toString () method converts a Number object to a string and returns the result.

Usage:

NumberObject.toString (radix)

Parameter Explanation:

radix: Represents the radix of a number, making an integer between 2 and 36. If this parameter is omitted, base 10 is used. Note, however, that if the parameter is a value other than 10, the ECMAScript standard allows the implementation to return arbitrary values

To take an example:

var number = new Number(10);
number.toString('16');

That is, 10 is represented in hexadecomals. The above example prints the result “a”.

Note that radix can represent 36 maximum!!!!

var number = new Number(35);
number.toString('36');

The printed letter is “z”! In this way, we can represent all the remaining letters!

But how do we use this toString method? To be precise, how do we generate a number object? Do you still need to spell new Number?

I

don't even need it! At this point, the advantages of JavaScript implicit type conversion are highlighted:

35["toString"](36) // z

Note: By this time, we also had to use ()!

By this point, we can already show all the letters, some are very easy to show, some are somewhat troublesome, and the display is very long, such as the letter p:

25[[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6] + [[] + []][0][[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][1]+[[[] == []][0] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[+[] == +[]][0] + []][0][1]+[[][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[+[] == +[]][0] + []][0][1]][[[][0] + []][0][1]+[+[][0] + []][0][1]+[0[[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][1]+[[[] == []][0] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[+[] == +[]][0] + []][0][1]+[[][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[+[] == +[]][0] + []][0][1]]+[]][0][11]+[[][0] + []][0][3]]](27)

No comments:

Post a Comment