Thành thạo câu lệnh Switch trong JavaScript: Cú pháp, Trường hợp sử dụng và Ví dụ thực tế

1 1. Giới thiệu: Switch case là gì?
2 2. Cú pháp cơ bản và vai trò
3 3. Các ví dụ thực tế của câu lệnh switch
4 4. switch vs if — Nên Chọn Cái Nào?
5 5. Mẹo Ngăn Ngừa Lỗi
6 6. Kỹ Thuật Nâng Cao cho switch
7 7. FAQ: Các Câu Hỏi Thường Gặp và Xử Lý Sự Cố
8 8. Mẫu mã và Bài tập thực hành
9 9. Tổng kết và Ứng dụng trong Tương lai

1. Giới thiệu: Switch case là gì?

Trong JavaScript, phân nhánh điều kiện đóng vai trò quan trọng trong việc kiểm soát luồng của chương trình. Trong số các cấu trúc này, câu lệnh switch được sử dụng như một cú pháp xử lý hiệu quả nhiều điều kiện. Một câu lệnh switch hữu ích khi bạn muốn thực thi các quy trình khác nhau dựa trên một giá trị cụ thể. Ví dụ, nó được sử dụng khi hiển thị các thông báo khác nhau tùy thuộc vào ngày trong tuần hoặc chuyển đổi hành động dựa trên đầu vào của người dùng.

Các trường hợp sử dụng của câu lệnh switch

Câu lệnh switch đặc biệt hiệu quả trong các tình huống sau:

Khi bạn muốn xử lý nhiều điều kiện một cách hiệu quả : Thay vì lặp lại các câu lệnh if, việc sử dụng switch giúp đơn giản hóa mã của bạn.
Khi bạn muốn chạy các quy trình khác nhau cho từng điều kiện : Hữu ích để chuyển đổi hành vi dựa trên dữ liệu.
Khi bạn muốn cải thiện khả năng đọc mã : Cấu trúc của nó rõ ràng và giúp tổ chức logic điều kiện.

Đặc điểm chính của switch

Phân nhánh dựa trên giá trị : Câu lệnh switch kiểm tra xem kết quả đánh giá của một biểu thức có khớp với giá trị cụ thể hay không.
Kiểm soát bằng break : Câu lệnh break dừng việc thực thi rơi vào case tiếp theo.
Sử dụng default : Xác định hành vi mặc định khi không có case nào khớp.

Tóm tắt

Câu lệnh switch là một công cụ hữu ích tổ chức phân nhánh điều kiện và cải thiện khả năng đọc trong JavaScript. Trong phần tiếp theo, chúng tôi sẽ giải thích cú pháp cơ bản và cách sử dụng nó với các ví dụ cụ thể.

2. Cú pháp cơ bản và vai trò

Trong JavaScript, câu lệnh switch là một cấu trúc kiểm soát tiện lợi được sử dụng để phân nhánh logic dựa trên các giá trị cụ thể. Phần này giải thích cú pháp cơ bản và vai trò của từng yếu tố một cách chi tiết.

Cú pháp cơ bản

Dưới đây là cấu trúc cơ bản của câu lệnh switch.

switch (式) {
  case 値1:
    // 値1に一致した場合の処理
    break;
  case 値2:
    // 値2に一致した場合の処理
    break;
  default:
    // どの値にも一致しなかった場合の処理
}

Dưới đây là giải thích của từng yếu tố.

Chi tiết các yếu tố cú pháp

switch (expression)

Biểu thức chứa giá trị hoặc biểu thức được tính toán để so sánh.

case value:

Mỗi case chỉ định một giá trị để so sánh với biểu thức.

break;

Câu lệnh break thoát khỏi switch sau khi thực thi case khớp.

default:

Xác định xử lý được thực hiện khi không có case nào khớp.

Ví dụ thực tế

Dưới đây là ví dụ hiển thị thông báo dựa trên ngày trong tuần.

let day = "月曜日";

switch (day) {
  case "月曜日":
    console.log("週の始まりです。頑張りましょう！");
    break;
  case "金曜日":
    console.log("もうすぐ週末です。");
    break;
  default:
    console.log("通常の日です。");
}

Tóm tắt

Câu lệnh switch cung cấp phân nhánh điều kiện đơn giản và dễ đọc. Tiếp theo, chúng tôi sẽ giới thiệu “3. Các ví dụ thực tế của switch” để khám phá cách sử dụng nâng cao hơn.

