Trong bài này chúng ta sẽ tìm hiểu lệnh switch case trong Javascript, đây cũng là một lệnh dùng để rẻ nhánh như lệnh if else.

1. Câu lệnh switch case trong JavaScript

Lệnh switch case dùng để xác định một danh sách các trường hợp và trong mỗi trường hợp sẽ có một đoạn mã, khi giá trị của bạn trùng khớp với trường hợp nào thì đoạn mã của trường hợp đó sẽ được thực thi.

Lệnh switch case có công dụng giống như lệnh if else đó là đều dùng để rẻ nhánh chương trình, ứng với mỗi nhánh sẽ có một điều kiện cụ thể và điều kiện đó phải sử dụng toán tử so sánh bằng, còn đối với lệnh if else thì bạn có thể truyền vào một mệnh đề bất kì và sử dụng nhiều toán tử khác nhau

Cú pháp:

Mục tiêu của một lệnh switch là cung cấp một biểu thức để ước lượng và một số lệnh khác nhau để thực thi trên cơ sở giá trị của biểu thức. Bộ thông dịch kiểm tra mỗi case – trường hợp với giá trị của biểu thức tới khi tìm thấy một sự so khớp. Nếu không có so khớp nào, một điều kiện default – mặc định sẽ được sử dụng.

 switch (biến)
{
    case n1 : // biến === n1{
        // mã thực thi
        break;
    }
    case n2 : // biến === n2{
        // mã thực thi
        break;
    }
    ...
    case nk : // biến === nk{
        // mã thực thi
        break;
    }
    default : {
        // mã thực thi
    }
}

Trong đó:

  • Biến có giá trị là số nguyên hoặc kí tự
  • Các ni( i = 1, 2,… ,k ) là các giá trị của biến
  • Mã thực thi là câu lệnh sẽ được thực thi nếu điều kiện đúng biến bằng ni
  • Câu lệnh break có chức năng kết thúc câu lệnh khi mã được thực thi
  • default có thế có hoặc không, khi kiểm tra tất cả các điều kiện nếu không thỏa nó sẽ thực thi mã trong default

Ví dụ: Phương thức getDay() trả về ngày trong tuần dưới dạng một số nằm giữa 0 và 6. (Chủ nhật = 0, Thứ hai = 1, Thứ ba = 2, …)

<p id="demo"></p>

<script>
let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerHTML = "Hôm nay là " + day;
</script>

2. Câu lệnh break trong JavaScript

Khi trình thông dịch (interpreter) mã JavaScript gặp từ khóa break, nó thoát ra khỏi khối switch . Điều này sẽ làm ngừng thực thi thêm các mã và các case bên trong khối. Khi tìm thấy một case (trường hợp) phù hợp, và công việc được thực hiện, đó là lúc cần dừng lại. Sẽ không cần kiểm tra thêm các case khác nữa. Từ đây, lệnh break giúp ta ngăn chặn việc thực thi các đoạn mã của những trường hợp nằm bên dưới trường hợp trùng khớp. Và ta có thể thấy được tầm quan trọng của nó.

Ví dụ:

Không có break

<script>
    var season = "ha";
    switch (season){
        case "xuan":
            document.write("Mùa Xuân");
        case "ha":
            document.write("Mùa Hạ");
        case "thu":
            document.write("Mùa Thu");
        case "dong":
            document.write("Mùa Đông");
    }
</script>

break

<script>
    var season = "ha";
    switch (season){
        case "xuan":
            document.write("Mùa Xuân");
            break;
        case "ha":
            document.write("Mùa Hạ");
            break;
        case "thu":
            document.write("Mùa Thu");
            break;
        case "dong":
            document.write("Mùa Đông");
            break;
    }
</script>

3. Câu lệnh default trong JavaScript

Từ khóa default chỉ định mã sẽ thực thi nếu kết quả của biểu thức (expression) không phù hợp với case (trường hợp) nào.

Ví dụ:

Phương thức getDay() trả về ngày trong tuần dưới dạng một con số nằm giữa 0 và 6. Nếu hôm nay không là Thứ bảy (6) và cũng không là Chủ nhật (0), sẽ một thông báo mặc định:

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 6:
    text = "Hôm nay là Saturday";
    break;
  case 0:
    text = "Hôm nay là Sunday";
    break;
  default:
    text = "Trông chờ tới cuối tuần";
}
document.getElementById("demo").innerHTML = text;
</script>

Đôi khi, trong một khối switch, bạn sẽ muốn các trường hợp khác nhau sử dụng một khối mã giống nhau, hoặc không còn lựa chọn nào ngoài một mặc định chung. Các trường hợp (case) có thể chia sẻ cùng một khối mã, và trường hợp mặc định (default) không phải là trường hợp cuối cùng trong một khối switch.

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  default:
    text = "Trông chờ tới cuối tuần";
    break;
  case 6:
    text = "Hôm nay là Saturday";
    break;
  case 0:
    text = "Hôm nay là Sunday";
}
document.getElementById("demo").innerHTML = text;
</script>

