JavaScript Pretend Guide

This article adheres to

If you don't understand, you are an idiot. The code I write must be awesome.

The concept of js is used to introduce some js pretending skills.

Please use the last three of the following tips with caution in team projects (mainly considering the issue of readability), otherwise your leader will punish you without any negotiation.

[[165610]]

Boolean

This technique is used a lot and is very simple.

 !!'foo'

By using two inversions, you can force conversion to Boolean type. This is more commonly used.

Number

This is also very simple, String converted to Number

 +'45'
 +new Date

It will be automatically converted to number type. It is commonly used.

IIFE

This is actually very practical and not a show-off. It's just that other languages ​​don't have this kind of gameplay, and it's really cool to show it to students who don't know much about JS.

 (function(arg) {
 // do something
 })(arg)

The practical value is that it can prevent global pollution. However, with the popularity of ES2015, there is no need to use this now. I believe that in five years, this way of writing will gradually decline.

I've been working for five years, so it's pretty good to show off in front of interns.

Closure

Closures are a very interesting part of JavaScript. The immediately executed function above is an application of closures.

If you don’t understand, go back and look up some books. There are also many discussions on Zhihu, you can go and take a look.

Closures are a sign of mastery for beginners (but they are not).

 var counter = function () {
 var count = 0  
 return function() {
 return count++
 }
 }

The closure is used above, which looks quite impressive, but it seems to have no practical value.

So what about this?

 var isType = function (type) {
 return function(obj) {
        return toString.call(obj) == '[Object ' + type + ']';
 }
 }

It is very easy to implement category determination through high-order functions. (Don’t forget Array.isArray() for determining Array)

Of course, it's obvious that this is just the basics and can't be more impressive. Let's look at the next section

Event

Event response frontends must be written to death, but generally speaking, how do you write a counter?

 var times = 0  
 var foo = document .querySelector('.foo')
 foo.addEventListener('click', function() {
 times++
 console.log(times)
 }, false)

It seems that there is no problem, but! Why is the variable times placed outside? It is only used once and placed outside. What if there is a naming conflict, or what if it is modified outside?

At this time, such an event monitoring code is quite powerful

 foo.addEventListener('click', (function() {
 var times = 0  
 return function() {
 times++
 console.log(times)
 }
 })(), false)

How about it? Doesn’t it feel different immediately? It instantly becomes more stylish!

By creating a closure, encapsulating times inside it, and then returning the function. This usage is not very common.

parseInt

High energy warning

From here on, carefully write the following code into the company code!

The parseInt function is too common, how can it be so impressive? The answer is~~

Now press F12 and copy and paste the following code in the console:

 ~~3.14159
 // = > 3
 ~~5.678
 // = > 5

This trick is very cool. The principle is that ~ is an operation called bitwise negation, which returns the inverse of the value. It is a binary operation.

The reason is that numbers in JavaScript are all of double type, and they must be converted to int when performing bitwise operations. Repeating ~ twice will return the original number.

Hex

Hexadecimal operation. It is actually a usage of Array.prototype.toString(16)

When you see this word, the first thing that comes to your mind is definitely CSS colors.

If you want to do it randomly, you can do this

 (~~(Math.random()*(1 < < 24 ))).toString(16)

I highly recommend reading the original link below. I learned the last three techniques there.

«

Left shift operation. This operation is very cool. Generally, those who are familiar with C will know this operation. Generally, those who have changed their careers as front-end programmers may not understand it very well (I am talking about me ☹).

This is also a binary operation. Shift the value left in binary.

Explain the operation of 1<<24 above.

In fact, it is 1 shifted left 24 bits. 00000000000000000000001 shifted left 24 bits becomes 10000000000000000000000000

Don't believe it?

Try pasting the following code in the console

 parseInt('1000000000000000000000000', 2) === (1 < <   twenty four )

There is actually a more understandable way to explain it.

 Math.pow(2,24) === (1 < <   twenty four )

Because it is a binary operation, the speed is very fast.

BTW

 [].forEach.call($$("*"),function(a){
 a.style.outline = "1px solid #" +(~~(Math.random()*(1 < < 24 ))).toString(16)
 })

This is how it translates into normal language

 Array.prototype.forEach.call(document.querySelectorAll('*'),
 dom = >   dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)

Others

I won’t introduce other things like await, Decorators, etc. which are basically understood by using TypeScript.

I wish you all more awesome play