[#JS05] Javascript – Cấu trúc SWITCH CASE trong Javascript
Bài học thứ 5 về Cấu trúc SWITCH CASE trong series học Javascript. Đây là series về Web Front End Cơ Bản của Trung Tâm Đào Tạo Lập Trình Viên JANETO.
Tiếp theo chuỗi bài học về Javascript, hôm nay chúng ta sẽ cùng tìm hiểu về Cấu trúc SWITCH CASE trong Javascript. Ở bài học trước, chúng ta đã được học về if … else … if để thực hiện một nhánh nhiều lựa chọn. Tuy nhiên, nó luôn luôn không phải là một giải pháp tốt nhất, đặc biệt là khi tất cả các nhánh phụ thuộc vào giá trị của một biến đơn. Và ở video bài học này chúng ta sẽ cùng nhau tìm hiểu về một lệnh hiệu quả hơn cho trường hợp trên. Đó chính là cấu trúc SWITCH – CASE.
Sơ đồ thực hiện
Vậy trước tiên, chúng ta cùng nhau tìm hiểu xem switch case hoạt động như thế nào nhé.
Đây chính là sơ đồ giải thích sự hoạt động của SWITCH – CASE, như các bạn có thể nhìn thấy, lệnh switch case dùng để xác định một danh sách các trường hợp và trong mỗi trường hợp sẽ có một đoạn mã, khi giá trị của bạn trùng khớp với trường hợp nào thì đoạn mã của trường hợp đó sẽ được thực thi.
Cú pháp
Nghe lý thuyết quả là phức tạp phải không các bạn, mình sẽ tóm gọn lại bằng một ví dụ đơn giản như sau, một ngày nọ các bạn đi uống nước, lúc gọi nước các bạn đọc tên món và yêu cầu biết giá tiền món đó.
Vậy khi áp dụng switch case vào, ta sẽ có, giá trị truyền vào switch là tên món nước bất kỳ, mỗi case hay trường hợp là tên các món nước trong quán, và in giá tiền chính là đoạn mã trong mỗi trường hợp.
Chúng ta cùng xem đoạn code này nha:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var ten = 'sting'; switch (ten) { case 'aquafina': console.log("5.000"); break; case 'sting': console.log("10.000"); break; case 'pepsi': console.log("8.000"); break; case 'cocacola': console.log("9.000"); break; default: console.log("quán không có món này"); break; } |
Kết quả:
Như các bạn có thể nhìn thấy, ở đoạn switch chúng ta sẽ truyền tên món nước vào, đây là món nước do các bạn chọn, phía dưới nó là các case – trường hợp, như món ‘sting’ sẽ có giá 10.000 hay món pepsi có giá là 8.000. Ngoài case – trường hợp ra, các bạn có thể thấy ở dưới cùng là đoạn code default – mặc định, trường hợp này sẽ được thực thi khi tất cả các trường hợp trên không đúng. Ví dụ như các bạn gọi một món mà quán này không có, thì nó sẽ đi vào trường hợp default – mặc định.
Và như ví dụ mà mình thực hiện, thì tên món nước mình truyền vào là ‘sting’, và đoạn mã đã trả về cho mình đúng giá tiền của nó. Rất dễ phải không các bạn ;).
Một điều nữa mà mình muốn các bạn cần để ý, đó chính là kết thúc mỗi case luôn luôn có đoạn code break; đây là một điều rất quan trọng. Và tại sao nó lại quan trọng, mình sẽ ví dụ bài toán trên nếu không có break;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var ten = 'sting'; switch (ten) { case 'aquafina': console.log("5.000"); case 'sting': console.log("10.000"); case 'pepsi': console.log("8.000"); case 'cocacola': console.log("9.000"); default: console.log("quán không có món này"); } |
Kết quả:
Sau khi bỏ break ở các case, chúng ta có thể thấy kết quả không còn đúng nữa, tất cả các lệnh thuộc những trường hợp nằm dưới trường hợp đúng đều được chạy. Điều này có nghĩa là break có tác dụng chặn cho đoạn mã chúng ta chỉ chạy với trường hợp đúng, những trường hợp không đúng sẽ không bao giờ được chạy.
Chúng ta hãy cùng làm thêm một ví dụ nữa nhé. Bài toán đặt ra là xếp loại bài kiểm tra theo thang điểm 5, số điểm của các bạn chỉ có thể là các số tự nhiên từ 0 – 5, không có số thập phân. Ví dụ số điểm bạn có là 2 thì kết quả cần in ra là “Bài làm trung bình”
Chúng ta sẽ code bài toán này như sau:
|
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 diem = 2; switch (diem) { case 0: console.log("Bạn không có điểm nào"); break; case 1: console.log("Bài làm kém"); break; case 2: console.log("Bài làm trung bình"); break; case 3: console.log("Bài làm khá"); break; case 4: console.log("Bài làm tốt"); break; case 5: console.log("Bài làm xuất sắc"); break; default: console.log("Điểm không hợp lệ"); break; } |
Kết quả:
Sau khi mình truyền vào số điểm là 2, thì đoạn mã trả về là “bài làm trung bình”. Các bạn có thể test cho các số điểm khác.
Để biết rõ hơn về cú pháp cấu trúc SWITCH CASE và ví dụ cụ thể những trường hợp nào sẽ áp dụng. Chúng ta hãy tập trung và cùng xem video bên dưới các bạn nhé!
Cảm ơn các bạn đã theo dõi video bài học thứ 5 về Cấu trúc SWITCH CASE trong Javascript.
Hy vọng qua bài học này, các bạn sẽ hiểu được thế nào là SWITCH – CASE, khi nào thì chúng ta cần dùng tới nó và áp dụng nó một cách phù hợp vào dự án của các bạn, chúc các bạn thành công. Nếu có bất kỳ câu hỏi nào trong quá trình học, hãy comment vào bên dưới bài viết, mình sẽ giải đáp thắc mắc của các bạn trong thời gian sớm nhất có thể. Hẹn gặp lại các bạn ở bài học tiếp theo trong series học Javascript.
Phần trước: [#JS04] Javascript – Câu lệnh điều kiện If … else
Chúng tôi luôn mong muốn mang lại những kiến thức bổ ích cho các bạn yêu thích lập trình. Các bạn hãy đón xem và ủng hộ bằng cách LIKE hoặc SHARE Fanpage của chúng tôi để có thể cập nhật thông tin mới nhất từ chúng tôi. Và đừng quên chia sẻ bài học này tới bạn bè của mình để cùng nhau chinh phục Javascript bạn nhé!
Lê Tuấn Anh
Đặc biệt, hiện tại Trung Tâm đang tuyển sinh cho Khóa học Web Front-End (HTML, CSS và Javascript) khai giảng trong tháng 12. Các bạn có thể xem chi tiết lịch khai giảng và đăng ký học tại đây: ►►► LỊCH KHAI GIẢNG THÁNG 12
TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN JANETO
0933067997 – 0933267337
facebook.com/laptrinhvienio
YouTube/laptrinhvienio
tuyensinh@laptrinhvien.io
Tầng 2 Tòa nhà The Morning Star – 57 Quốc Lộ 13, Phường 26, Quận Bình Thạnh, Tp. Hồ Chí Minh.
0
Bình luận