Nếu mặc định không phải là các trường hợp cuối cũng trong khối switch , hãy nhớ kết thúc nó với một từ khóa break .

4. Nhóm các case lại với nhau

Nếu trong danh sách các trường hợp của lệnh switch case có những trường hợp mà bạn muốn cùng thực thi một đoạn mã thì ta hãy nhóm các trường hợp đó lại với nhau.

Ví dụ:

<script>

        var month = 5;

        switch (month){
            case 1:
            case 2:
            case 3:
                document.write("Mùa Xuân");
                break;
            case 4:
            case 5:
            case 6:
                document.write("Mùa Hạ");
                break;
            case 7:
            case 8:
            case 9:
                document.write("Mùa Thu");
                break;
            case 10:
            case 11:
            case 12:
                document.write("Mùa Đông");
                break;
        }

    </script>

5. Lệnh switch case lồng nhau

Thật ra, lệnh switch case lồng nhau chỉ là cách sử dụng nâng cao của lệnh switch case thông thường. Nó giúp ta mở rộng phạm vi xét duyệt các trường hợp. Từ đó, chọn được đoạn mã thích hợp nhất để thực thi.

Ví dụ:

<script>

    var season = "Thu";

    var month = 8;

    switch(season){
        case "Xuân":
            switch(month){
                case 1:
                    document.write("Mùa Xuân - Tháng 1");
                    break;
                case 2:
                    document.write("Mùa Xuân - Tháng 2");
                    break;
                case 3:
                    document.write("Mùa Xuân - Tháng 3");
                    break;
                default:
                    document.write("Mùa " + season + " không có tháng" + month);
                    break;
            }
            break;
        case "Hạ":
            switch(month){
                case 4:
                    document.write("Mùa Hạ - Tháng 4");
                    break;
                case 5:
                    document.write("Mùa Hạ - Tháng 5");
                    break;
                case 6:
                    document.write("Mùa Hạ - Tháng 6");
                    break;
                default:
                    document.write("Mùa " + season + " không có tháng" + month);
                    break;
            }
            break;
        case "Thu":
            switch(month){
                case 7:
                    document.write("Mùa Thu - Tháng 7");
                    break;
                case 8:
                    document.write("Mùa Thu - Tháng 8");
                    break;
                case 9:
                    document.write("Mùa Thu - Tháng 9");
                    break;
                default:
                    document.write("Mùa " + season + " không có tháng" + month);
                    break;
            }
            break;
        case "Đông":
            switch(month){
                case 10:
                    document.write("Mùa Đông - Tháng 10");
                    break;
                case 11:
                    document.write("Mùa Đông - Tháng 11");
                    break;
                case 12:
                    document.write("Mùa Đông - Tháng 12");
                    break;
                default:
                    document.write("Mùa " + season + " không có tháng" + month);
                    break;
            }
            break;    
        default:
            document.write("KHÔNG XÁC ĐỊNH");
            break;
    }
    
</script>

6. Switch case và if else trong JavaScript

Có thể sẽ có nhiều bạn thắc mắc. Nếu switch caseif else trong JavaScript tương tự nhau thì sao không sử dụng if else luôn? Sử dụng switch case làm gì. Trong trường hợp nào thì nên sử dụng switch case trong JavaScript.

Theo mình thì switch case được sử dụng khi phải xử lý nhiều trường hợp. Và khi được thực hiện với toán tử so sánh ===

Ví dụ:

Với if else

var day = new Date().getDay(); // Lấy ngày hiện tại
if (day === 0) {
    text = 'Chủ nhật';
} else if (day === 1) {
    text = "Thứ 2";
} else if (day === 2) {
    text = "Thứ 3";
} else if (day === 3) {
    text = "Thứ 4";
} else if (day === 4) {
    text = "Thứ 5";
} else if (day === 5) {
    text = "Thứ 6";
} else {
    text = "Thứ 7";
}
document.write(text);

Cũng tương tự nhưng nếu sử dụng switch case thì sẽ gọn hơn rất nhiều

var day = new Date().getDay(); // Lấy ngày hiện tại
switch(day) {
    case 0:
        text = 'Chủ nhật';
        break;
    case 1:
        text = "Thứ 2";
        break;
    case 2:
        text = "Thứ 3";
        break;
    case 3:
        text = "Thứ 4";
        break;
    case 4:
        text = "Thứ 5";
        break;
    case 5:
        text = "Thứ 6";
        break;
    default:
        text = "Thứ 7";
}
document.write(text);