Einige Fehler, die JavaScript-Anfänger häufig machen

Vorwort

Wenn man von den Problemen mit dem Sprachdesign von JavaScript einmal absieht, ist es unvermeidlich, dass es einige Mängel aufweist, schließlich wurde es von Brendan Eich in nur zehn Tagen entwickelt. Wie können wir als Entwickler einige häufige Low-Level-Fehler vermeiden? In diesem Artikel sind einige häufige Fehler aufgelistet. Prüfen Sie, ob sie Ihnen bekannt vorkommen.

Verwechslung von „undefined“ und „null“

Sowohl „undefined“ als auch „null“ können in JavaScript verwendet werden, um das Fehlen eines Werts darzustellen, es gibt jedoch einen Unterschied zwischen den beiden. undefined bedeutet wörtlich „undefiniert“, aber seine Bedeutung geht tatsächlich über den Gültigkeitsbereich undefinierter Variablen hinaus: Der Versuch, eine nicht vorhandene Eigenschaft eines Objekts zu lesen, den Rückgabewert einer Funktion ohne eine return-Anweisung, eine Variable, der nach der Deklaration kein Wert zugewiesen wird, oder sogar eine Variable, der explizit undefined zugewiesen wurde, führt alle zu undefined. Das Testen des Typs mit typeof ergibt die Zeichenfolge „undefined“. Null ist reiner und die Variable hat diesen Wert nur, wenn sie auf Null gesetzt ist. Darüber hinaus ist null ein Objekttyp, d. h. der Wert von typeof(null) ist die Zeichenfolge „Objekt“.

Es ist zu beachten, dass bei der Verwendung von if zur Beurteilung, dass beide Werte falsch sind, null == undefined wahr ist, was für Anfänger oft verwirrend ist. Versuchen Sie daher, alle „kein Wert“ auf undefiniert zu setzen, was Ihnen die Mühe der Beurteilung und Unterscheidung erspart.

Funktionen, die „undefiniert“ zurückgeben:

const f = () => {}

Den Wert einer Variablen auf undefiniert setzen:

x = undefiniert;

Bestimmen Sie, ob die Eigenschaft nicht definiert ist:

Typ von Objekt.Eigenschaft === 'undefiniert'
obj.prop === undefiniert

Bestimmen Sie, ob eine Variable nicht definiert ist:

Typ von x === 'undefiniert'

Wenn eine Variable deklariert, aber kein Wert zugewiesen wird, hat sie automatisch den Wert „undefined“.

Wenn Sie null beurteilen müssen, verwenden Sie dasselbe Urteil:

obj.prop === null
x === null

Bei Verwendung von typeof können Sie nicht als null beurteilen, da es sich um einen Objekttyp handelt.

Verwirrende Zahlenaddition und Zeichenfolgenverkettung

In JavaScript kann der Operator „+“ sowohl für die Addition von Zahlen als auch für die Verkettung von Zeichenfolgen verwendet werden. Da JavaScript eine dynamische Sprache ist, konvertieren Operatoren Variablen automatisch in denselben Datentyp, bevor sie Operationen ausführen. Zum Beispiel:

sei x = 1 + 1; // 2

Das Ergebnis ist 2, was wir von einer numerischen Additionsoperation erwarten, da beide Werte Zahlen sind.

Wenn der Ausdruck jedoch lautet:

sei x = 1 + '1'; // "11"

Das Ergebnis ist „11“, da die erste Ziffer in eine Zeichenfolge umgewandelt wird. Hier wird der Operator „+“ zur Zeichenfolgenverkettung und nicht zur numerischen Addition verwendet. Hier können wir den Wert des Ausdrucks direkt sehen, was relativ klar ist. Wenn der Ausdruck aus mehreren Variablen besteht, ist es schwierig, den Typ zu bestimmen.

Um dieses Problem zu lösen, können wir alle Zeichenfolgen in numerische Typen konvertieren und dann Berechnungen durchführen. Zum Beispiel:

sei x = 1;  
sei y = '2';  
sei z = Zahl(x) + Zahl(y);

Auf diese Weise beträgt das laufende Ergebnis 3. Die Funktion „Number“ akzeptiert einen Wert beliebigen Typs und gibt eine Zahl zurück, wenn dieser in eine Zahl umgewandelt werden kann. Andernfalls gibt sie NaN zurück. Sie können auch die neue Funktion Number(...).valueOf() verwenden:

sei x = 1;  
sei y = '2';  
sei z = neue Zahl(x).Wertvon() + neue Zahl(y).Wertvon();

