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

A summary of tips on how to avoid common pitfalls in JavaScript

伊谢尔伦
Release: 2017-07-26 13:54:51
Original
1091 people have browsed 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

new Date() can receive:

  • - does 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...., `new Date(2016, 1, 1)` does 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' // true
1 === 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 the expected output is 0,1,2,..., the actual output is But it won't. Do you know how to debug?

There are two ways:

  • - Use `let` instead of `var`.

  • - Use the `bind` function.

Greeters.push(console.log.bind(null, i))
Copy after login

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

7. Regarding 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.

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

- Prefer to use the `bind` function to solve the problem:

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

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

- If you want `greet` to never be bound to the wrong scope, you can use `bind` inside the constructor.

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

- You can also use arrow functions (=>) to prevent the scope from being modified.

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, while Math.max ()Return -Infinity.

The above is the detailed content of A summary of tips on how to avoid common pitfalls in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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