Analyse von 8 häufigen Fallstricken in JavaScript

8 häufige Fallen in JavaScript

Teilen:

Anmerkung des Übersetzers: In Auf dem langen Weg des Programmierens gibt es immer einige Fallstricke, die einen in Tränen ausbrechen lassen.

Englischer Originaltext: Wer hat gesagt, dass Javascript einfach sei?

Übersetzer: Fundebug

Hier geben wir einige Tipps und listen einige Fallstricke für JavaScript-Anfänger auf. Wenn Sie bereits Maurer sind, können Sie es auch lesen.

1. Haben Sie versucht, die Array-Elemente zu sortieren?

JavaScript verwendet standardmäßig die alphanumerische Reihenfolge. Daher ist das Ergebnis von [1,2,5,10].sort() [1, 10, 2, 5].

Wenn Sie richtig sortieren möchten, sollten Sie Folgendes tun: [1,2,5,10].sort((a, b) => a - b)

2. new Date() ist sehr einfach zu verwenden

Die Verwendungsmethoden von new Date() sind:

Erhält keine Parameter: gibt die aktuelle Zeit zurück; empfängt einen Parameter x: gibt den 1. Januar zurück , 1970 + x Der Wert in Millisekunden. new Date(1, 1, 1) gibt den 1. Februar 1901 zurück. Allerdings... fügt new Date(2016, 1, 1) 2016 nicht zu 1900 hinzu, sondern stellt nur 2016 dar.

3. Die Ersetzungsfunktion ersetzt nicht wirklich?

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

Wenn Sie alle b ersetzen möchten, verwenden Sie den regulären Ausdruck:

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

4 Seien Sie vorsichtig mit Vergleichsoperationen

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

denn [1,2,3] und [. 1,2,3] sind zwei verschiedene Arrays, aber ihre Elemente sind zufällig dieselben. Daher kann es nicht einfach nach === beurteilt werden. ·

5. Array ist kein Basistyp

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

Wenn Sie feststellen möchten, ob eine Variable var ein Array ist, müssen Sie Array.isArray(var) verwenden.

6. Abschluss

Dies ist eine klassische JavaScript-Interviewfrage:

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

Obwohl erwartet wird, dass sie 0,1,2,… ausgibt, ist dies tatsächlich nicht der Fall. Wissen Sie, wie man debuggt?
Es gibt zwei Möglichkeiten:

Verwenden Sie let anstelle von var. Hinweis: Sie können auf einen anderen Blog von Fundebug verweisen. Kann „var“ in ES6 verwendet werden? Hinweis: Sie können auf den anderen Blog von Fundebug verweisen. JavaScript-Anfänger müssen „dieses“ lesen Greeters.push(console.log.bind(null, i))

Natürlich gibt es viele Lösungen. Diese beiden sind meine Favoriten!

7. Bezüglich bind

Was wird der folgende Code ausgeben?

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

Wenn Sie sagen, dass das Programm abstürzt und einen Fehler meldet: Cannot read property ‘name’ of undefined。

1 Weil das Geet in Zeile 16 nicht in der richtigen Umgebung ausgeführt wird. Natürlich gibt es viele Möglichkeiten, diesen Fehler zu beheben!

Ich verwende gerne die Bind-Funktion, um das Problem zu lösen:

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

Dadurch wird sichergestellt, dass „greet“ von der Instanz von Foo aufgerufen wird und nicht von „this“ der lokalen Funktion.

2. Wenn Sie möchten, dass Greet niemals an den falschen Bereich gebunden wird, können Sie bind im Konstruktor verwenden.

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

3. Sie können auch Pfeilfunktionen (=>) verwenden, um zu verhindern, dass der Bereich geändert wird. Hinweis: Sie können auf Fundebugs anderen Blog „Arrow Function“ verweisen, der für JavaScript-Anfänger unbedingt gelesen werden muss.

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

8. Math.min() ist größer als Math.max()

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

, weil Math.min() Infinity zurückgibt, während Math.max() -Infinity。

js Basic Tutorial“

Das obige ist der detaillierte Inhalt vonAnalyse von 8 häufigen Fallstricken in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!