Các câu lệnh kiểm soát javascript khác nhau là gì?

Có nhiều cách để định hướng cách mã của bạn chạy trong một chương trình, nhưng trước tiên hãy xác định cấu trúc điều khiển bằng thuật ngữ đơn giản

Các cấu trúc điều khiển trong lập trình cho phép bạn với tư cách là nhà phát triển thực thi (hoặc đưa ra quyết định về) các câu lệnh hoặc biểu thức mã nhất định. Theo một cách nào đó, nó giống như đi bộ lên một ngọn núi và tình cờ gặp một ngã ba đường nơi một con đường đưa bạn trở lại căn cứ và con đường kia đưa bạn lên đỉnh. Đó cũng là một cách để bạn với tư cách là nhà phát triển đưa ra quyết định có tiếp tục đưa ra tuyên bố khi một số điều kiện nhất định có được đáp ứng hay không

Lựa chọn. Lựa chọn. Lựa chọn

Trong JavaScript, có nhiều cách để tận dụng các cấu trúc điều khiển tích hợp để kiểm soát luồng mã của bạn

Dưới đây là một số chúng ta sẽ xem xét ngày hôm nay

• Câu lệnh If/Else
• Báo cáo chuyển đổi
• Bảng tra cứu
• Toán tử bậc ba
• …và nhiều thứ khác nữa

Mục đích của bài viết này là giới thiệu cho người đọc những cách khác nhau để bạn có thể kiểm soát cách dòng mã của mình. Đây hoàn toàn không phải là một sự so sánh hoặc sử dụng điều này so với. loại bài báo đó. Để đơn giản, tôi đã tránh đưa bất kỳ cơ chế lặp nào vào danh sách này, tôi cũng có thể đã quên một hoặc hai cấu trúc điều khiển bổ sung. NHƯNG. Bắt đầu nào

Câu lệnh If/Else

Câu lệnh if hoặc if-else là một câu lệnh có điều kiện cho phép chúng ta thực thi một khối mã nếu một điều kiện cụ thể là đúng. Nếu nó là sai thì một câu lệnh khác được thực hiện. Đây là một trong những câu lệnh điều kiện đơn giản nhất mà bạn sẽ học đối với bất kỳ ngôn ngữ nào.

Dưới đây là cú pháp của một câu lệnh if đơn giản

cú pháp

if ( condition/conditions ) {
  statement
}
alternative statement

Điều này có thể được biểu diễn trực quan như sau

Ảnh từ Eloquent JS

Ví dụ, đây là một câu lệnh if đơn giản để kiểm tra xem một số có chẵn không và in ra TRUE hoặc FALSE

Trong ví dụ trên, chúng ta quan sát thấy điều kiện kiểm tra xem một số có chia hết cho 2 hay không bằng toán tử modulo. Toán tử modulo trả về phần còn lại của một giá trị.

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

1 đánh giá xem giá trị này có phải là 0 hay không và đánh giá thành giá trị boolean

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

2 hoặc

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

3

Hãy xem một ví dụ phức tạp hơn một chút với bài toán fizzbuzz cổ điển. Nếu bạn không quen với fizzbuzz, vui lòng xem liên kết wiki tại đây. Ý chính của vấn đề là như sau

• Bất kỳ số nào chia hết cho ba được in từ

  switch (expression) {
    case clause1:
      // Statements to be executed
      break;
    case clause2:
      // Statement to be executed
      break;
    case clause3:
      // Statement to be executed
      break;
    default: // Optional but usually considered good practice
    // Statement to be executed if no cases match
  }

  4
• Bất kỳ số nào chia hết cho năm viết hoa

  switch (expression) {
    case clause1:
      // Statements to be executed
      break;
    case clause2:
      // Statement to be executed
      break;
    case clause3:
      // Statement to be executed
      break;
    default: // Optional but usually considered good practice
    // Statement to be executed if no cases match
  }

  5
• Bất kỳ số nào chia hết cho ba và năm viết hoa

  switch (expression) {
    case clause1:
      // Statements to be executed
      break;
    case clause2:
      // Statement to be executed
      break;
    case clause3:
      // Statement to be executed
      break;
    default: // Optional but usually considered good practice
    // Statement to be executed if no cases match
  }

  6

Trực quan, điều này có thể được biểu diễn như sau

Ví dụ fizzBuzz thể hiện câu lệnh if/else phức tạp hơn một chút với nhiều điều kiện. Ví dụ này cũng nhấn mạnh tầm quan trọng của các vị trí điều kiện. Nói chung, các điều kiện nghiêm ngặt hơn được đặt ở trên cùng để đảm bảo rằng quy trình không mặc định ở các điều kiện ít nghiêm ngặt hơn

