Câu lệnh switch được sử 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âu lệnh Switch
Sử dụng câu lệnh switch để chọn một trong nhiều khối lệnh sẽ được thực hiện.
Cú pháp:
switch(biểu thức) {
case x:
// khối lệnh x;
break;
case y:
// khối lệnh y;
break;
default:
// khối lênh
}Hoạt động của lệnh switch
- Biểu thức được đánh giá một lần.
- Giá trị của biểu thức sẽ được so sánh với giá trị của từng trường hợp.
- Nếu có sự trùng khớp với một trường hợp nào đó, khối lệnh liên quan sẽ được thực thi.
- Nếu tất cả các trường hợp không trùng khớp, khối lệnh default sẽ được thực thi.
Hãy thử ví dụ sau: Ví dụ này sử dụng số ngày trong tuần để hiển thị tên ngày trong tuần
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Chủ Nhật";
break;
case 1:
day = "Thứ Hai";
break;
case 2:
day = "Thứ Ba";
break;
case 3:
day = "Thứ Tư";
break;
case 4:
day = "Thứ Năm";
break;
case 5:
day = "Thứ Sáu";
break;
case 6:
day = "Thư Bảy";
}
document.getElementById("demo").innerHTML = "Hôm nay là " + day;
</script>
</body>
</html>Phương thức getDay() trả về ngày trong tuần dưới dạng một số từ 0 đến 6.
(Chủ nhật = 0, Thứ hai = 1, Thứ ba = 2.)
Câu lệnh break
Khi JavaScript gặp từ khóa break, nó sẽ thoát ra khỏi lệnh switch. Điều này sẽ dừng việc thực thi các câu lệnh bên trọng câu lệnh switch.
Không cần thiết phải sử dụng từ khóa break trong trường hợp cuối cùng của lệnh switch, vì câu lệnh sẽ kết thúc ngay ở đó.
Lưu ý: Nếu bạn bỏ qua câu lệnh break, trường hợp tiếp theo sẽ được thực hiện ngay cả khi giá trị biểu thức không khớp với trường hợp đó.
Từ khóa default
Từ khóa default dùng để chỉ định các câu lệnh sẽ được thực hiện trong trường hợp không có giá trị nào trùng khớp với giá trị của biểu thức trong câu lệnh switch
Hãy thử ví dụ sau:
Phương thức getDay() trả về ngày trong tuần dưới dạng một số từ 0 đến 6.
Nếu hôm nay không phải là Thứ Bảy (6) hay Chủ Nhật (0), thì hiển thị ra thông báo “Chờ đợi đến cuối tuần”.
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let text;
switch (new Date().getDay()) {
case 6:
text = "Hôm nay là thứ Bảy";
break;
case 0:
text = "Hôm nay là chủ Nhật";
break;
default:
text = "Chờ đợi đến cuối tuần";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Trường hợp default không phải là trường hợp cuối cùng trong lệnh switch
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let text;
switch (new Date().getDay()) {
default:
text = "Chờ đợi đến cuối tuần";
break;
case 6:
text = "Hôm nay là thứ Bảy";
break;
case 0:
text = "Hôm nay là chủ Nhật";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Nếu default không phải là trường hợp cuối cùng trong lệnh switch thì hãy nhớ kết thúc trường hợp mặc định bằng từ khóa break
Khối lệnh thực hiện chung
Đôi khi bạn sẽ muốn các trường hợp khác nhau trong câu lệnh switch sử dụng chung một khối lệnh thực hiện các nhiệm vụ. Trong ví dụ này, trường hợp 4 và 5 chia sẻ cùng một khối lệnh và 0 và 6 chia sẻ một khối lệnh khác:
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let text;
switch (new Date().getDay()) {
case 4:
case 5:
text = "Sẽ nhanh đến cuối tuần thôi";
break;
case 0:
case 6:
text = "Hôm nay là cuối tuần";
break;
default:
text = "Chờ đợi đến cuối tuần";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Lưu ý:
- Nếu nhiều trường hợp khớp với một giá trị trường hợp, thì trường hợp đầu tiên được chọn.
- Nếu không tìm thấy trường hợp phù hợp, chương trình sẽ tiếp tục đến nhãn default.
- Nếu không tìm thấy nhãn default, chương trình sẽ tiếp tục với các câu lệnh phía sau lệnh switch.
Bài này giới thiệu ngắn gọn về câu lệnh switch nhưng tương đối đầy đủ, chúc bạn sẽ có những trải nghiệm thú vị cùng với switch