Home > Web Front-end > JS Tutorial > body text

Analyzing 8 common pitfalls in JavaScript

coldplay.xixi
Release: 2020-06-15 15:53:00
forward
1601 people have browsed it

Analyzing 8 common pitfalls in JavaScript

8 Common Traps in JavaScript

Share:

Translator Note: In the long journey of programming, there are always some pitfalls that will make you burst into tears.

English original: Who said javascript was easy?

Translator: Fundebug

Here we give some tips and list some pitfalls for JavaScript beginners. If you are already a bricklayer, you can also read it.

1. Have you tried sorting the array elements?

JavaScript uses alphanumeric order by default. Therefore, the result of [1,2,5,10].sort() is [1, 10, 2, 5].

If you want to sort correctly, you should do this: [1,2,5,10].sort((a, b) => a - b)

2. new Date() is very easy to use

The usage methods of new Date() are:

Does not receive any parameters: returns the current time; receives a parameter x: returns January 1, 1970 x milliseconds value. new Date(1, 1, 1) returns February 1, 1901. However..., new Date(2016, 1, 1) will not add 2016 to 1900, but only represents 2016.

3. The replacement function does not really replace?

let s = "bob"
const replaced = s.replace('b', 'l')
replaced === "lob" // 只会替换掉第一个b
s === "bob" // 并且s的值不会变
Copy after login

If you want to replace all b, use regular expressions:

"bob".replace(/b/g, 'l') === 'lol'
Copy after login

4. Be careful with comparison operations

// 这些可以'abc' === 'abc' // true1 === 1 // true// 然而这些不行[1,2,3] === [1,2,3]
 // false{a: 1} === {a: 1} // false{} === {} // false
Copy after login

Because [1,2,3] and [1,2,3] are two different arrays, but their elements happen to be the same. Therefore, it cannot be judged simply by ===. ·

5. Array is not a basic type

typeof {} === 'object' // true
typeof 'a' === 'string' // true
typeof 1 === number // true
// 但是....
typeof [] === 'object' // true
Copy after login

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

6. Closure

This is a classic JavaScript interview question:

const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10
Copy after login

Although it is expected to output 0,1,2,..., it actually does not. Do you know how to debug?
There are two methods:

Use let instead of var. Note: You can refer to another blog of Fundebug. Can "let" replace "var" in ES6? Use the bind function. Note: You can refer to Fundebug’s other blog. A must-read for JavaScript beginners is “this” Greeters.push(console.log.bind(null, i))

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

7. About bind

What will the following code output?

class Foo {
    constructor(name) {
        this.name = name
    }
    greet() {
        console.log(&#39;hello, this is &#39;, this.name)
    }
    someThingAsync() {
        return Promise.resolve()
    }
    asyncGreet() {
        this.someThingAsync().then(this.greet)
    }
}
new Foo(&#39;dog&#39;).asyncGreet()
Copy after login

If you say that the program will crash and report an error: Cannot read property ‘name’ of undefined.

1. Because the geet on line 16 is not executed in the correct environment. Of course, there are many ways to solve this BUG!

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

//code from http://caibaojian.com/8-javascript-attention.html
asyncGreet () {
this.someThingAsync()
.then(this.greet.bind(this))
}
Copy after login

This will ensure that greet will be called by the instance of Foo, not this of the local function.

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

class Foo {
    constructor(name) {
        this.name = name this.greet = this.greet.bind(this)
    }
}
Copy after login

3. You can also use arrow functions (=>) to prevent the scope from being modified. Note: You can refer to Fundebug's other blog "Arrow Function", a must-read for JavaScript beginners.

asyncGreet() {
    this.someThingAsync().then(() = >{
        this.greet()
    })
}
Copy after login

8. Math.min() is larger than Math.max()

Math.min() < Math.max() // false
Copy after login

Because Math.min() returns Infinity, and Math.max()Return -Infinity.

Recommended tutorial: "js basic tutorial"

The above is the detailed content of Analyzing 8 common pitfalls in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:webhek.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template