Bästa praxis för villkorssatser i JavaScript
Denna artikel förklarar bästa praxis för villkorssatser i JavaScript.
YouTube Video
Bästa praxis för villkorssatser i JavaScript
if-satser är en grundläggande kontrollstruktur i JavaScript-program. Men när koden blir mer komplex kan antalet if-satser öka, vilket gör koden svårare att läsa. Den här gången kommer vi att gå igenom bästa praxis för att designa if-satser korrekt i JavaScript för att förbättra läsbarheten och underhållbarheten.
Förenkla kod genom att använda flaggor.
Förenkla villkor som involverar flera kriterier genom att använda booleska värden.
Exempel att undvika
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Förbättrade exempel
Använd flaggor för att förtydliga villkor.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Håll villkorssatser enkla
När ett villkorsuttryck blir komplext minskar kodens läsbarhet, så det är nödvändigt att hålla villkoret enkelt.
Exempel att undvika
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Förbättrade exempel
Genom att bryta ner villkoret i variabler med specifika betydelser kan du förtydliga dess avsikt.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Klargör prioritetsordningen för logiska operatorer
I JavaScript if-satser kan missförstånd av prioritetsordningen för logiska operatorer leda till oavsiktligt beteende.
Exempel att undvika
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}Förbättrade exempel
När prioritetsordningen för operatorer är oklar kan du använda parenteser på lämpligt sätt för att klargöra.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Använda kortslutningsutvärdering
JavaScript stöder kortslutningsevaluering för både && (OCH) och || (ELLER)-operatorerna. Kortslutningsevaluering innebär att när resultatet av ett villkor bestäms under evalueringen, utvärderas inte den återstående delen.
OCH(&&): Om vänstersidan utvärderas som falsk utvärderas inte högersidan, och dess värde returneras.ELLER(||): Om vänstersidan utvärderas som sann utvärderas inte högersidan, och dess värde returneras.
Exempel att undvika
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Förbättrade exempel
I denna kod kallas funktionen user?.someComplexFunction() även om user?.isLoggedIn är false.
Att förstå kortslutningsevaluering kan hjälpa dig att undvika onödiga beräkningar och skriva effektiv kod.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimera användningen av else-satser
else-satser kan öka den kognitiva belastningen när du följer koden. Överväg i stället att använda tidiga returer.
Exempel att undvika
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Förbättrade exempel
Förtydliga villkor med tidiga returer.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Korrekt användning av det ternära operatorn
För enkla villkor kan användning av en ternär operator förkorta din kod. Undvik dock nästling eller komplex logik.
Exempel att undvika
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Förbättrade exempel
Prioritera läsbarhet genom att dela upp villkor.
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}Använda standardvärden och kortslutningsutvärdering
Använd standardvärden och kortslutningsutvärdering för att minska förgreningar och förenkla kod.
Exempel att undvika
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Förbättrade exempel
I det här fallet gör användningen av logiska operatorer det mer kortfattat.
1// Good Example
2displayName = user?.name || 'Guest';Skilj korrekt mellan när switch-satser ska användas.
Switch-satser kan göra avsikter tydligare när flera villkor behövs.
Exempel att undvika
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}Förbättrade exempel
Användning av switch-satser kan hjälpa till att organisera kod.
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}Använda skyddsklausuler med tidiga avslutsvillkor
En skyddsklausul är en teknik som använder if-satser för att avsluta en funktion tidigt.
Exempel att undvika
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}Förbättrade exempel
Använd skyddsklausuler för att minska nästling.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Skriv kommentarer för att förtydliga avsikter.
För komplexa villkor eller kritiska grenar, lägg till kortfattade och tydliga kommentarer för att förmedla kodens avsikt.
Exempel att undvika
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Förbättrade exempel
Lägg till kommentarer för att göra avsikter tydliga.
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}Slutsats
Effektiv användning av JavaScripts if-satser kan kraftigt förbättra kodens läsbarhet och underhållbarhet.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.