Lệnh switch case trong JavaScript được sử dụng để rẻ nhánh chương trình nhằm thực hiện các hành động khách nhau dựa trên các điều kiện khác nhau. Hầu hết các ngôn ngữ lập trình đều có lệnh này, nếu bạn đã học qua một ngôn ngữ lập trình rồi thì không quá khó hiểu khi tìm hiểu chúng trong JavaScript.
Contents
Lệnh Switch case trong JavaScript
Như mình đã nói ở đầu bài viết lệnh switch case dùng để thực hiện các hành động khác nhau dựa trên các điều kiện khác nhau. Cú pháp:
|
1
2
3
4
5
6
7
8
9
10
|
switch(variable) {
case x:
// code here
break;
case y:
// code here
break;
default:
// code here
}
|
Trong đó:
- variable: là một biến dùng để kiểm tra điều kiện
- case x, case y: JavaScript sẽ so sánh biến variable với từng trường hợp, variable == x, variable == y. Nếu có trường hợp với điều kiện trùng khớp thì đoạn code trong trường hợp đó sẽ được chạy.
- break: dùng để dừng kiểm tra các trường hợp bên dưới khi đã có 1 trường hợp đúng.
- default: Nếu không có trường hợp nào ở phía trên thì sẽ thực hiện đoạn code bên trong default.
Ví dụ:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// Lấy ngày hiện tại
var day = new Date().getDay();
switch(day) {
case 6:
text = “Today is Saturday”;
break;
case 0:
text = “Today is Sunday”;
break;
default:
text = “Looking forward to the Weekend”;
}
document.write(text);
|
Trong ví dụ trên các bạn có thể hiểu đầu tiên tôi đã lấy ngày hiện tại (dạng số) và gán nó vào biến day. Sau đó tôi sử dụng lệnh switch case trong JavaScript để lấy ngày hiện tại bằng chữ. Nếu day == 6 thì là Saturday, day == 0 là Sunday.
Lệnh switch case cũng giống với if else đều dùng để rẻ nhánh điều kiện, nhưng đối với lệnh switch case thì nó chỉ có thể sử dụng toán tử ===.
Đối với default case bạn không cần nhất thiết phải đặt nó ở cuối cùng. Nó có thể được đặt ở bất cứ đâu. Lưu ý nếu không đặt cuối cùng hãy nhớ thêm break:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// Lấy ngày hiện tại
var day = new Date().getDay();
switch(day) {
default:
text = “Looking forward to the Weekend”;
break;
case 6:
text = “Today is Saturday”;
break;
case 0:
text = “Today is Sunday”;
}
document.write(text);
|
Do lệnh switch case chỉ có thể sử dụng toán tử === nên nếu kiểu dữ liệu của biến và case không giống nhau thì chúng cũng sẽ trả về false. Ví dụ:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var day = “0”;
switch(day) {
case 6:
text = “Today is Saturday”;
break;
case 0:
text = “Today is Sunday”;
break;
default:
text = “Looking forward to the Weekend”;
}
document.write(text); // Looking forward to the Weekend
|
Toán tử === sẽ so sánh cả kiểu dữ liệu và giá trị. Như các bạn có thể thấy biến day là một chuỗi có giá trị 0, nên khi so sánh với case 0 là kiểu int sẽ trả về false và default case sẽ được thực thi.
Xem thêm: Toán tử trong JavaScript
Lệnh break trong JavaScript
Như mình đã giải thích ở phía trên, break dùng để thoát khỏi lệnh switch nên nếu bạn không chỉ định break thì nó sẽ chạy tiếp case tiếp theo. Ví dụ:
|
1
2
3
4
5
6
7
8
9
10
11
|
var day = 0;
switch(day) {
case 6:
text = “Today is Saturday”;
break;
case 0:
text = “Today is Sunday”;
default:
text = “Looking forward to the Weekend”;
}
document.write(text);
|
Ở ví dụ trên kết quả là Looking forward to the Weekend. Mặc dù case 0 đúng nhưng không có break nên nó sẽ tiếp tục chạy xuống case tiếp theo.
Lệnh switch case lồng nhau
Lệnh switch case trong JavaScript lồng nhau dùng để rẻ nhánh nhiều trường hợp hơn cho các trường hợp phức tạp. Ví dụ:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var day = new Date().getDay(); // Lấy ngày hiện tại
var month = new Date().getMonth(); // Lấy tháng hiện tại
switch(day) {
case 0:
switch (month) {
case 1:
text = ‘Ngày 6 tháng 1’;
break;
case 2:
text = ‘Ngày 6 tháng 2’;
break;
default:
text = ‘Ngày 6’;
break;
}
break;
case 6:
text = “Today is Saturday”;
break;
default:
text = “Looking forward to the Weekend”;
}
document.write(text);
|
Nhóm các case dùng chung cùng một đoạn code
Nếu bạn muốn sử dụng cùng một đoạn code cho nhiều case khác nhau. Switch case trong JavaScript cũng hỗ trợ bạn làm điều đó bằng cú pháp như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// Lấy ngày hiện tại
var day = new Date().getDay();
switch(day) {
case 2:
case 3:
case 4:
case 5:
case 6:
text = “Phải đi học”;
break;
case 0:
case 7:
text = “Được nghỉ”;
break;
default:
text = “Not found”;
}
document.write(text);
|
Switch case và if else trong JavaScript
Có thể sẽ có nhiều bạn thắc mắc, nếu switch case và if else trong JavaScript tương tự nhau thì sao không sử dụng if else luôn mà phải 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ụ khi sử dụng if else:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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);
|
Xem thêm: Lệnh if else trong JavaScript
Cũng tương tự nhưng nếu sử dụng switch case thì sẽ gọn hơn rất nhiều:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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);
|
Kết luận
Trong bài viết này các bạn cần lưu ý lệnh switch case trong JavaScript sử dụng toán tử === nên nếu các bạn so sánh không đúng kiểu dữ liệu thì sẽ không so sánh đúng được đâu nhé. Nếu có bất kỳ thắc mắc gì về bài viết, vui lòng để lại bình luận bên dưới.
Tham khảo: https://w3school.com/