Die größten Fehler in JavaScript (und wie man sie vermeidet)

JavaScript ist eine sehr starke und anpassungsfähige Sprache, birgt jedoch auch das Potenzial für Probleme, die schwer zu erkennen sein können. In diesem Blogartikel befassen wir uns mit fünf der häufigsten Fehler, die Entwickler bei der Arbeit mit JavaScript feststellen, sowie mit den Gründen und Lösungen für diese Probleme. Ganz gleich, ob Sie ein erfahrener Entwickler sind oder gerade erst anfangen: Wenn Sie diese häufigen Gefahren kennen, ersparen Sie sich stundenlange Fehlerbehebung.

Dieser Blogartikel wurde von Rupesh Sharma, auch bekannt als @hackyrupesh, verfasst.

1. Unbeabsichtigte globale Variablen

Das Problem

JavaScript ermöglicht die Definition von Variablen, ohne sie explizit zu deklarieren, was zu unbeabsichtigten globalen Variablen führen kann. Dies ist insbesondere bei großen Codebasen oder bei der Arbeit mit mehreren Entwicklern problematisch, da es zu Konflikten und schwer zu debuggenden Fehlern führen kann.

Beispiel

function setUserName() {
    userName = "Alice"; // userName is now a global variable
}

setUserName();
console.log(userName); // Outputs: "Alice"

Im obigen Beispiel wird userName ohne var, let oder const deklariert, sodass es automatisch zu einer globalen Variablen wird. Dies kann zu unerwartetem Verhalten führen, insbesondere wenn userName später an anderer Stelle im Code verwendet wird.

Die Lösung

Deklarieren Sie Variablen immer mit let, const oder var. Dies macht deutlich, ob eine Variable lokal oder global ist und verhindert versehentliche globale Variablen.

function setUserName() {
    let userName = "Alice"; // userName is now a local variable
}

setUserName();
console.log(userName); // ReferenceError: userName is not defined

Referenzen

• Mozilla Developer Network (MDN): JavaScript-Variablen

2. Missbrauch dieses Schlüsselworts

Das Problem

Der Wert davon in JavaScript kann sich abhängig vom Kontext, in dem eine Funktion aufgerufen wird, ändern. Dies kann zu unerwartetem Verhalten führen, insbesondere bei der Verwendung von Callbacks oder Event-Handlern.

Beispiel

const user = {
    name: "Alice",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

setTimeout(user.greet, 1000); // Outputs: "Hello, my name is undefined"

In diesem Beispiel bezieht sich das Schlüsselwort „this“ in „greet“ auf das globale Objekt (oder undefiniert im strikten Modus), wenn es als Callback an setTimeout übergeben wird, und nicht auf das Benutzerobjekt.

Die Lösung

Verwenden Sie Pfeilfunktionen oder bind(), um sicherzustellen, dass dies an das richtige Objekt gebunden bleibt.

setTimeout(user.greet.bind(user), 1000); // Outputs: "Hello, my name is Alice"

Alternativ kann auch die Verwendung von Pfeilfunktionen das Problem lösen, da diese keinen eigenen This-Kontext haben.

const user = {
    name: "Alice",
    greet: function() {
        setTimeout(() => console.log(`Hello, my name is ${this.name}`), 1000);
    }
};

user.greet(); // Outputs: "Hello, my name is Alice"

Referenzen

• MDN: dies in JavaScript

3. Undefinierte und Null-Verwirrung

Das Problem

JavaScript hat sowohl undefiniert als auch null, was zu Verwirrung und Fehlern führen kann, wenn sie austauschbar verwendet oder nicht richtig überprüft werden.

Beispiel

let user = {
    name: "Alice",
    age: null
};

if (user.age) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}
// Outputs: "Age is not provided"

Hier ist user.age null, aber die if-Bedingung behandelt es als falsch. Dies kann zu Problemen führen, wenn null ein gültiger Status sein soll.

Die Lösung

Prüfen Sie immer explizit auf undefiniert und null, wenn beide gültige Werte in Ihrer Anwendung sind.

if (user.age !== null && user.age !== undefined) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}

Die Verwendung strikter Gleichheit (===) kann auch dabei helfen, zwischen undefiniert und null zu unterscheiden.

Referenzen

• MDN: Null
• MDN: Undefiniert

4. Rückruf Hölle

Das Problem

Rückruffunktionen sind eine gängige Methode zur Verarbeitung asynchroner Vorgänge in JavaScript. Wenn sie jedoch ineinander verschachtelt sind, können sie tief verschachtelte Strukturen erzeugen, die oft als „Callback-Hölle“ bezeichnet werden. Dies erschwert das Lesen, Warten und Debuggen von Code.

Beispiel

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            doFinalThing(result3, function(finalResult) {
                console.log(finalResult);
            });
        });
    });
});

Dieser tief verschachtelten Struktur ist schwer zu folgen und noch schwieriger zu debuggen.

Die Lösung

Verwenden Sie Promises oder async/await, um die Struktur zu verflachen und den Code besser lesbar zu machen.

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => doFinalThing(result3))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

Oder mit async/await:

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        const finalResult = await doFinalThing(result3);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

Referenzen

• MDN: Versprechen
• MDN: asynchron/warten

5. Probleme mit der Gleitkomma-Präzision

Das Problem

JavaScript verwendet den IEEE 754-Standard zur Darstellung von Zahlen, was insbesondere bei Gleitkomma-Arithmetik zu Präzisionsproblemen führen kann. Dies kann zu unerwarteten Ergebnissen bei Berechnungen führen.

Beispiel

console.log(0.1 + 0.2); // Outputs: 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // Outputs: false

Das Ergebnis von 0,1 + 0,2 ist aufgrund von Gleitkomma-Präzisionsfehlern nicht genau 0,3.

Die Lösung

Um dies zu vermeiden, können Sie das Ergebnis auf eine feste Anzahl von Dezimalstellen runden.

function isEqual(a, b) {
    return Math.abs(a - b) < Number.EPSILON;
}

console.log(isEqual(0.1 + 0.2, 0.3)); // Outputs: true

Alternativ können Sie mit ganzen Zahlen arbeiten, indem Sie die Zahlen skalieren, bevor Sie Operationen ausführen, und sie dann wieder verkleinern.

console.log((0.1 * 10 + 0.2 * 10) / 10); // Outputs: 0.3

References

• MDN: Number.EPSILON
• The Problem with Floating Point Arithmetic

Conclusion

JavaScript is a language full of idiosyncrasies and hidden risks, but knowing the most frequent flaws and how to avoid them allows you to develop cleaner, more dependable code. From unwanted global variables to floating-point accuracy concerns, each of these flaws can create major difficulties if not addressed. However, with proper coding methods and the correct tools, you can reduce these concerns and make your JavaScript code more resilient.

this blog written by Chatgpt ??

Das obige ist der detaillierte Inhalt vonDie größten Fehler in JavaScript (und wie man sie vermeidet). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!