3. Các ví dụ thực tế của câu lệnh switch

Ở đây, chúng tôi giải thích câu lệnh switch của JavaScript qua các ví dụ cụ thể—từ cơ bản đến nâng cao—để giúp bạn hiểu cách sử dụng nó trong lập trình thực tế.

Phân nhánh điều kiện cơ bản

Ví dụ 1: Hiển thị thông báo dựa trên ngày trong tuần

let day = "水曜日";

switch (day) {
  case "月曜日":
    console.log("今週も頑張りましょう！");
    break;
  case "水曜日":
    console.log("週の半ばです。あと少し！");
    break;
  case "金曜日":
    console.log("週末まであと1日！");
    break;
  default:
    console.log("リラックスできる日です。");
}

Nhóm nhiều case

Ví dụ 2: Phân biệt ngày thường và cuối tuần

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

Kết hợp hàm với switch

Ví dụ 3: Quyền người dùng

function getUserPermission(role) {
  switch (role) {
    case "admin":
      return "すべての権限があります。";
    case "editor":
      return "編集権限があります。";
    case "viewer":
      return "閲覧のみ可能です。";
    default:
      return "権限がありません。";
  }
}

console.log(getUserPermission("editor"));

Tóm tắt

Thông qua các ví dụ thực tế này, bạn giờ đã hiểu rõ hơn cách sử dụng câu lệnh switch. Tiếp theo, chúng ta sẽ đề cập đến “4. switch vs if – Nên Dùng Cái Nào?”

4. switch vs if — Nên Chọn Cái Nào?

Cả switch và if đều có thể thực hiện việc phân nhánh có điều kiện trong JavaScript, nhưng chúng được dùng theo những cách khác nhau. Hiểu được sự khác biệt giữa chúng sẽ giúp bạn chọn lựa phù hợp cho từng tình huống.

Sự Khác Biệt Cơ Bản

Feature	switch	if
Type of condition	Best for comparing specific values	Best for complex expressions or range checks
Readability	Easier to organize many conditions	Simple conditions can be short and clear
Flexibility	Limited to fixed-value comparisons	Allows complex logical comparisons
Performance	Sometimes faster than if in certain situations	Fast and efficient when conditions are few

So Sánh Kèm Ví Dụ

Ví dụ 1: Sử dụng switch

let color = "赤";

switch (color) {
  case "赤":
    console.log("ストップ！");
    break;
  case "黄":
    console.log("注意！");
    break;
  case "青":
    console.log("進んでください！");
    break;
  default:
    console.log("無効な色です。");
}

Ví dụ 2: Sử dụng if

let score = 85;

if (score >= 90) {
  console.log("評価: A");
} else if (score >= 75) {
  console.log("評価: B");
} else if (score >= 50) {
  console.log("評価: C");
} else {
  console.log("評価: F");
}

Tóm tắt

Bằng cách lựa chọn switch hoặc if một cách thích hợp, bạn có thể viết mã hiệu quả hơn. Tiếp theo, chúng ta sẽ thảo luận về “5. Mẹo Ngăn Ngừa Lỗi”.

5. Mẹo Ngăn Ngừa Lỗi

Câu lệnh switch trong JavaScript rất tiện lợi, nhưng việc sử dụng không đúng có thể gây ra lỗi hoặc hành vi không mong muốn. Phần này giải thích các điểm quan trọng để tránh lỗi.

1. Quên `break` Gây Fall‑through

Ví dụ:

let fruit = "リンゴ";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

Kết quả:

リンゴが選ばれました。
バナナが選ばれました。

Giải pháp:

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

2. Đừng Quên `default`

Ví dụ:

let command = "停止";

switch (command) {
  case "開始":
    console.log("システムを起動します。");
    break;
  case "終了":
    console.log("システムを終了します。");
    break;
}

Giải pháp:

default:
  console.log("無効なコマンドです。");

3. Cẩn Thận Với Sự Không Khớp Kiểu Dữ Liệu

Ví dụ:

let value = 1;

switch (value) {
  case "1":
    console.log("文字列の1です。");
    break;
  case 1:
    console.log("数値の1です。");
    break;
  default:
    console.log("一致しません。");
}

Tóm tắt

Bằng cách tuân thủ các mẹo này, bạn có thể ngăn ngừa lỗi và viết mã hiệu quả, dễ bảo trì.

6. Kỹ Thuật Nâng Cao cho switch

