JavaScript でよくある 8 つの落とし穴を分析する

8 JavaScript のよくある罠

共有:

翻訳者注記:プログラミングの長い旅には、思わず泣き出してしまうような落とし穴が必ずあります。

英語原文: Who thought JavaScript is easy?

翻訳者: 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 を受け取ります: 1 月 1 日を返します, 1970 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

because [1,2,3] と [ 1,2,3] は 2 つの異なる配列ですが、それらの要素はたまたま同じです。したがって、===だけでは判断できません。 ·

5. 配列は基本型ではありません

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

変数 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、... が出力されることが期待されていますが、実際にはそうではありません。デバッグ方法を知っていますか?
2 つの方法があります:

var の代わりに let を使用します。注: Fundebug の別のブログを参照してください。ES6 では "let" を "var" に置き換えることができますか? バインド関数を使用してください。注: Fundebug の他のブログを参照してください。JavaScript 初心者の必読書は「これ」です 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' を読み取れません。

1. 16 行目の geet が正しい環境で実行されていないためです。もちろん、このバグを解決する方法はたくさんあります。

私は問題を解決するためにバインド関数を使用するのが好きです:

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

これにより、ローカル関数のインスタンスではなく、Foo のインスタンスによって確実に挨拶が呼び出されます。

2.greet が間違ったスコープにバインドされないようにしたい場合は、コンストラクターで binding を使用できます。

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

3. アロー関数 (=>) を使用して、スコープが変更されないようにすることもできます。注: Fundebug の別のブログ「Arrow Function」は、JavaScript 初心者の必読書です。

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

8. Math.min() は Math.max() より大きいです

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

Math.min() は Infinity を返すため、および Math.max()Return -Infinity。

推奨チュートリアル: 「js 基本チュートリアル」

以上がJavaScript でよくある 8 つの落とし穴を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。