Báo cáo chuyển đổi

Ảnh từ Google

Tương tự như cách thức hoạt động của câu lệnh if, câu lệnh switch cũng sẽ loại bỏ một điều kiện (biểu thức), khi một biểu thức khớp với mệnh đề trường hợp, cấu trúc sẽ thực thi các câu lệnh liên quan đến mệnh đề trường hợp đó

Cú pháp______1

Biểu thức được hiển thị trong cú pháp trên sẽ được so sánh và khớp với từng mệnh đề cho đến khi nó tìm thấy kết quả khớp hoặc đạt đến giá trị mặc định mà nó không thể tìm thấy kết quả khớp.

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

7 rất quan trọng vì nó ngăn trường hợp tiếp theo thực hiện sau khi đáp ứng tiêu chí

ví dụ

Một ví dụ đơn giản về câu lệnh

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

8 với đèn giao thông

Đây là một ví dụ khác đánh giá một số mã HTTP, xử lý các phản hồi lỗi của máy khách (4XX)

Trên đây là cách sử dụng khá đơn giản của câu lệnh

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

8. Bạn có thể tìm thấy các trường hợp sử dụng bổ sung/được sử dụng để chuyển từ tài liệu mdn tại đây

Bảng tra cứu

Ảnh từ Google

Bảng tra cứu, Bản đồ băm hoặc Bản đồ. Đây là một số thuật ngữ được sử dụng ngày nay để mô tả một loại cấu trúc dữ liệu khác mà chúng ta có thể sử dụng để kiểm soát luồng dữ liệu được kết hợp với các toán tử kết hợp vô hiệu trong JavaScript. Xin lưu ý, có sự khác biệt giữa bản đồ băm, đối tượng và bản đồ, nhưng trọng tâm của chúng tôi là xem cách chúng tôi có thể tận dụng điều này để kiểm soát mã của mình

Để thực hiện công việc này, chúng tôi sẽ cần tạo một bảng tra cứu và sử dụng toán tử kết hợp nullish (??) để xử lý việc đánh giá cho chúng tôi. Ý tưởng về bảng tra cứu giống như tìm kiếm một từ trong từ điển và sau đó trả về định nghĩa của từ đó sau khi tìm thấy. Vui lòng xem tài liệu sau đây từ MDN để tìm hiểu thêm về toán tử hợp nhất nullish

Cú pháp____11

Cách hoạt động của toán tử kết hợp nullish là nó sẽ trả về giá trị ở vế trái của

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

10 nếu nó KHÔNG phải là

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

11 hoặc

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

12, nếu không nó sẽ trả về trường hợp mặc định ở vế phải

Chúng ta sẽ xem xét hai cách tiếp cận riêng biệt để tạo bảng tra cứu

• Vật
• bản đồ

Bảng tra cứu với đối tượng JavaScript

Hãy xem bảng tra cứu sử dụng các đối tượng trong JavaScript

Nhớ lại trong phần câu lệnh chuyển đổi, có một ví dụ xem xét các mã phản hồi khác nhau của máy khách (lỗi 4XX) cụ thể

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

5

Hãy lấy cái này và ném từng mệnh đề/câu lệnh vào một đối tượng làm thuộc tính

Tiếp theo, tạo một hàm có tên là

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

13 sẽ trả về mã trạng thái và phản hồi tin nhắn dựa trên đầu vào mã trạng thái

Cách hoạt động của ví dụ trên là nó sẽ chuyển vào StatusCode dưới dạng khóa để tìm kiếm trong bảng clientResponseCode. Nếu thuật ngữ được tìm thấy, thì nó sẽ trả về toán hạng bên trái của nó

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

14. Nếu

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

15 ước tính thành

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

11 hoặc

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

12, thì nó sẽ trả về toán hạng bên phải, đóng vai trò là trường hợp mặc định

Bảng tra cứu với Bản đồ JavaScript

Thay vì sử dụng một JavaScript

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

18 như một

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

19, bây giờ chúng ta sẽ triển khai cùng một bảng tra cứu với một cấu trúc dữ liệu thực tế, gốc của

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

19. Trong lịch sử, đặc biệt là những ngày ES5, các nhà phát triển thường triển khai một

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

18 như một

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

19. Có một số nhược điểm khác biệt đối với phương pháp này, đặc biệt là khi bảng của bạn phát triển, có khả năng xảy ra xung đột. Hiệu suất khôn ngoan, cấu trúc dữ liệu

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

19 lý tưởng cho các tình huống thường xuyên thêm và xóa các cặp khóa-giá trị. Vui lòng xem liên kết này nếu bạn không quen với JS Maps và cũng xem phần so sánh Maps với. Đối tượng ở đây

