Detailed graphic and text explanation of JavaScript's awesome guide

This article adheres to the concept of

If you don’t understand it is your sb, the code I wrote must be awesome

Some js pretentious skills.

The following techniques, the last three, should be used with caution in team projects (mainly considering readability issues), otherwise, the leader will do you without any negotiation.

Boolean

This technique is used a lot and is very simple

!!'foo'

By negating two, it can be forced to convert to Boolean type. More commonly used.

Number

This is also very simple. Convert String to Number

+'45'
+new Date

will be automatically converted to number type. More commonly used.

IIFE

This is actually very practical and not considered pretentious. It's just that there is no such thing in other languages. It's pretty awesome for students who don't know much about js.

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

The practical value lies in preventing global pollution. But now with the popularity of ES2015, there is no need to use this. 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

closureWell, js is particularly fun of a place. The above immediate execution function is an application of closure.

If you don’t understand, go back and read the book. There are also many discussions on Zhihu, so you can go and read it.

The use of closures is simply a sign of a master for beginners (actually it is not).

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

Closures are used above, which seems quite pretentious. 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 easy to realize the category determination through high-order functions. (Don’t forget Array.isArray() to determine Array)

Of course, obviously, this is just the basics and cannot be more pretentious. Let’s look at the next section

Event

Event response front-end must be badly written. Generally speaking, how to write a counter?

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

There seems to be no problem, but! Why is the variable times placed outside? It is used once and placed outside. What should I do if there is a naming conflict, or what should I do if it is modified outside.

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

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

How about it, do you feel different immediately? He instantly became more powerful!

By creating a closure, encapsulate times inside, and then return the function. This usage is less common.

parseInt

High energy warning

From here on, the following code should be carefully written into the company code!

parseIntThis function is too ordinary, how can you pretend to be awesome. The answer is ~~

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

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

This technique is very cool, the principle Yes ~ is an operation called bitwise NOT, which will return the complement of the value. It is a binary operation.

The reason is that numbers in JavaScript are all double types, and they need to be converted into int during bitwise operations. After two ~ times, they are still the original numbers.

Hex

Hexadecimal operations. In fact, it is a usage of Array.prototype.toString(16)

When I see this word, what comes to my mind must be the color of CSS.

If you want to be random, you can do this

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

The original text link below is highly recommended to read. The last three skills were all learned there.

«

Left shift operation. This operation is particularly tricky. Generally speaking, if you play C a lot, you will know a little bit about this operation. Generally speaking, front-end coders who have become a monk may not understand it very well (this is me ☹).

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

Explain the operation of 1<<24 above.

In fact, 1 is shifted to the left by 24 bits. 000000000000000000000001 Shift 24 bits to the left and become 10000000000000000000000000

Don’t believe it?

Try to paste the following code in the console

parseInt(&#39;1000000000000000000000000&#39;, 2) === (1 << 24)

In fact, there is a more understandable way to explain

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

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

BTW

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

The translation into normal language is like this

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

Others

Others, such as some awaits, Decorators and so on. I won’t introduce things that you can basically understand using TypeScript.

The above is the detailed content of Detailed graphic and text explanation of JavaScript's awesome guide. For more information, please follow other related articles on the PHP Chinese website!