By GokiSoft.Com| 15:51 19/05/2020|

Tài Liệu Javascript

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

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>

Tags:

Bình luận đang bị khoá