Tips and traps that js beginners should know

Here are some tips and pitfalls that Javascript beginners should know. If you're already an expert, brush up on this.

Javascript is just a programming language. How could it possibly go wrong?

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

Javascript's sort() function sorts alphanumeric (String Unicode code points) by default.

So [1,2,5,10].sort() will output [1, 10, 2, 5].

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

A very simple solution Solution, the premise is that you have to know that there is such a pit

2. new Date() is great

new Date() Acceptable:

• No parameters: Returns the current time

• One parameter x: Returns January 1, 1970 + x milliseconds. Those who know Unix know why.

• new Date(1, 1, 1) returns 1901, February, 1st\. Because, the first parameter represents 1900 plus 1 year, the second parameter represents the second month of this year (so February) — People with normal brain circuits will start indexing from 1 — , and the third parameter is very Obviously it's the first day of the month, so 1 — sometimes the index does start at 1 — .

• new Date(2016, 1, 1) will not add 2016 to 1900. It only represents 2016.

3. Replace does not "replace"

let s = "bob"const replaced = s.replace('b', 'l')
replaced === "lob"
s === "bob"

I think this is a good thing because I don't like function changes their input. You should also know that replace will only replace the first matching string:

If you want to replace all matching strings, you can use it with the /g flag Regular expression:

"bob".replace(/b/g, 'l') === 'lol' // 替换所有匹配的字符串

4. When comparing, please pay attention to

// These are ok'abc' === 'abc' // true1 === 1         // true// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false

Reason: [1,2,3] and [1,2,3] are two independent arrays. They just happen to contain the same value. They have different references and cannot be compared with ===.

5. Array is not a primitive data type

typeof {} === 'object'  // truetypeof 'a' === 'string' // truetypeof 1 === number     // true// But....typeof [] === 'object'  // true

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

6. Closure

This is a well-known 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

Do you think it will output 0, 1, 2...? Do you know why it doesn't output like this? How would you modify it so that it outputs 0, 1, 2...?

There are two possible solutions here:

Replace var with let. Boom. Solved.

# The difference between

##let and var is the scope. The scope of var is the nearest function block, and the scope of let is the nearest enclosing block. The enclosing block can be smaller than the function block (if it is not in any block, then let and var are both global). (Source)

bind:

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

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

Cannot read property 'name' of undefined, give you one point.

greet is not running in the correct context. Again, there are still many solutions to this problem.

asyncGreet () {this.someThingAsync()
.then(this.greet.bind(this))
}

greet.

greet should not run outside the instance context, you can bind it in the class's constructor:

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

=> ) can be used to preserve context. This method will also work:

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