JavaScript의 일반적인 함정을 피하는 방법에 대한 팁 요약

1. 배열 요소를 정렬해 보셨나요?

JavaScript는 기본적으로 영숫자 순서를 사용합니다. 따라서 [1,2,5,10].sort()의 결과는 [1, 10, 2, 5]입니다.

정확하게 정렬하려면 다음과 같이 해야 합니다: [1,2,5,10].sort((a, b) => a - b)

2 new Date()는 사용하기 매우 쉽습니다.

new Date()는 다음을 수신할 수 있습니다:

• - 매개변수를 수신하지 않습니다: 현재 시간을 반환합니다.

• - 매개변수 `x`를 수신합니다: 1970년 1월 1일 + `x` 밀리초 값을 반환합니다. .

• - 'new Date(1, 1, 1)'은 1901년 2월 1일을 반환합니다.

• - 하지만.... `new Date(2016, 1, 1)`은 2016을 1900에 추가하지 않고 2016을 의미합니다.
  

3. 교체기능은 정말 교체가 안되는건가요?

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

모든 b를 바꾸려면 정규 표현식을 사용하세요:

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

4. 비교 연산에 주의하세요

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

왜냐하면 [1,2,3]과 [1,2,3]은 요소가 서로 다른 두 배열이기 때문입니다. 그냥 똑같을 뿐이에요. 그러므로 단순히 `===`로 판단할 수는 없습니다.

5. 배열은 기본 유형이 아닙니다

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

`var` 변수가 배열인지 확인하려면 `Array.isArray(var)`를 사용해야 합니다. `Array.isArray(var)` 。

6. 闭包

这是一个经典的JavaScript面试题：

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

虽然期望输出0,1,2,...，然而实际上却不会。知道如何Debug嘛？

有两种方法：

• - 使用`let`而不是`var`。 

• - 使用`bind`函数。

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

当然，还有很多解法。这两种是我最喜欢的！

7. 关于bind

下面这段代码会输出什么结果？

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 。

因为第16行的`geet`没有在正确的环境下执行。当然，也有很多方法解决这个BUG！

- 喜欢使用`bind`函数来解决问题：

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

这样会确保`greet`会被Foo的实例调用，而不是局部的函数的`this`。

- 如果你想要`greet`永远不会绑定到错误的作用域，你可以在构造函数里面使用`bind`来绑定。

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

- 你也可以使用箭头函数(=>)来防止作用域被修改。 

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

8. Math.min()比Math.max()大

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

因为Math.min() 返回 Infinity, 而 Math.max()

🎜6. Closure🎜🎜이것은 전형적인 JavaScript 인터뷰 질문입니다: 🎜rrreee🎜0,1,2,...을 출력할 것으로 예상되지만 실제로는 그렇지 않습니다. 디버깅하는 방법을 알고 있나요? 🎜🎜두 가지 방법이 있습니다: 🎜🎜🎜🎜- `var` 대신 `let`을 사용하세요. 🎜🎜🎜🎜- '바인딩' 기능을 사용하세요. 🎜🎜🎜rrreee🎜물론 다양한 해결 방법이 있습니다. 이 두 가지는 제가 가장 좋아하는 것입니다! 🎜🎜🎜7. 바인드에 대하여🎜🎜다음 코드의 출력은 무엇입니까? 🎜rrreee🎜프로그램이 충돌하고 오류를 보고한다고 말하면 정의되지 않은 'name' 속성을 읽을 수 없습니다. 🎜🎜🎜16행의 `geet`이 올바른 환경에서 실행되지 않기 때문입니다. 물론, 이 BUG를 해결하는 방법은 여러 가지가 있습니다! 🎜🎜- 문제를 해결하기 위해 `bind` 함수를 사용하는 것과 같습니다: 🎜rrreee🎜 이렇게 하면 로컬 함수 `this`가 아닌 Foo 인스턴스에서 `greet`가 호출됩니다. 🎜🎜🎜- `greet`가 잘못된 범위에 바인딩되지 않도록 하려면 생성자 내에서 `bind`를 사용할 수 있습니다. 🎜rrreee🎜- 화살표 기능(=>)을 사용하여 범위가 수정되는 것을 방지할 수도 있습니다. 🎜rrreee🎜8. Math.min()은 Math.max()보다 큽니다.🎜rrreee🎜Math.min()은 Infinity를 반환하고 Math.max()는 반환합니다. -무한대를 반환합니다. 🎜

위 내용은 JavaScript의 일반적인 함정을 피하는 방법에 대한 팁 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!