Best Practices für bedingte Anweisungen in JavaScript
Dieser Artikel erklärt die Best Practices für bedingte Anweisungen in JavaScript.
YouTube Video
Best Practices für bedingte Anweisungen in JavaScript
if-Anweisungen sind eine grundlegende Kontrollstruktur in JavaScript-Programmen. Wenn jedoch der Code komplexer wird, kann die Anzahl der if-Anweisungen zunehmen, was die Lesbarkeit des Codes erschwert. Diesmal gehen wir auf die Best Practices für die richtige Gestaltung von if-Anweisungen in JavaScript ein, um die Lesbarkeit und Wartbarkeit zu verbessern.
Vereinfachen Sie den Code durch die Verwendung von Flags.
Vereinfachen Sie Bedingungen, die mehrere Kriterien beinhalten, durch die Verwendung von booleschen Werten.
Beispiele, die man vermeiden sollte
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Verbesserte Beispiele
Verwenden Sie Flags, um Bedingungen zu verdeutlichen.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Halten Sie bedingte Anweisungen einfach
Wenn eine bedingte Ausdruck komplex wird, verringert sich die Lesbarkeit des Codes, daher ist es notwendig, die Bedingung einfach zu halten.
Beispiele, die man vermeiden sollte
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Verbesserte Beispiele
Indem Sie die Bedingung in Variablen mit spezifischen Bedeutungen zerlegen, können Sie ihre Absicht verdeutlichen.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Klären Sie die Priorität von logischen Operatoren
In JavaScript-if-Anweisungen kann ein Missverständnis der Priorität von logischen Operatoren zu unbeabsichtigtem Verhalten führen.
Beispiele, die man vermeiden sollte
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}Verbesserte Beispiele
Wenn die Priorität von Operatoren unklar ist, können Sie Klammern verwenden, um sie klarer zu machen.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Verwendung von Kurzschlussauswertung
JavaScript unterstützt die Kurzschlussauswertung für die Operatoren && (UND) und || (ODER). Kurzschlussauswertung bedeutet, dass, sobald das Ergebnis einer Bedingung während der Auswertung bestimmt ist, der verbleibende Teil nicht weiter ausgewertet wird.
UND(&&): Wenn die linke Seite als false ausgewertet wird, wird die rechte Seite nicht ausgewertet und ihr Wert wird zurückgegeben.ODER(||): Wenn die linke Seite als true ausgewertet wird, wird die rechte Seite nicht ausgewertet und ihr Wert wird zurückgegeben.
Beispiele, die man vermeiden sollte
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Verbesserte Beispiele
In diesem Code wird die Funktion user?.someComplexFunction() aufgerufen, selbst wenn user?.isLoggedIn false ist.
Das Verstehen der Kurzschlussauswertung kann helfen, unnötige Berechnungen zu vermeiden und effizienten Code zu schreiben.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimieren Sie die Verwendung von else-Anweisungen
else-Anweisungen können die kognitive Belastung beim Verfolgen des Codes erhöhen. Nutzen Sie stattdessen frühzeitige Rückgaben.
Beispiele, die man vermeiden sollte
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Verbesserte Beispiele
Klärung von Bedingungen durch frühzeitige Rückgaben.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Richtige Verwendung des ternären Operators
Für einfache Bedingungen kann ein ternärer Operator Ihren Code verkürzen. Vermeiden Sie jedoch Verschachtelung oder komplexe Logik.
Beispiele, die man vermeiden sollte
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Verbesserte Beispiele
Priorisieren Sie die Lesbarkeit, indem Sie Bedingungen aufteilen.
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}Verwendung von Standardwerten und Kurzschlussauswertung
Verwenden Sie Standardwerte und Kurzschlussauswertung, um Verzweigungen zu reduzieren und den Code zu vereinfachen.
Beispiele, die man vermeiden sollte
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Verbesserte Beispiele
In diesem Fall macht die Verwendung von logischen Operatoren den Code prägnanter.
1// Good Example
2displayName = user?.name || 'Guest';Differenzieren Sie klar, wann switch-Anweisungen verwendet werden sollen.
Wenn mehrere Bedingungen benötigt werden, können switch-Anweisungen die Absichten klarer machen.
Beispiele, die man vermeiden sollte
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}Verbesserte Beispiele
Die Verwendung von switch-Anweisungen kann helfen, den Code zu strukturieren.
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}Verwendung von Schutzklauseln mit vorzeitigen Ausstiegsbedingungen
Eine Schutzklausel ist eine Technik, die if-Anweisungen nutzt, um eine Funktion frühzeitig zu verlassen.
Beispiele, die man vermeiden sollte
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}Verbesserte Beispiele
Verwenden Sie Schutzklauseln, um die Verschachtelung zu reduzieren.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Schreiben Sie Kommentare, um Absichten zu verdeutlichen.
Fügen Sie bei komplexen Bedingungen oder kritischen Zweigen prägnante und klare Kommentare hinzu, um die Absicht des Codes zu vermitteln.
Beispiele, die man vermeiden sollte
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Verbesserte Beispiele
Fügen Sie Kommentare hinzu, um Absichten klar zu machen.
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}Fazit
Der effektive Einsatz von if-Anweisungen in JavaScript kann die Lesbarkeit und Wartbarkeit des Codes erheblich verbessern.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.