IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Switch Statement - Câu lệnh switch JavaScript

JavaScript Switch Statement - Câu lệnh switch JavaScript

by GokiSoft.Com - 15:51 19/05/2020 2,108 Lượt Xem

Các 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 JavaScript


Dùng câu lệnh switch để chọn một trong nhiều khối code để thực thi.

Cú pháp

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}


Đây là cách mà nó hoạt động:

  • Biểu thức(expression) switch được ước tính một lần.
  • Giá trị của biểu thức(expression) được so sánh với các giá trị của mỗi case.
  • Nếu có một giá trị phù hợp, khối code liên quan sẽ được thực thi.
  • Nếu không có một giá trị phù hợp, khối code default được thực thi.

ví dụ

Phương thức getDay() trả về các thứ trong tuần như một số giữa 0 và 6.

(Chủ nhật =0, thứ hai=1, thứ ba =2 ..)

Ví dụ này sử dụng số thứ trong tuần để tính tên của thứ đó:

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";
}
<!DOCTYPE html>
<html>
<body>

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

<script>
var 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 = "Today is " + day;
</script>

</body>
</html>


Kết quả sẽ là:

Monday



Từ khóa break


Khi JavaScript chạm đến từ khóa break , nó sẽ thoát ra khỏi khối switch.

Điều này sẽ dừng viêc thực thi bên trong khối.

Không cần thiết dừng case cuối trong khối switch. Dù sao khối sẽ dừng(kết thúc) ở đó.


Ghi chú: Nếu bạn bỏ qua câu lệnh break, case tiếp theo sẽ được thực thi ngay cả khi điều kiện không đúng với case.



Từ khóa default


Từ khóa default chỉ định code để chạy nếu không có case nào phù hợp:

ví dụ

Phương thức getDay() trả về các thứ trong tuần như một số giữa 0 và 6.

Nếu hôm này không phải thứ bảy(6) hoặc chủ nhật(0), viết một thông điệp default:

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

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

<script>
var text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>


Kết quả sẽ là:

Looking forward to the Weekend


Trường hợp default không cần phải là trường hợp cuối cùng trong một khối switch

ví dụ

switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

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

<script>
var text;
switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>


Tip: Nếu  default không phải là case cuối cùng trong khối switch, hãy nhớ kết thúc default với một break.



Các khối code phổ biến


Đôi khi bạn sẽ muốn các trường hợp switch đều dùng một code giống nhau.

Trong trường hợp này case 4 và case 5 chia sẻ chung một khối code, và 0 và 6 chia sẽ một khối code khác:

ví dụ

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

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

<script>
var text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>



Chi tiết về switch(Switching Details)


Nếu nhiều case phù hợp với giá trị của case cần tìm, case đầu tiên sẽ được lựa chọn.

Nếu không có case nào được tìm thấy, chương trình sẽ tiếp tục dến nhãn default.

Nếu không thấy nhãn default, chương trình sẽ tiếp tục (các)câu lệnh sau switch.



So sánh chặt chẽ


Các switch case sử dụng so sánh chặt chẽ (===).

Các giá trị phải cùng kiểu để phù hợp.

Một so sánh chặt chẽ chỉ có thể đúng nếu các toán hạng đều có chung một kiểu.

Trong ví dụ này sẽ không có kết quả phù hợp cho x:

ví dụ

var x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

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

<script>
var x = "0";

switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>







Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!