Amalan Terbaik untuk Kenyataan Bersyarat dalam JavaScript
Artikel ini menjelaskan amalan terbaik untuk kenyataan bersyarat dalam JavaScript.
YouTube Video
Amalan Terbaik untuk Kenyataan Bersyarat dalam JavaScript
Pernyataan if adalah struktur kawalan asas dalam program JavaScript. Walau bagaimanapun, apabila kod menjadi lebih kompleks, bilangan pernyataan if boleh meningkat, menjadikan kod lebih sukar untuk dibaca. Kali ini, kita akan mendalami amalan terbaik untuk mereka pernyataan if dengan betul dalam JavaScript bagi meningkatkan kebolehbacaan dan kebolehpeliharaan.
Permudahkan kod menggunakan bendera.
Permudahkan syarat yang melibatkan banyak kriteria dengan menggunakan nilai boolean.
Contoh yang Harus Dielakkan
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Contoh yang Diperbaiki
Gunakan bendera untuk menjelaskan syarat.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Pastikan Kenyataan Bersyarat Ringkas
Apabila ungkapan bersyarat menjadi kompleks, kebolehbacaan kod berkurang, maka adalah perlu untuk memastikan syaratnya ringkas.
Contoh yang Harus Dielakkan
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Contoh yang Diperbaiki
Dengan memecahkan syarat kepada pembolehubah dengan makna tertentu, anda boleh menjelaskan niatnya.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Terangkan keutamaan operator logik
Dalam pernyataan if JavaScript, salah faham keutamaan operator logik boleh membawa kepada tingkah laku yang tidak diingini.
Contoh yang Harus Dielakkan
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}Contoh yang Diperbaiki
Apabila keutamaan operator tidak jelas, anda boleh menggunakan kurungan dengan betul untuk menjelaskan.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Menggunakan penilaian litar pintas
JavaScript menyokong penilaian litar pendek untuk kedua-dua operator && (AND) dan || (OR). Penilaian litar pendek bermaksud apabila hasil sesuatu syarat telah ditentukan semasa penilaian, bahagian selebihnya tidak dievaluasi.
AND(&&): Jika sebelah kiri dievaluasi sebagai false, sebelah kanan tidak dievaluasi dan nilainya dikembalikan.OR(||): Jika sebelah kiri dievaluasi sebagai true, sebelah kanan tidak dievaluasi dan nilainya dikembalikan.
Contoh yang Harus Dielakkan
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Contoh yang Diperbaiki
Dalam kod ini, fungsi user?.someComplexFunction() dipanggil walaupun user?.isLoggedIn adalah false.
Memahami penilaian litar pendek boleh membantu anda mengelakkan pengiraan yang tidak perlu dan menulis kod yang cekap.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimumkan Penggunaan Kenyataan else
Kenyataan else boleh meningkatkan beban kognitif apabila menjejaki kod. Sebaliknya, pertimbangkan untuk menggunakan pengembalian awal.
Contoh yang Harus Dielakkan
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Contoh yang Diperbaiki
Perjelaskan syarat dengan pengembalian awal.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Penggunaan Operator Ternari yang Betul
Untuk syarat yang mudah, menggunakan operator ternari boleh memendekkan kod anda. Namun, elakkan sarang atau logik yang kompleks.
Contoh yang Harus Dielakkan
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Contoh yang Diperbaiki
Utamakan kebolehbacaan dengan memecahkan syarat.
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}Menggunakan nilai lalai dan penilaian litar pintas
Gunakan nilai lalai dan penilaian potong-circuit untuk mengurangkan percabangan dan mempermudah kod.
Contoh yang Harus Dielakkan
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Contoh yang Diperbaiki
Dalam kes ini, menggunakan operator logik menjadikannya lebih ringkas.
1// Good Example
2displayName = user?.name || 'Guest';Bezakan dengan betul masa untuk menggunakan kenyataan switch.
Apabila terdapat banyak syarat, kenyataan switch boleh menjadikan niat lebih jelas.
Contoh yang Harus Dielakkan
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}Contoh yang Diperbaiki
Menggunakan kenyataan switch boleh membantu menyusun 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}Menggunakan klausa pengawal dengan syarat keluar awal
Klausa pengawal ialah teknik yang menggunakan kenyataan if untuk keluar dari fungsi lebih awal.
Contoh yang Harus Dielakkan
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}Contoh yang Diperbaiki
Gunakan klausa pengawal untuk mengurangkan sarang.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Tulis komen untuk menjelaskan niat.
Untuk syarat kompleks atau cawangan kritikal, tambahkan komen yang ringkas dan jelas untuk menyampaikan tujuan kod.
Contoh yang Harus Dielakkan
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Contoh yang Diperbaiki
Tambahkan komen untuk menjelaskan niat.
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}Kesimpulan
Penggunaan kenyataan if JavaScript secara berkesan boleh meningkatkan kebolehbacaan dan penyelenggaraan kod dengan ketara.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.