Câu lệnh switch trong JavaScript không chỉ dùng cho việc phân nhánh cơ bản mà còn có thể áp dụng cho các triển khai linh hoạt, nâng cao hơn.

1. Nhóm Nhiều Trường Hợp

Ví dụ:

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

2. Câu Lệnh switch Lồng Nhau

Ví dụ:

let menu = "ドリンク";
let subMenu = "コーヒー";

switch (menu) {
  case "フード":
    switch (subMenu) {
      case "ハンバーガー":
        console.log("ハンバーガーが選ばれました。");
        break;
      default:
        console.log("無効なフードメニューです。");
    }
    break;

  case "ドリンク":
    switch (subMenu) {
      case "コーヒー":
        console.log("コーヒーが選ばれました。");
        break;
      default:
        console.log("無効なドリンクメニューです。");
    }
    break;
}

Tóm tắt

Sử dụng các kỹ thuật nâng cao này cho phép bạn xử lý các nhánh phức tạp một cách hiệu quả hơn.

7. FAQ: Các Câu Hỏi Thường Gặp và Xử Lý Sự Cố

Nhiều nhà phát triển gặp phải các vấn đề tương tự khi sử dụng câu lệnh switch của JavaScript. Dưới đây là các câu hỏi thường gặp và giải pháp.

Q1: Điều gì xảy ra nếu bạn quên `break`?

Ví dụ:

let value = 2;

switch (value) {
  case 1:
    console.log("1が選択されました。");
  case 2:
    console.log("2が選択されました。");
  case 3:
    console.log("3が選択されました。");
}

Kết quả:

2が選択されました。
3が選択されました。

Giải pháp:

break;

Q2: Có bắt buộc phải có `default` không?

Ví dụ:

let fruit = "パイナップル";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
}

Giải pháp:

default:
  console.log("不明なフルーツです。");

Q3: Switch có thể so sánh các khoảng giá trị không?

Ví dụ:

let score = 85;

switch (true) {
  case score >= 90:
    console.log("評価: A");
    break;
  case score >= 75:
    console.log("評価: B");
    break;
  default:
    console.log("評価: F");
}

Tổng kết

Sử dụng FAQ này để xử lý lỗi và nâng cao hiểu biết của bạn về câu lệnh switch.

8. Mẫu mã và Bài tập thực hành

Phần này cung cấp mã mẫu và bài tập thực hành sử dụng câu lệnh switch. Hãy thử chúng để tăng cường hiểu biết của bạn.

1. Mã mẫu cơ bản

Ví dụ 1: Xác định mùa dựa trên tháng

let month = 3;

switch (month) {
  case 12:
  case 1:
  case 2:
    console.log("冬です。");
    break;
  case 3:
  case 4:
  case 5:
    console.log("春です。");
    break;
  case 6:
  case 7:
  case 8:
    console.log("夏です。");
    break;
  case 9:
  case 10:
  case 11:
    console.log("秋です。");
    break;
  default:
    console.log("無効な月です。");
}

Ví dụ 2: Quyền người dùng

let role = "editor";

switch (role) {
  case "admin":
    console.log("すべての権限があります。");
    break;
  case "editor":
    console.log("編集権限があります。");
    break;
  case "viewer":
    console.log("閲覧権限のみあります。");
    break;
  default:
    console.log("権限がありません。");
}

2. Bài tập thực hành

Bài toán 1: Phát hiện ngày trong tuần / cuối tuần

Tạo một chương trình xác định một ngày cho trước là ngày trong tuần hay cuối tuần.

Bài toán 2: Tính toán giỏ hàng

Tạo một chương trình tính tổng chi phí dựa trên danh mục sản phẩm và số lượng.

Bài toán 3: Hệ thống menu điện thoại

Tạo một chương trình in ra một tùy chọn dựa trên đầu vào số của người dùng.

Tổng kết

Sử dụng các bài tập thực hành này để củng cố kỹ năng sử dụng câu lệnh switch của bạn.

9. Tổng kết và Ứng dụng trong Tương lai

Bài viết này đã cung cấp một giải thích toàn diện về câu lệnh switch của JavaScript, từ cơ bản đến các kỹ thuật nâng cao. Dưới đây là những điểm chính và các bước tiếp theo để cải thiện hơn nữa.

1. Những điểm quan trọng cần nhớ

