Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Switch Trong Javascript

Switch Trong Javascript


Ngày 4 Tháng 5 Năm 2020

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu khái niệm cũng như cách sử dụng câu lệnh switch trong ngôn ngữ lập trình Javascript cho trang web nhé.

Switch Trong Javascript

Câu lệnh switch giúp chúng ta thực thi đoạn mã khác nhau theo những điều kiện khác nhau. Bạn có thể hiểu là nó có thể thay thế cho nhiều câu lệnh kiểm tra điều kiện if ở trong Javascript.

Cú pháp (Syntax)

Một câu lệnh switch sẽ có một hay nhiều case dùng để thực thi những khối mã khác nhau dành cho những trường hợp khác nhau và nó cũng có thêm một trường hợp mặc định để thực hiện khi tất cả các điều kiện đều sai. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

switch (Biểu thức) {
    case giá_trị1:
        thực hiện lệnh 1;
        break;
    case giá_trị2:
        thực hiện lệnh 2;
        break;
    case giá_trị3:
        thực hiện lệnh 3;
        break;
    default:
       thực hiện lệnh mặc định;
}

Ở đây mình có một số lưu ý nhỏ về cú pháp của switch ở bên dưới nhé:

  • Biểu thức ở đây có thể là số hoặc là chuỗi.
  • Các giá trị của case thì không được lặp lại khi sử dụng câu lệnh switch nhé.
  • default giúp chúng ta thực thi câu lệnh mặc định khi tất cả các giá trị của case không thỏa mãn biểu thức.
  • Câu lệnh break được sử dụng để dừng vòng lặp khi có giá trị case phù hợp. Nếu bạn không sử dụng break thì nó sẽ tiếp tục đi đến trường hợp tiếp theo để kiểm tra và thực thi câu lệnh.

Ở đây mình sẽ lấy ví dụ về câu lệnh if để giúp bạn có thể thấy được sự tương đồng cũng như nét khác biệt khi thực thi với câu lệnh switch:

if (Biểu thức == gia_tri1) {
     thực hiện lệnh 1;
} else if (Biểu thức == gia_tri2) {
     thực hiện lệnh 2;
} else if (Biểu thức == gia_tri3) {
     thực hiện lệnh 3
} else {
     thực hiện lệnh mặc định;
}

Ví dụ Switch Javascript

Sau đây để hiểu rõ hơn chúng ta hãy cùng nhau đi vào tìm hiểu ví dụ nhé:

​let a = 5 + 7;
switch (a) {
  case 10:
     console.log( 'Đáp án là 10' );
    break;
  case 11:
     console.log( 'Đáp án là 11' );
    break;
  case 12:
     console.log( 'Đáp án là 12' );
    break;
  default:
     console.log( "Không thể tính toán được" );
}

Và kết quả bạn xem hình ảnh bên dưới nhé:

Ví dụ Switch trong Javascript

Ở đây câu lệnh switch sẽ bắt đầu so sánh giá trị biến a với các giá trị trong case.

  • Đầu tiên ta có giá trị biến a là 12 sau đó đem đi so sánh với trường hợp đầu tiên là 10 : không phù hợp nên chuyển sang trường hợp thứ hai.
  • Tiếp tục nó sẽ so sánh giá trị a = 12 với trường hợp thứ hai là 11: không phù hợp nên chuyển sang trường hợp thứ ba.
  • Tiếp theo nó sẽ so sánh giá trị a = 12 với trường hợp thứ ba là 12: phù hợp, in ra màn hình Đáp án là 12 và dừng câu lệnh bằng break;

Cũng như ví dụ trên thì chúng ta thử bỏ lệnh break; để xem câu lệnh switch sẽ thực hiện như thế nào nhé:

switch (11) { 
  case 10:
     console.log( 'Đáp án là 10' );
  case 11:
     console.log( 'Đáp án là 11' );
  case 12:
     console.log( 'Đáp án là 12' );
  default:
     console.log( "Không thể tính toán được" );
}

Bạn xem kết quả ở bên dưới nhé:

Ví dụ Switch 2 trong Javascript

Như bạn thấy thì khi chúng ta bỏ câu lệnh break; thì nó sẽ thực thi các câu lệnh tiếp theo mà không kiểm tra lại giá trị của bất kỳ trường hợp nào.

Sử Dụng Multi-case Trong switch Javascript

Nãy giờ chúng ta chỉ thực thi câu lệnh khi phù hợp với giá trị của trường hợp nào đó. Phần tiếp theo mình sẽ giới thiệu thêm về cách nhóm các trường hợp trong câu lệnh switch ở dưới đây nhé:

var ngay = 4;
switch(ngay) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log("Hôm nay là ngày trong tuần");
        break;
    case 0:
    case 6:
        alert("Hôm nay là ngày cuối tuần");
        break;
    default:
          alert("Hãy tận hưởng cuộc sống của bạn");
}

Bạn xem kết quả bên dưới nhé:

Ví dụ nhóm Switch trong Javascript

Ở trên bạn có thể hiểu là mình đặt thứ 2 đến thứ 6 bằng số 1, 2, 3, 4, 5 và số 0, 6 là đại diện cho chủ nhật và thứ bảy. Lúc này đoạn code trên sẽ giúp mình kiểm tra xem hôm nay là ngày trong tuần hay cuối tuần bằng cách kiểm tra các giá trị của từng trường hợp trong câu lệnh switch.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng câu lệnh switch trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!