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的值不会变

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

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

4. Be careful with comparison operations

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

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

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

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('hello, this is ', this.name)
    }
    someThingAsync() {
        return Promise.resolve()
    }
    asyncGreet() {
        this.someThingAsync().then(this.greet)
    }
}
new Foo('dog').asyncGreet()

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))
}

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)
    }
}

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()
    })
}

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

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

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!