Cú pháp và tính năng cơ bản: Sử dụng case, break, và default để viết logic điều kiện rõ ràng.
So sánh với if: switch thích hợp cho các giá trị cố định, trong khi if xử lý các điều kiện phức tạp.
Ngăn ngừa lỗi: Dùng break, kiểm tra kiểu dữ liệu, và default để tránh lỗi.
Kỹ thuật nâng cao: Sử dụng lồng nhau, ánh xạ, và xử lý động để thiết kế linh hoạt.

2. Mẹo Ứng dụng trong Tương lai

1. Tối ưu hoá Logic Điều kiện Phức tạp

Bạn có thể xử lý các điều kiện động bằng cách kết hợp nhiều biểu thức và hàm.

2. Triển khai Xử lý Động với Mapping

Sử dụng đối tượng hoặc Map để quản lý dữ liệu một cách hiệu quả và mở rộng.

const actions = {
  start: () => console.log("システムを起動します。"),
  stop: () => console.log("システムを停止します。"),
  restart: () => console.log("システムを再起動します。"),
};

let command = "restart";
(actions[command] || (() => console.log("無効なコマンドです。")))();

3. Áp dụng vào Hệ thống Quản lý Trạng thái

Bạn có thể dùng switch trong phát triển ứng dụng với các thư viện quản lý trạng thái như Redux hoặc Vuex.

Tổng kết

Câu lệnh switch là một công cụ đơn giản nhưng mạnh mẽ trong logic điều kiện của JavaScript. Bằng cách hiểu cả cơ bản và cách sử dụng nâng cao, bạn có thể cải thiện đáng kể khả năng đọc và bảo trì mã của mình.
Hãy sử dụng bài viết này làm nền tảng cho việc phát triển kỹ năng tiếp theo.

Prev

2025-11-23
Thành thạo Mảng JavaScript: Hướng dẫn toàn diện về Tạo, Thao tác, Lọc và Ứng dụng Thực tế
Next
記事がありません

Thành thạo câu lệnh Switch trong JavaScript: Cú pháp, Trường hợp sử dụng và Ví dụ thực tế

1. Giới thiệu: Switch case là gì?

Các trường hợp sử dụng của câu lệnh switch

Đặc điểm chính của switch

Tóm tắt

2. Cú pháp cơ bản và vai trò

Cú pháp cơ bản

Chi tiết các yếu tố cú pháp

Ví dụ thực tế

Tóm tắt

3. Các ví dụ thực tế của câu lệnh switch

Phân nhánh điều kiện cơ bản

Nhóm nhiều case

Kết hợp hàm với switch

Tóm tắt

4. switch vs if — Nên Chọn Cái Nào?

Sự Khác Biệt Cơ Bản

So Sánh Kèm Ví Dụ

Tóm tắt

5. Mẹo Ngăn Ngừa Lỗi

1. Quên break Gây Fall‑through

2. Đừng Quên default

3. Cẩn Thận Với Sự Không Khớp Kiểu Dữ Liệu

Tóm tắt

6. Kỹ Thuật Nâng Cao cho switch

1. Nhóm Nhiều Trường Hợp

2. Câu Lệnh switch Lồng Nhau

Tóm tắt

7. FAQ: Các Câu Hỏi Thường Gặp và Xử Lý Sự Cố

Q1: Điều gì xảy ra nếu bạn quên break?

Q2: Có bắt buộc phải có default không?

Q3: Switch có thể so sánh các khoảng giá trị không?

Tổng kết

8. Mẫu mã và Bài tập thực hành

1. Mã mẫu cơ bản

Ví dụ 1: Xác định mùa dựa trên tháng

Ví dụ 2: Quyền người dùng

2. Bài tập thực hành

Bài toán 1: Phát hiện ngày trong tuần / cuối tuần

Bài toán 2: Tính toán giỏ hàng

Bài toán 3: Hệ thống menu điện thoại

Tổng kết

9. Tổng kết và Ứng dụng trong Tương lai

1. Những điểm quan trọng cần nhớ

2. Mẹo Ứng dụng trong Tương lai

1. Tối ưu hoá Logic Điều kiện Phức tạp

2. Triển khai Xử lý Động với Mapping

3. Áp dụng vào Hệ thống Quản lý Trạng thái

Tổng kết

Thành thạo Mảng JavaScript: Hướng dẫn toàn diện về Tạo, Thao tác, Lọc và Ứng dụng Thực tế

1. Quên `break` Gây Fall‑through

2. Đừng Quên `default`

Q1: Điều gì xảy ra nếu bạn quên `break`?

Q2: Có bắt buộc phải có `default` không?