> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 일반적인 함정을 피하는 방법에 대한 팁 요약

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

伊谢尔伦
풀어 주다: 2017-07-26 13:54:51
원래의
1100명이 탐색했습니다.

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(&#39;hello, this is &#39;, this.name)
 }
 someThingAsync () {
 return Promise.resolve()
 }
 asyncGreet () {
 this.someThingAsync()
 .then(this.greet)
 }
}
new Foo(&#39;dog&#39;).asyncGreet()
로그인 후 복사

如果你说程序会崩溃,并且报错:Cannot read property &#39;name&#39; 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