Tránh các câu lệnh if lồng nhau trong javascript

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ần

Bâ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
    ? "Oops, that's an error. Please try again later!"
    : "Thanks for contacting us! We'll be in touch!"

  2
• Vì

  const message = hasError
    ? "Oops, that's an error. Please try again later!"
    : "Thanks for contacting us! We'll be in touch!"

  2 không còn cần phải ghi đè khi có lỗi, chúng tôi có thể sử dụ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

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!"

0

Tiế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!"

1

Cô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

1. Đầ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
     ? "Oops, that's an error. Please try again later!"
     : "Thanks for contacting us! We'll be in touch!"

   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ử
2. Nếu giá trị ở phía bên trái được tìm thấy là

   const message = hasError
     ? "Oops, that's an error. Please try again later!"
     : "Thanks for contacting us! We'll be in touch!"

   04 thì giá trị ở bên phải của toán tử được trả về

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

1. Đầ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
     ? "Oops, that's an error. Please try again later!"
     : "Thanks for contacting us! We'll be in touch!"

   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ử
2. Nếu giá trị ở phía bên trái được tìm thấy là

   const message = hasError
     ? "Oops, that's an error. Please try again later!"
     : "Thanks for contacting us! We'll be in touch!"

   03 thì giá trị ở bên phải của toán tử được trả về

Đ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ừng

let message = "Thanks for contacting us! We'll be in touch shortly!"
if (hasError) {
  message = "Oops, that's an error. Please try again later!"
}

3

Như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!"
}

8

Nế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út

const message = hasError
  ? "Oops, that's an error. Please try again later!"
  : "Thanks for contacting us! We'll be in touch!"

3

Cá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ều

Sử 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òng

Ví 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!"

0

Bâ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!"

01

const message = hasError
  ? "Oops, that's an error. Please try again later!"
  : "Thanks for contacting us! We'll be in touch!"

2

Mộ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ên

Bả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

Tôi có thể sử dụng cái gì thay vì các câu lệnh if lồng nhau trong JavaScript?

Có nên tránh các câu lệnh if lồng nhau không?

Các câu lệnh được lồng vào nhau nếu thực hành không tốt?

Câu lệnh khác có thể tránh được nhiều câu lệnh if lồng nhau là gì?