Bedste praksis for betingede udsagn i JavaScript
Denne artikel forklarer de bedste praksisser for betingede udsagn i JavaScript.
YouTube Video
Bedste praksis for betingede udsagn i JavaScript
if-udsagn er en grundlæggende kontrolstruktur i JavaScript-programmer. Men når koden bliver mere kompleks, kan antallet af if-udsagn stige, hvilket gør koden sværere at læse. Denne gang vil vi dykke ned i de bedste praksisser for at designe if-udsagn korrekt i JavaScript for at forbedre læsbarheden og vedligeholdelsen.
Simplificer kode ved hjælp af flag.
Forenkle betingelser med flere kriterier ved at bruge boolean-værdier.
Eksempler at Undgå
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Forbedrede Eksempler
Brug flag for at gøre betingelser tydeligere.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Hold betingede udsagn enkle
Når et betinget udtryk bliver komplekst, falder læsbarheden af koden, så det er nødvendigt at holde betingelsen enkel.
Eksempler at Undgå
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Forbedrede Eksempler
Ved at nedbryde betingelsen til variable med specifikke betydninger kan du tydeliggøre dens formål.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Klarlæg forrang for logiske operatorer
I JavaScript-if-udsagn kan misforståelse af logiske operatorers forrang føre til utilsigtet adfærd.
Eksempler at Undgå
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}Forbedrede Eksempler
Når operatorernes forrang er uklar, kan du bruge parenteser passende for at klargøre.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Anvendelse af kortslutningsevaluering
JavaScript understøtter kortslutningsevaluering for både && (AND) og || (OR)-operatorerne. Kortslutningsevaluering betyder, at når resultatet af en betingelse afgøres under evalueringen, evalueres den resterende del ikke.
AND(&&): Hvis venstre side evalueres som falsk, evalueres højre side ikke, og dens værdi returneres.OR(||): Hvis venstre side evalueres som sand, evalueres højre side ikke, og dens værdi returneres.
Eksempler at Undgå
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Forbedrede Eksempler
I denne kode kaldes funktionen user?.someComplexFunction(), selv hvis user?.isLoggedIn er false.
At forstå kortslutningsevaluering kan hjælpe dig med at undgå unødvendige beregninger og skrive effektiv kode.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimer brugen af else-udsagn
else-udsagn kan øge den kognitive belastning, når koden spores. Overvej i stedet at bruge tidlige returneringer.
Eksempler at Undgå
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Forbedrede Eksempler
Klarlæg betingelser med tidlige returneringer.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Korrekt brug af det ternære operator
For enkle betingelser kan brug af en ternær operator forkorte din kode. Undgå dog indlejring eller kompleks logik.
Eksempler at Undgå
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Forbedrede Eksempler
Prioriter læsbarhed ved at opdele betingelser.
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}Anvendelse af standardværdier og kortslutningsevaluering
Brug standardværdier og kortslutningsevaluering for at reducere forgrening og simplificere koden.
Eksempler at Undgå
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Forbedrede Eksempler
I dette tilfælde gør brugen af logiske operatorer det mere kortfattet.
1// Good Example
2displayName = user?.name || 'Guest';Skel korrekt mellem, hvornår man skal bruge switch-sætninger.
Når der er behov for flere betingelser, kan switch-sætninger gøre intentionerne tydeligere.
Eksempler at Undgå
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}Forbedrede Eksempler
Brug af switch-sætninger kan hjælpe med at organisere kode.
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}Anvendelse af beskyttelsessætninger med tidlige afslutningsbetingelser
En guard-sætning er en teknik, der bruger if-sætninger til at afslutte en funktion tidligt.
Eksempler at Undgå
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}Forbedrede Eksempler
Brug guard-sætninger til at reducere indlejring.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Skriv kommentarer for at gøre intentioner tydelige.
Til komplekse betingelser eller vigtige forgreninger skal du tilføje korte og klare kommentarer for at formidle kodens hensigt.
Eksempler at Undgå
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Forbedrede Eksempler
Tilføj kommentarer for at gøre intentionerne tydelige.
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}Konklusion
Effektiv brug af JavaScripts if-sætninger kan i høj grad forbedre kodens læsbarhed og vedligeholdelse.
Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.