Beginners should be aware of these 8 web front end Javascrip Traps

Here we give a few tricks for J beginner and list some pitfalls. If you are already a brick house, you can read it.

1. Have you tried to sort the array elements?

J is sorted by default using the dictionary order (alphanumeric). Therefore, [1,2,5,10].sort () results are [1, 10, 2, 5].

If you want the right sort, you should do this: [1,2,5,10].sort ((A, B) +-a)

2. New Date () very useful

The new Date () is used in the following ways:

Do not receive any parameters: returns the current time;

Receives a parameter x: Returns the value of January 1, 1970 + x milliseconds.

New Date (1, 1, 1) returns February 1, 1901.

However, the new Date (2016, 1, 1) does not add 2016 to the 1900 basis, but only represents 2016.

3. The replacement function is not really replaced?

Let S = "Bob"

Const REPLACED = S.replace (' B ', ' l ')

replaced = = = "LOB"//will only replace the first B

s = = = "Bob"//and the value of s does not change

If you want to replace all B, use the regular:

"Bob". Replace (/b/g, ' l ') = = = ' LOL '

4. Careful comparison operations

These can be

' abc ' = = = ' abc '//True

1 = = = 1//True

But these are not.

[All in all] = = = [+]//False

{A:1} = = = {A:1}//False

{} = = = {}//False

Because [three-way] and [two] are different arrays, only their elements happen to be the same. Therefore, can not simply through the = = = to judge.

5. Array is not the underlying type

typeof {} = = = ' object '//True

typeof ' a ' = = = = ' String '//True

typeof 1 = = = Number//True

But....

typeof [] = = = ' object '//True

If you want to determine whether a variable var is an array, you need to use Array.isarray (Var).

6. Closures

This is a classic J interview question:

Const GREETERS = []

for (var i = 0; i < i++) {

Greeters.push (function () {return console.log (i)})

}

Greeters[0] ()//10

GREETERS[1] ()//10

GREETERS[2] ()//10

Although the expected output 0,1,2,..., it actually does not. Know how to debug?

There are two ways of doing this:

Use let rather than Var. Note: can refer to Fundebug's other blog ES6 "Let" can replace "var"?

Use the BIND function. Note: You can refer to Fundebug's other blog J Beginners must see "this"

Greeters.push (Console.log.bind (null, i))

Of course, there are many solutions. These two are my favorite!

7. About Bind

What results does the following code output?

Class Foo {

Constructor (name) {

THIS.name = Name

}

Greet () {

Console.log (' Hello, this is ', this.name)

}

Somethingasync () {

Return Promise.resolve ()

}

Asyncgreet () {

This.somethingasync ()

. Then (This.greet)

}

}

New Foo (' dog '). Asyncgreet ()

If you say the program will crash and error: cannot read property ' name ' of undefined.

Because the Geet in line 16th is not executed in the right environment. Of course, there are many ways to solve this bug!

I like to use the BIND function to solve the problem:

Asyncgreet () {

This.somethingasync ()

. Then (This.greet.bind (This))

}

This ensures that the greet will be called by an instance of Foo, rather than the local function's this.

If you want greet to never bind to the wrong scope, you can use bind in the constructor to bind.

Class Foo {

Constructor (name) {

THIS.name = Name

This.greet = This.greet.bind (This)

}

}

You can also use the arrow function (= =) to prevent the scope from being modified. Note: You can refer to Fundebug's other blog J Beginners must See "arrow function."

Asyncgreet () {

This.somethingasync ()

. Then () = {

This.greet ()

})

}

8. Math.min () greater than Math.max ()

Math.min () < Math.max ()//False

Because Math.min () returns Infinity, Math.max () returns-infinity.

Learn more about Web front-end knowledge to know the Sea Carpenter Library

Beginners should be aware of these 8 web front end Javascrip Traps