Tôi thích coi logic có điều kiện như bánh mì và bơ của phần mềm. Nó cung cấp cho các nhà phát triển sức mạnh để xây dựng những thứ thú vị, hữu ích và thú vị
Cách phổ biến nhất để xử lý logic điều kiện là câu lệnh if. Câu lệnh if phổ biến, linh hoạt và dễ hiểu, vì vậy sự phổ biến của nó không có gì ngạc nhiên
Tuy nhiên, có những cách khác để xử lý logic có điều kiện thường bị các nhà phát triển bỏ qua. Thật dễ dàng để đạt được câu lệnh if đáng tin cậy cho mọi công việc, nhưng học về các kỹ thuật khác sẽ giúp bạn trở thành một lập trình viên khéo léo và hiệu quả hơn
Một thợ mộc bậc thầy sẽ không sử dụng cùng một công cụ cho mọi công việc và một nhà phát triển bậc thầy cũng vậy.
Bài viết này khám phá bốn lựa chọn thay thế cho câu lệnh if cổ điển
- Toán tử bậc ba
- Báo cáo chuyển đổi
- Toán tử logic [&& và. ]
- Bản đồ tra cứu
Toán tử bậc ba
Toán tử ternary là một cách tuyệt vời để xử lý các điều kiện if-else cơ bản. Trong ví dụ bên dưới, giá trị được gán cho
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
2 thay đổi tùy thuộc vào việc const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
3 là thật hay giảVới câu lệnh if cổ điển
let message = "Thanks for contacting us! We'll be in touch shortly!"
if [hasError] {
message = "Oops, that's an error. Please try again later!"
}
Giải pháp này trước tiên đặt
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
2 thành phiên bản không có lỗi và sau đó ghi đè lên nếu cầnBây giờ với một nhà điều hành ternary thay vì
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
Tùy chọn ternary có một số lợi thế đáng chú ý ở đây
- Nó gọn hơn vì chỉ cần gán 1 lần
const message = hasError
2
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!" - Vì
const message = hasError
2 không còn cần phải ghi đè khi có lỗi, chúng tôi có thể sử dụng
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"const message = hasError
7 thay vì
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"const message = hasError
8
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
Nhà điều hành bậc ba rõ ràng là người chiến thắng trong tình huống này, nhưng đừng quá sa đà vào nó. Chỉ áp dụng nó trong những trường hợp yêu cầu logic tương đối đơn giản và không kết hợp nhiều bộ ba trên một dòng. Đồng nghiệp của bạn sẽ cảm ơn bạn
Báo cáo chuyển đổi
Câu lệnh chuyển đổi là sự thay thế rõ ràng nhất cho câu lệnh if. Thay vì xác định xem một điều kiện là đúng hay sai, nó sẽ xem xét một giá trị cụ thể và thực thi khối
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
9 khớp với nóĐiều này làm cho các câu lệnh switch kém linh hoạt hơn một chút so với các câu lệnh if, nhưng nó cũng làm cho chúng ngắn gọn hơn một chút. Hãy xem một ví dụ
Đầu tiên, với câu lệnh if
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
0Tiếp theo, với một công tắc
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
1Công tắc sử dụng nhiều dòng mã hơn, nhưng tránh lặp đi lặp lại việc kiểm tra đẳng thức và có giao diện tổng thể hợp lý hơn
Một chi tiết quan trọng cần xem xét khi viết câu lệnh chuyển đổi là việc bạn sử dụng dấu ngắt. Không giống như chuỗi if-else, câu lệnh chuyển đổi có thể "rơi" sang trường hợp tiếp theo. Điều này có thể gây nhầm lẫn, vì vậy bạn thường nên thêm dấu ngắt vào cuối mỗi trường hợp
Toán tử logic [&& và. ]
Các toán tử
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
00 và const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
01 [“and” và “or”] hoạt động khác nhau trong JavaScript so với các ngôn ngữ lập trình khác. Hành vi đặc biệt này cung cấp cho các toán tử này một khả năng duy nhất để xử lý logic có điều kiệnĐây là cách toán tử
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
00 hoạt động trong JavaScript- Đầu tiên, nó nhìn vào phía bên trái của toán tử. Nếu giá trị của nó là
const message = hasError
03 thì nó trả về giá trị đó mà không cần nhìn vào phía bên phải của toán tử
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!" - Nếu giá trị ở phía bên trái được tìm thấy là
const message = hasError
04 thì giá trị ở bên phải của toán tử được trả về
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
Tương tự, đây là cách hoạt động của toán tử
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
01- Đầu tiên, nó nhìn vào phía bên trái của toán tử. Nếu giá trị của nó là
const message = hasError
04 thì nó trả về giá trị đó mà không cần nhìn vào phía bên phải của toán tử
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!" - Nếu giá trị ở phía bên trái được tìm thấy là
const message = hasError
03 thì giá trị ở bên phải của toán tử được trả về
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
Điểm mấu chốt rút ra từ điều này là các toán tử
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
00 và const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
01 không nhất thiết phải trả về một giá trị boolean [đúng hoặc sai]. Điều này có thể gây nhầm lẫn, nhưng nó cũng có thể hữu íchĐưa toán tử && vào hoạt động
Thường thì bạn muốn truy cập một thuộc tính bên trong một đối tượng, nhưng không thể chắc chắn liệu đối tượng đó có tồn tại trước đó hay không
Ví dụ: có thể bạn muốn sử dụng thuộc tính
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
10 của người dùng để tạo thông báo chào mừnglet message = "Thanks for contacting us! We'll be in touch shortly!"
if [hasError] {
message = "Oops, that's an error. Please try again later!"
}
3Nhưng nếu thay vào đó,
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
11 được đặt thành const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
12, const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
13 hoặc const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
14 thì sao?let message = "Thanks for contacting us! We'll be in touch shortly!"
if [hasError] {
message = "Oops, that's an error. Please try again later!"
}
8Nếu
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
11 không phải là một đối tượng và chúng tôi cố gắng truy cập thuộc tính const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
10 trên đó, JavaScript sẽ báo lỗiĐiều này có thể tránh được bằng cách thêm câu lệnh if vào mã của bạn
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
1Đây là thủ thuật, nhưng toán tử
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
00 có thể làm cho điều này ngắn gọn hơn một chútconst message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
3Cách tiếp cận này cho phép đặt
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
2 bằng const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
7 thay vì const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
8 và hoàn thành công việc trong một dòng mã. Tốt hơn nhiềuSử dụng. Nhà điều hành
Toán tử
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
01 rất phù hợp để gán các giá trị dự phòngVí dụ: giả sử bạn muốn tạo biến
let message = "Thanks for contacting us! We'll be in touch shortly!"
if [hasError] {
message = "Oops, that's an error. Please try again later!"
}
32 cho người dùng hiện tại của mình. Nếu người dùng đó có tên người dùng hợp lệ thì nên sử dụng tên người dùng đó, nhưng nếu tên người dùng được đặt thành const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
12 thì nên sử dụng giá trị dự phòng là “Khách”Đầu tiên, với một câu lệnh if đơn giản
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
0Bây giờ, bằng cách sử dụng toán tử
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
01const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
2Một lần nữa - sạch hơn nhiều và chỉ có một dòng mã. Một cải tiến tuyệt vời
Bản đồ tra cứu
Bản đồ tra cứu là lựa chọn hoàn hảo để nhận một giá trị được liên kết với một giá trị khác
Ví dụ, hãy tưởng tượng rằng chúng ta muốn lấy màu liên quan đến trạng thái của hộp thông báo. Một thiết lập điển hình có thể trông giống như thế này
Thành công là màu xanh lá cây
Cảnh báo có màu vàng
Thông tin có màu xanh
Lỗi màu đỏ
Hãy viết một hàm thực hiện điều này. Đầu tiên, với câu lệnh if
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
0Điều này tốt, nhưng bản đồ tra cứu có thể phù hợp hơn. Đối tượng chữ là một cách để triển khai bản đồ tra cứu trong JavaScript
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
1Điều này là mỏng hơn và ít lặp đi lặp lại. Là một lợi ích bổ sung, bản đồ tra cứu không nhất thiết phải được mã hóa cứng — mối quan hệ giữa trạng thái 'và màu sắc có thể động và mẫu này sẽ vẫn hoạt động
Bản tóm tắt
Nếu các câu lệnh là một công cụ mạnh mẽ mà tất cả các nhà phát triển JavaScript nên theo sát, nhưng có những phương pháp khác để xử lý logic có điều kiện đôi khi phù hợp hơn
Các toán tử bậc ba là hoàn hảo để xử lý logic if-else trong một dòng mã, nhưng chúng chỉ nên được sử dụng cho các trường hợp sử dụng khá đơn giản
Các câu lệnh chuyển đổi là lý tưởng khi bạn quan tâm đến một biến cụ thể có thể nhận nhiều giá trị riêng biệt. Chúng ít mạnh hơn câu lệnh if nhưng thường dễ nhìn hơn
Không giống như các ngôn ngữ lập trình khác, toán tử
const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
00 và const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
01 không phải lúc nào cũng trả về giá trị boolean trong JavaScript và hành vi này có thể hữu ích. Toán tử const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
00 thường được sử dụng để tránh lỗi khi cố gắng truy cập thuộc tính của đối tượng và toán tử const message = hasError
? "Oops, that's an error. Please try again later!"
: "Thanks for contacting us! We'll be in touch!"
01 thường được sử dụng để gán giá trị dự phòng cho một biến khi không có lựa chọn đầu tiênBản đồ tra cứu là một cách tuyệt vời để lấy một giá trị được liên kết với một giá trị khác, ví dụ: lấy màu được liên kết với trạng thái của thư [trạng thái thành công có thể ánh xạ thành màu xanh lá cây]
Nắm vững bốn mẫu logic có điều kiện này sẽ giúp bạn linh hoạt hơn trong cách bạn cấu trúc JavaScript của mình và sẽ giúp bạn trở thành một lập trình viên giỏi hơn về tổng thể. Bằng cách chọn đúng công cụ cho công việc, mã của bạn sẽ trở nên thanh lịch, ngắn gọn và dễ bảo trì hơn