Tipps und Fallen, die JS-Anfänger kennen sollten

Hier sind einige Tipps und Fallstricke, die Javascript-Anfänger kennen sollten. Wenn Sie bereits ein Experte sind, sollten Sie dies auffrischen.

Javascript ist nur eine Programmiersprache. Wie könnte es schief gehen?

1. Haben Sie schon einmal versucht, eine Reihe von Zahlen zu sortieren?

Die sort()-Funktion von Javascript verwendet standardmäßig eine alphanumerische Sortierung (String-Unicode-Codepunkte).

Also [1,2,5,10].sort() wird ausgegeben [1, 10, 2, 5].

Um ein Array richtig zu sortieren, können Sie [1,2,5,10].sort((a, b) => a — b)

Eine sehr einfache Lösung verwenden, vorausgesetzt, Sie wissen das dort ist so eine Falle

2. new Date() ist großartig

new Date() Akzeptabel:

• Keine Parameter: Gibt die aktuelle Zeit zurück

• Ein Parameter x: Gibt den 1. Januar 1970 + x Millisekunden zurück. Wer Unix kennt, weiß warum.

• new Date(1, 1, 1) gibt 1901, den 1. Februar, zurück. Denn der erste Parameter repräsentiert 1900 plus 1 Jahr, der zweite Parameter repräsentiert den zweiten Monat dieses Jahres (also Februar)  –  Menschen mit normalen Gehirnschaltkreisen beginnen mit der Indizierung bei 1  –  und der dritte Parameter ist ganz offensichtlich der erste Tag von der Monat, also 1 - manchmal beginnt der Index bei 1 - .

• Neues Datum (2016, 1, 1) fügt 2016 nicht zu 1900 hinzu. Es repräsentiert nur 2016.

3. Ersetzen bedeutet nicht „ersetzen“

let s = "bob"const replaced = s.replace('b', 'l')
replaced === "lob"
s === "bob"

Ich denke, das ist eine gute Sache, weil ich es nicht tue wie Funktionen ändern ihre Eingaben. Sie sollten auch wissen, dass replace nur die erste übereinstimmende Zeichenfolge ersetzt:

Wenn Sie alle übereinstimmenden Zeichenfolgen ersetzen möchten, können Sie einen regulären Ausdruck mit dem Flag /g verwenden:

"bob".replace(/b/g, 'l') === 'lol' // 替换所有匹配的字符串

4. Achten Sie beim Vergleich auf

// These are ok'abc' === 'abc' // true1 === 1         // true// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false

Grund: [1,2,3] und [1,2,3] sind zwei unabhängige Arrays. Sie enthalten einfach den gleichen Wert. Sie haben unterschiedliche Referenzen und sind nicht mit === vergleichbar.

5. Array ist kein primitiver Datentyp

typeof {} === 'object'  // truetypeof 'a' === 'string' // truetypeof 1 === number     // true// But....typeof [] === 'object'  // true

Wenn Sie wissen möchten, ob Ihre Variable ein Array ist, können Sie trotzdem Array.isArray(myVar)

6 verwenden . Abschluss

Dies ist eine bekannte 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

Glauben Sie, dass 0, 1, 2... ausgegeben werden? Wissen Sie, warum es nicht so ausgegeben wird? Wie würden Sie es so ändern, dass es 0, 1, 2 ... ausgibt?

Hier gibt es zwei mögliche Lösungen:

Ersetzen Sie let durch varGelöst.

let und varDer Unterschied ist Umfang. Der Bereich von var ist der nächstgelegene Funktionsblock, und der Bereich von let ist der nächstgelegene umschließende Block. Der umschließende Block kann kleiner sein als der Funktionsblock (wenn er nicht in einem Block enthalten ist, sowohl let als auch var). sind global). (Quelle)

Alternative: Verwenden Sie bind:

Greeters.push(console.log.bind(null, i))

Es gibt viele andere Möglichkeiten. Dies sind nur meine beiden Top-Tipps

7. Apropos binden

Was wird das Ihrer Meinung nach ergeben?

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 glauben, dass diese App bei der Eingabeaufforderung Cannot read property 'name' of undefined abstürzt, ein Punkt für Sie.

Ursache: greet wurde nicht im richtigen Kontext ausgeführt. Auch für dieses Problem gibt es noch viele Lösungen.

Ich persönlich mag

asyncGreet () {this.someThingAsync()
.then(this.greet.bind(this))
}

Dadurch wird sichergestellt, dass die Instanz der Klasse als Kontext greet aufgerufen wird.

Wenn Sie der Meinung sind, dass greet nicht außerhalb des Instanzkontexts ausgeführt werden sollte, können Sie es im Konstruktor der Klasse binden:

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

Sie sollten auch über Pfeilfunktionen Bescheid wissen ( => ) kann verwendet werden, um den Kontext zu bewahren. Dieser Ansatz würde auch funktionieren:

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

obwohl ich den letzten Ansatz nicht für elegant halte.

Ich bin froh, dass wir das behoben haben.

Zusammenfassung

Herzlichen Glückwunsch, Sie können Ihr Programm jetzt sicher ins Internet stellen. Es kann sein, dass es nicht einmal schief geht (was aber normalerweise der Fall ist). Prost o/

Wenn es noch etwas gibt, das ich erwähnen sollte, lass es mich bitte wissen!