JavaScript의 8가지 일반적인 함정 분석

JavaScript의 8가지 일반적인 함정

공유:

번역자 주: 프로그래밍의 긴 여정에는 항상 눈물을 흘리게 만드는 함정이 있습니다.

원문 영어 텍스트: 누가 javascript가 쉽다고 말했습니까?

번역자: Fundebug

여기서 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' // true1 === 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)를 사용해야 합니다.

6. Closure

이것은 고전적인 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,…을 출력할 것으로 예상되지만 실제로는 그렇지 않습니다. 디버깅하는 방법을 알고 있나요?
두 가지 방법이 있습니다:

var 대신 let을 사용하세요. 참고: Fundebug의 다른 블로그를 참조할 수 있습니다. ES6에서 "var"를 "let"으로 대체할 수 있습니까? 참고: JavaScript 초보자가 꼭 읽어야 할 내용은 Fundebug의 다른 블로그를 참조할 수 있습니다. Greeters.push(console.log.bind(null, i))

물론 해결 방법은 많습니다. 이 두 가지는 제가 가장 좋아하는 것입니다!

7. 바인드에 대하여

다음 코드는 무엇을 출력할까요?

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

프로그램이 충돌하고 오류를 보고한다고 말하면 정의되지 않은 'name' 속성을 읽을 수 없습니다. Cannot read property ‘name’ of undefined。

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

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

//code from http://caibaojian.com/8-javascript-attention.html
asyncGreet () {
this.someThingAsync()
.then(this.greet.bind(this))
}

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

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

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

3、你也可以使用箭头函数(=>)来防止作用域被修改。备注：可以参考Fundebug的另一篇博客 JavaScript初学者必看“箭头函数”。

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

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

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

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

1. 16행의 geet이 올바른 환경에서 실행되지 않기 때문입니다. 물론, 이 BUG를 해결하는 방법은 여러 가지가 있습니다!

저는 문제를 해결하기 위해 바인드 기능을 사용하는 것을 좋아합니다. rrreee

이렇게 하면 로컬 함수가 아닌 Foo 인스턴스에 의해 Greeting이 호출됩니다. 🎜🎜2. Greeting이 잘못된 범위에 바인딩되지 않도록 하려면 생성자에서 바인딩을 사용할 수 있습니다. 🎜rrreee🎜3. 화살표 기능(=>)을 사용하여 범위가 수정되는 것을 방지할 수도 있습니다. 참고: JavaScript 초보자가 꼭 읽어야 할 Fundebug의 다른 블로그 "Arrow Function"을 참조할 수 있습니다. 🎜rrreee🎜8. Math.min()은 Math.max()보다 큽니다.🎜rrreee🎜 Math.min()은 Infinity를 반환하지만 Math. max()는 -무한대를 반환합니다. 🎜🎜추천 튜토리얼: "🎜js 기본 튜토리얼🎜"🎜

위 내용은 JavaScript의 8가지 일반적인 함정 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!