Who says JavaScript is simple?

Here are some tricks and pitfalls that JavaScript beginners should know about. If you are already an expert, please review it by the way.

JavaScript is nothing more than a programming language. How could it be wrong?

1. Have you tried to sort a set of numbers?

Javascript's sort() functions are sorted by default using alphanumeric (string Unicode code points).

So [1,2,5,10].sort() it outputs[1, 10, 2, 5].

To sort an array correctly, you can use the[1,2,5,10].sort((a, b) => a?—?b)

It's a simple solution, if you have to know there's a hole.

2. New Date () very good

new Date()can accept:

• No parameters: Returns the current time
• One parameter x : Returns January 1, 1970 + x milliseconds. People who understand Unix know why.
• New Date (1, 1, 1) returns 1901, February, number 1th \. Because the first parameter represents 1900 plus 1, the second parameter represents the second month of the year (and therefore February)?—? the normal brain loop will be indexed from 1?—?, the third parameter is obviously the first day of the month, so 1?—? Sometimes the index does start at 1?—?。
• New Date (2016, 1, 1) does not add 2016 to 1900. It stands for 2016 only.

3. Replace does not "replace"

"Bob"const replaced = S.replace ("Bob" 

I think it's a good thing because I don't like functions that change their input. You should also know that replace only the first matching string will be replaced:

If you want to replace all matching strings, you can use /g a regular expression with flags:

"Bob". Replace (//Replace all matching strings

4. When comparing, pay attention to

These is OK//True//true//These is not[1,2,3] = = = [1,2,//false 

Reason: [Three-to-one] and [two] are independent arrays. They just happen to contain the same values. They have different references and are not === comparable.

5. The array is not the original data type

' Object '//TRUE//True/  /True//But .... //True    

If you want to know if your variable is not an array, you can still use theArray.isArray(myVar)

6.Closed Package

This is a very famous interview question:

Const GREETERS = [] for(Ten; i++) {  Greeters.push (function (console.log (i)})}greeters[// 10greeters[//10greeters[//      

Do you think it will output 0, 1, 2 ...? Do you know why it's not output like this? How would you modify let it output 0, 1, 2 ...?

Here are two possible workarounds:

In let lieu var . Boom. Solved.

letvarthe difference is in scope. is the nearest block of function, the scope of which var let is the nearest enclosing block, and the enclosing block can be less than the function block (if not in any block, let and both are var global). Source

Workaround: Usebind:

Greeters. Push (console. Log. bind (i))    

There are many other ways. It's just my two first choice.

7. When it comes to bind

What do you think this will output?

Foo {  constructor (name) {    this.name = name  }  greet () {    console.log (  This.somethingasync (). Then (this.greet)}}new Foo (' dog '). Asyncgreet ()    

If you think this program will crash the hint Cannot read property ‘name‘ of undefined , give you a point.

Cause: greet not running in the correct context. Similarly, there are still many solutions to this problem.

I personally like

Asyncgreet () {this.somethingasync ().  Then (this.greet.bind (this))}   

This ensures that an instance of the class is invoked as a context greet .

If you think you greet should not run outside the instance context, you can bind it in the constructor of the class:

Foo {constructor (name) {this.name = nameThis.greet.bind (this)}}   

You should also know that the arrow function ( => ) can be used to preserve the context. This method can also:

Asyncgreet () {this.somethingasync ().  Then (() = {this.greet ()})}   

Although I think the last method is not elegant.

I am glad that we have solved the problem.

Summarize

Congratulations, you can now safely put your program on the Internet. Even running may not go awry (but usually) Cheers \o/

If there's anything else I should mention, please tell me!

If you are learning the front-end of the process encountered any problems or want to acquire learning resources, welcome to join the front-end Learning Exchange QQ Group: 328058344 We learn the front end together!

Who says JavaScript is simple?