Nếu bạn muốn code của mình clean, hãy cố gắng tránh các câu lệnh điều kiện càng nhiều càng tốt.
Khi nói đến các câu lệnh có điều kiện, bạn không phải luôn sử dụng cú pháp if / switch cổ điển. Nó phụ thuộc vào bối cảnh bạn đang làm.
ES6 cung cấp cho bạn nhiều sức mạnh hơn để viết các câu lệnh điều kiện tốt hơn. Nó ngắn hơn và sạch hơn.
Đó là những gì tôi sẽ cho bạn thấy trong bài viết này 6 cách để cải thiện các câu lệnh điều kiện tùy thuộc vào ngữ cảnh.
Tìm hiểu thêm về khóa học JavaScript tại Techmaster
1. Trở lại sớm thay vì if…else
Các điều kiện lồng nhau là xấu, khó kiểm soát, và dễ tạo ra lỗi. Một màn hình nhỏ như macbook 13'' không thể hiển thị các dòng mã đầy đủ nếu bạn có nhiều khối lồng nhau. Đôi khi bạn phải cuộn ngang để xem toàn bộ mã, điều này không thỏa mãn bạn.
const isBabyPet = (pet, age) => {
if (pet) {
if (isPet(pet)) {
console.log(‘It is a pet!’);
if (age < 1) {
console.log(‘It is a baby pet!’);
}
} else {
throw new Error(‘Not a pet!’);
}
}
else {
throw new Error(‘Error!’);
}
};
Vậy làm sao để san phẳng các điều kiện lồng nhau? Trở về sớm. Cụ thể, nếu có lỗi hoặc gì đó không hợp lệ, bạn nên trả về nó ở đầu hàm.
const isBabyPet = (pet, age) => {
if (!pet) throw new Error(‘Error!’);
if (!isPet(pet)) throw new Error(‘Not a pet!’);
console.log(‘It is a pet!’);
if (age < 1) {
console.log(‘It is a baby pet!’);
}
};
2. Sử dụng Array.includes
Giả sử bạn cần kiểm tra xem một con vật có phải là vật nuôi hay không:
const isPet = animal => {
if (animal === ‘cat’ || animal === ‘dog’) {
return true;
}
return false;
};
Nếu bộ sưu tập thú nuôi chỉ có mèo và chó, thì không sao. Nhưng nếu nó có nhiều hơn? Như mèo, chó, chim, rắn. Danh sách tiếp tục. Tất nhiên, bạn có thể thêm nhiều hơn nữa || để hoàn thành nhiệm vụ. Tuy nhiên, tôi có một cách tốt hơn:
const isPet = animal => {
const pets = [‘cat’, ‘dog’, ‘snake’, ‘bird’];
return pets.includes(animal);
};
Bạn thấy đấy, nó đẹp hơn là sử dụng ||. Vì vậy, đối với nhiều điều kiện như trên, hãy sử dụng Array.includes
3. Sử dụng các thông số hàm mặc định
Chúng tôi thường đảm bảo rằng thông số không phải là null hoặc không xác định. Nếu là null, chúng ta cần gán cho nó một giá trị mặc định trước khi sử dụng nó.
const isBabyPet = (pet, age) => {
if (!pet) pet = ‘cat’;
if (!age) age = 1;
if (age < 1) {
// Do something
}
};
Chúng ta có thực sự phải viết hai câu lệnh if đầu tiên không? Không. Bằng cách sử dụng các giá trị mặc định, bạn có thể xóa chúng.
const isBabyPet = (pet = ‘cat’, age = 1) => {
if (age < 1) {
console.log(‘baby’);
}
};
4. Sử dụng Array.every
Nếu bạn được đưa một mảng thú cưng và yêu cầu kiểm tra xem tất cả các vật nuôi có bốn chân hay không?
Thông thường, chúng tôi sẽ làm như sau:
const pets = [
{ name: ‘cat’, nLegs: 4 },
{ name: ‘snake’, nLegs: 0 },
{ name: ‘dog’, nLegs: 4 },
{ name: ‘bird’, nLegs: 2 }
];
const check = (pets) => {
for (let i = 0; i < pets.length; i++) {
if (pets[i].nLegs != 4) {
return false;
}
}
return true;
}
check(pets); // false
Chúng tôi có câu lệnh for và if ở đây. Nó không phải là rất nhiều nhưng nó vẫn tuyệt vời nếu chúng ta có thể loại bỏ chúng. Trên thực tế, chúng ta có thể hoàn thành nhiệm vụ chỉ với một dòng:
let areAllFourLegs = pets.every(p => p.nLegs === 4);
Một sự cải thiện lớn, phải không?
5. Sử dụng Array.some
Hãy thay đổi nhiệm vụ một chút. Bây giờ chúng ta sẽ kiểm tra xem ít nhất một con vật cưng có bốn chân. Đã đến lúc sử dụng Array.some
let check = pets.some(p => p.nLegs === 4);
6. Việc lập chỉ mục thay vì switch…case
Câu lệnh switch dưới đây sắp trả về các giống thú cưng của tổng quát.
const getBreeds = pet => {
switch (pet) {
case ‘dog’:
return [‘Husky’, ‘Poodle’, ‘Shiba’];
case ‘cat’:
return [‘Korat’, ‘Donskoy’];
case ‘bird’:
return [‘Parakeets’, ‘Canaries’];
default:
return [];
}
};
let dogBreeds = getBreeds(‘dog’); //[“Husky”, “Poodle”, “Shiba”]
Có Case…return, case…return, và case…return nữa. Tôi là một lập trình viên và cũng là một nhà văn nên tôi thấy sự lặp đi lặp lại là khá nhàm chán. Hãy nhìn vào cách tiếp cận tốt hơn dưới đây.
const breeds = {
‘dog’: [‘Husky’, ‘Poodle’, ‘Shiba’],
‘cat’: [‘Korat’, ‘Donskoy’],
‘bird’: [‘Parakeets’, ‘Canaries’]
};
const getBreeds = pet => {
return breeds[pet] || [];
};
let dogBreeds = getBreeds(‘cat’); //[“Korat”, “Donskoy”]
Nếu bạn giống tôi, bạn sẽ thích cách tiếp cận thứ hai hơn là cái đầu tiên.
Thế thôi. Hãy linh hoạt khi làm việc với các câu lệnh có điều kiện.
Tôi có bỏ nỡ cách nào tốt hơn không? Nếu có, hãy cho tôi biết trong bình luận bên dưới.
Hy vọng bạn sẽ thích bài viết này.
Bài viết gốc tại đây
Bình luận