Cú pháp để khởi tạo cấu trúc dữ liệu Bản đồ như sau

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

7

Hãy lấy Đối tượng JavaScript đó từ bảng clientStatusCode trước đó và chuyển đổi nó thành bản đồ

Sau khi chúng tôi tạo Bản đồ này, hãy xem cách chúng tôi có thể sử dụng toán tử kết hợp nullish

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

8

Cách tiếp cận tương tự như sử dụng toán tử kết hợp nullish cho một

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

18, với sự khác biệt là đọc các giá trị của bản đồ

Toán tử ternary (Có điều kiện)

Các toán tử bậc ba thường được sử dụng thay thế cho câu lệnh if/else. Nó thường bao gồm ba phần. một điều kiện, một biểu thức để thực hiện nếu

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

55, và một biểu thức để thực hiện nếu

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

56. Tuy nhiên, điều này không có nghĩa là nó là sự thay thế toàn diện cho tất cả các câu lệnh if/else. Đôi khi để dễ đọc, bạn thực sự chỉ nên

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

57eep nó

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

58đơn giản và

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

58ngu ngốc. Vui lòng tuân theo các quy tắc Hướng dẫn về Phong cách của Airbnb. &

cú pháp

Đây là cú pháp cho toán tử ternary

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

5

Bây giờ hãy so sánh điều đó với câu lệnh If/Else tiêu chuẩn

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

6Ví dụ

Hãy xem xét việc chuyển đổi một if/else đơn giản thành một toán tử bậc ba trong một hàm gọi là isEven. Ví dụ: nếu số tôi nhập vào là

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

70 thì trả về

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

2 và

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

3 nếu ngược lại

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

0

Nó thường được coi là phương pháp hay nhất để tránh các toán tử bậc ba lồng nhau (nếu bạn có thể) vì đôi khi có thể khó đọc

Hãy lấy một ví dụ trong đó các nhà khai thác ternary có thể nhanh chóng nổ tung

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

1

Như bạn có thể thấy với ví dụ trên, đây có thể là một trong những thời điểm mà các toán tử bậc ba có thể không cần thiết là lựa chọn tốt nhất vì nó ảnh hưởng một chút đến khả năng đọc. Có lẽ câu lệnh if/else, switch hoặc bảng tra cứu sẽ là lựa chọn tốt hơn.

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

73Giữ cho nó đơn giản

Hãy xem một ví dụ khác về việc tránh các câu lệnh ternary không cần thiết khi chúng ta kiểm tra và chỉ định số cổng nếu nó tồn tại từ môi trường khác đặt cổng mặc định _______ 274

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

0

GHI CHÚ. Mặc dù các toán tử bậc ba rất gọn gàng, hãy sử dụng chúng một cách khôn ngoan. Ngoài ra, các toán tử bậc ba cũng có thể được sử dụng như một cách để hiển thị có chọn lọc một số thành phần React nhất định tùy thuộc vào điều kiện nào được đáp ứng

Phần kết luận

Hôm nay chúng ta đã học một vài cấu trúc điều khiển có sẵn trong JavaScript. Chúng tôi đã học cách sử dụng toán tử bậc ba, câu lệnh chuyển đổi và cách tạo/sử dụng bảng tra cứu. Chúng tôi cũng đã học cách triển khai bảng tra cứu bằng cách sử dụng

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

19 và

switch (expression) {
  case clause1:
    // Statements to be executed
    break;
  case clause2:
    // Statement to be executed
    break;
  case clause3:
    // Statement to be executed
    break;
  default: // Optional but usually considered good practice
  // Statement to be executed if no cases match
}

18. Danh sách hiển thị ở đây không có nghĩa là toàn diện. Mỗi cấu trúc điều khiển có các trường hợp sử dụng và lợi ích/chi phí tương ứng. Mục tiêu của bài viết này là chỉ cho bạn các cách khác nhau để kiểm soát dòng mã của bạn, đây hoàn toàn không phải là một sự so sánh

Nếu bạn thích bài viết này, vui lòng chia sẻ nó với những người khác và vỗ tay cho tôi hoặc theo dõi tôi trên Medium. Nếu bạn có bất kỳ câu hỏi, nhận xét hoặc quan tâm nào thì vui lòng để lại nhận xét

Các tuyên bố kiểm soát khác nhau là gì?

5 câu lệnh JavaScript là gì?

Bốn loại tuyên bố kiểm soát là gì?

Các cấu trúc điều khiển khác nhau trong JavaScript được giải thích bằng các ví dụ là gì?