Heim > Artikel > Web-Frontend > 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!