Da new Number(...) einen Konstruktor instanziiert, gibt es ein Objekt und keinen numerischen Typ zurück. Wenn Sie den ursprünglichen numerischen Typ erhalten möchten, müssen Sie die valueOf-Methode des Objekts verwenden. Es geht eigentlich auch einfacher:

sei x = 1;  
sei y = '2';  
sei z = +x + +y;

Das + vor einer Variablen wandelt sie in eine Zahl oder NaN um, genau wie die Funktion „Number“.

Problem mit dem Zeilenumbruch der Return-Anweisung

Die JavaScript-Syntax gibt an, dass eine neue Zeile das Ende einer Anweisung anzeigt. Zum Beispiel:

const add = (a, b) => {  
  zurückkehren  
  a + b;  
}
add(1,2); // undefiniert

Ich dachte, es würde 3 zurückgeben, aber tatsächlich wurde „undefiniert“ zurückgegeben. Dies liegt daran, dass die Funktion return bereits vor a + b ausgeführt hat. Dieses Problem lässt sich auf zwei Arten lösen: Entweder Sie platzieren den Ausdruck und die Rückgabe in derselben Zeile, oder Sie setzen den Ausdruck in Klammern.

const add = (a, b) => {  
  gib a + b zurück;  
}
// oder const add = (a, b) => {  
  zurückkehren (  
    a + b  
  );  
}

Warum können Klammern zum Umbrechen von Zeilen verwendet werden? Weil die Wörter in Klammern Ausdrücke und keine Aussagen sind. Ausdrücke können auf mehrere Zeilen aufgeteilt werden, wenn sie lang sind. Die Verwendung von Pfeilfunktionen wäre intuitiver:

const add = (a, b) => a + b

Der einzeilige Ausdruck in der Pfeilfunktion hat eine Rückgabewirkung. Natürlich können Sie den Ausdruck auch in Klammern setzen:

const add = (a, b) => (a + b)

Diese Klammer ist in Pfeilfunktionen, die Objektliterale zurückgeben, einigermaßen nützlich, da {} ohne die Klammern () nur die Start- und Endmarkierungen des Funktionskörpers sind. Um ein Objektliteral zurückzugeben, müssen Sie explizit {...} zurückgeben.

Wenn eine Anweisung in einer Codezeile unvollständig ist, führt der JavaScript-Parser die Anweisungen in der nächsten Zeile zum Parsen zusammen. Zum Beispiel:

const Leistung = (a) => {  
  Konstante  
    Leistung = 10;  
  gib eine **10 zurück;  
}
// ist gleichbedeutend mit:
const Leistung = (a) => {  
  konstante Potenz = 10;  
  gib eine **10 zurück;  
}

Bei vollständigen Anweisungen, wie beispielsweise „return“, werden mehrere Zeilen jedoch nicht zusammengeführt.

Verwenden von „return“ zum Ausbrechen aus einer forEach-Schleife

JavaScript-Arrays verfügen über eine forEach-Methode, die zum Durchlaufen von Array-Elementen verwendet wird. Anfänger können sich in der For-Schleife leicht das Schlüsselwort „break“ oder „continue“ vorstellen, mit dem die Schleife beendet wird. Aber leider verfügt forEach nicht über diese beiden Schlüsselwörter. Können wir dann die Rückgabe verwenden? Es kann verwendet werden, seine Funktion besteht jedoch darin, die Funktion vorzeitig zurückzugeben, was dem Effekt von „continue“ ähnelt und zum Beenden der aktuellen Schleife verwendet wird. Um aus der gesamten Schleife herauszuspringen, ist die Rückgabe nicht möglich.

Konstantenzahlen = [1, 2, 3, 4, 5, 6];
lass firstEven;
nums.fürJeden(n => {
  wenn (n % 2 === 0 ) {
    erstesEvent = n;
    Rückkehr n;
  }
});
console.log(ersteGerade); // 6

Die ursprüngliche Absicht des Codes besteht darin, die erste gerade Zahl zu finden und die Schleife zu verlassen, wenn sie gefunden wurde. Da die Schleife jedoch nicht wirklich verlassen wird, ist das Endergebnis die letzte gerade Zahl.
Gibt es eine Lösung? In diesem Fall können Sie eine For-Schleife oder Array-Filter, Find und andere Methoden verwenden.

Zusammenfassen

Obwohl JavaScript leicht zu erlernen ist, können dennoch leicht Fehler passieren, wenn Sie nicht aufpassen. In diesem Artikel werden einige häufige Fehler kurz vorgestellt. Ich hoffe, er ist für Sie hilfreich.

Oben sind einige Fehler aufgeführt, die JavaScript-Anfänger häufig machen. Weitere Informationen zu JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!