Najlepsze praktyki dotyczące instrukcji warunkowych w JavaScript
Ten artykuł wyjaśnia najlepsze praktyki dotyczące instrukcji warunkowych w JavaScript.
YouTube Video
Najlepsze praktyki dotyczące instrukcji warunkowych w JavaScript
Instrukcje if są podstawową strukturą sterującą w programach JavaScript. Jednak wraz ze wzrostem złożoności kodu liczba instrukcji if może się zwiększać, co utrudnia czytelność kodu. Tym razem zagłębimy się w najlepsze praktyki projektowania instrukcji if w JavaScript, aby poprawić czytelność i łatwość utrzymania kodu.
Uprość kod za pomocą flag
Uprość warunki obejmujące wiele kryteriów za pomocą wartości logicznych.
Przykłady do unikania
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Ulepszone przykłady
Używaj flag do wyjaśnienia warunków.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Zachowaj prostotę instrukcji warunkowych
Gdy wyrażenie warunkowe staje się złożone, czytelność kodu spada, dlatego konieczne jest utrzymanie prostych warunków.
Przykłady do unikania
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Ulepszone przykłady
Rozdzielając warunek na zmienne o konkretnym znaczeniu, możesz wyjaśnić jego zamiar.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Wyjaśnij kolejność wykonywania operatorów logicznych
W instrukcjach if w JavaScript niezrozumienie kolejności wykonywania operatorów logicznych może prowadzić do niezamierzonego działania.
Przykłady do unikania
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}Ulepszone przykłady
Jeśli kolejność wykonywania operatorów jest niejasna, możesz odpowiednio użyć nawiasów, aby ją wyjaśnić.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Wykorzystywanie oceny krótkiego spięcia
JavaScript obsługuje krótkie oceny warunkowe zarówno dla operatorów && (AND), jak i || (OR). Krótkie oceny warunkowe oznaczają, że gdy wynik warunku zostanie określony podczas oceny, pozostała część nie jest oceniana.
AND(&&): Jeśli lewa strona jest oceniana jako fałsz, prawa strona nie jest oceniana, a jej wartość jest zwracana.OR(||): Jeśli lewa strona jest oceniana jako prawda, prawa strona nie jest oceniana, a jej wartość jest zwracana.
Przykłady do unikania
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Ulepszone przykłady
W tym kodzie funkcja user?.someComplexFunction() jest wywoływana nawet jeśli user?.isLoggedIn jest false.
Zrozumienie krótkich ocen warunkowych może pomóc uniknąć niepotrzebnych obliczeń i napisać wydajny kod.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimalizuj użycie instrukcji else
Instrukcje else mogą zwiększać obciążenie poznawcze podczas śledzenia kodu. Zamiast tego rozważ użycie wczesnych zwrotów (early returns).
Przykłady do unikania
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Ulepszone przykłady
Wyjaśnij warunki za pomocą wczesnych zwrotów.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Prawidłowe użycie operatora warunkowego (ternary operator)
Dla prostych warunków użycie operatora trójargumentowego może skrócić kod. Jednak unikaj zagnieżdżania lub skomplikowanej logiki.
Przykłady do unikania
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Ulepszone przykłady
Priorytetyzuj czytelność poprzez podział warunków.
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}Wykorzystywanie wartości domyślnych i oceny krótkiego spięcia
Używaj wartości domyślnych i oceny z krótkim obiegiem, aby zmniejszyć rozgałęzienia i uprościć kod.
Przykłady do unikania
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Ulepszone przykłady
W tym przypadku użycie operatorów logicznych czyni kod bardziej zwięzłym.
1// Good Example
2displayName = user?.name || 'Guest';Odpowiednio rozróżniaj, kiedy używać instrukcji switch
Gdy wymagane są liczne warunki, instrukcje switch mogą uczynić zamiary bardziej przejrzystymi.
Przykłady do unikania
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}Ulepszone przykłady
Używanie instrukcji switch może pomóc w organizacji kodu.
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}Wykorzystywanie klauzul warunkowych z wczesnymi warunkami wyjścia
Blokada warunkowa to technika użycia instrukcji if, aby wcześniej zakończyć działanie funkcji.
Przykłady do unikania
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}Ulepszone przykłady
Używaj blokad warunkowych, aby zmniejszyć zagnieżdżenie.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Pisz komentarze, aby wyjaśnić zamiary
Dla skomplikowanych warunków lub krytycznych rozgałęzień dodawaj zwięzłe i jasne komentarze, aby przekazać zamiar kodu.
Przykłady do unikania
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Ulepszone przykłady
Dodawaj komentarze, aby uczynić zamiary jasnymi.
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}Wnioski
Skuteczne używanie instrukcji if w JavaScript może znacznie poprawić czytelność i utrzymanie kodu.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.