, October 26, 2021

0 kết quả được tìm thấy

Các câu trúc lệnh điều khiển trong Javascript


  •   4 min reads
Các câu trúc lệnh điều khiển trong Javascript

Bất  kỳ một ngôn ngữ lập trình nào cũng có các câu lệnh được xây dựng sẵn dùng để thực thi các dòng code theo các yêu cầu được chỉ định, JavaScript cũng không ngoại lệ. Không dài dòng nữa, chúng ta cùng nhau tìm hiểu cấu trúc lệnh điều khiển hay if...elseswitch...case trong JavaScript sẽ như thế nào nè, bắt đầu thôi 😉.

I. Câu lệnh if...else

1. Câu lệnh if

Đối với câu lệnh if...else không nhất thiết phải có else khi có if nhé 😄, mà ta có thể sử dụng if độc lập nè.

if(condition){
	//code ở đây
}

Condition hay điều kiện ở đây là một đoạn code  hay một mệnh đề mà kết quả của nó trả về true/false . Ở đây, nếu condition mà trả về true thì sẽ thực thi đoạn code bên trong block code của if nè 😉.

let a = 5, b = 10;

if(a < b) {
	console.log('a < b');
}

2. Câu lệnh else

Với else thì hơi khác if một chút là muốn có else thì phải có if trước đó, tức là khi điều kiện của mệnh đề if trước nó không đúng thì câu lệnh else mới được thực thi nè 😁, cấu trúc sẽ như sau.

if(condition) {
	// condition = true thì code ở đây sẽ chạy
} else {
	// condition = false thì code ở đây sẽ chạy
}

Ví dụ:

let a = 5, b = 10;

if(a > b) {
	console.log('a > b');
} else {
	console.log('a <= b');
}
// --> result: a <= b

3. Kết hợp if...else lồng nhau

Với ví dụ trên thì kết quả cuối cùng vẫn không được rõ cho lắm đúng không nè 😀, ta vẫn chưa biết được khi nào a thực sự bằng b hay khi nào a thực sự nhỏ hơn b. Đừng quá lo lắng, ta có thể lồng câu lệnh if...else  nhiều lần để có thể 'cover' hết được các trường hợp có thể xảy ra nè 😊😉.

Để cover được hết các trường hợp của ví dụ trên, ta làm như sau:

let a = 5, b = 10;

if(a > b) {
	console.log('a > b');
} else {
    if(a === b) {
		console.log('a = b');
	} else {
        console.log('a < b');
	}
}
// --> result: a < b

Đơn giản phải không nào 😉.

4.If...else rút gọn

Chúng ta còn có thể rút gọn câu lệnh if...else bằng toán tử 3 ngôi mà mình có giới thiệu trong bài trước, cấu trúc như sau:

Điều kiện ? block code 1 : block code 2

Nếu điều kiện đúng thì thực hiện block code 1, ngược lại thì thực hiện block code 2, cùng đi vào ví dụ nhé 😉.

let a = 2;
a % 2 == 0 ? console.log("a là số chẵn") : console.log("a là số lẻ")
//--> result:  a là số chẵn

II. Câu lệnh switch...case

switch...case hay còn được gọi là câu lệnh rẽ nhánh, nó thường được dùng để giải quyết các bài toán có các điều kiện cố định, cấu trúc của nó như sau:

switch(condition) {
    case value 1:
    	//block code
		break;
    case value 2:
    	//block code
		break;
	case value 3:
    	//block code
		break;
    default:
        //block code
        break;
}

Giải thích tý nè 😁:

  • condition: là biến mà ta muốn kiểm tra để rẽ nhánh.
  • value1, value2,...: là các giá trị tại các nhánh điều kiện mà ta muốn kiểm tra.
  • default: là trường hợp mặc định sẽ trả về nếu không thỏa các case bên trên.
  • break: có tác dụng dừng vòng lặp hay câu lệnh kiểm tra điều kiện trong chương trình.

Cùng đi vào ví dụ cho dễ hiểu nè 😁

let a = 5;

switch(a) {
    case 0:
    	console.log("Không");
		break;
    case 1:
    	console.log("Một");
		break;
	case 2:
    	console.log("Hai");
		break;
    case 3:
    	console.log("Ba");
		break;
    case 4:
    	console.log("Bốn");
		break;
    case 5:
    	console.log("Năm");
		break;
    default:
        console.log("Không thỏa mãn");
        break;
}

//--> result: Năm

Đơn giản, dễ hiểu phải không nè 🤣.

III. Tổng kết

Bài viết này mình đã giới thiệu cho các bạn về câu lệnh if...else hoạt động như thế nào, cách tùy biến nó, if...else rút gọn, câu lệnh rẻ nhánh switch...case và cách sử dụng rồi nè. Hy vọng các bạn sẽ hiểu rõ về chúng hơn và có thể áp dụng vào các bài tập hay dự án của các bạn. Bài tiếp theo chúng ta sẽ cùng nhau tìm hiểu Vòng lặp trong JavaScript nhé 😉. Cảm ơn các bạn đã đọc 🤗!

Bài viết cùng seri

Bài viết liên quan

Hướng dẫn clone instagram với React JS và Firebase phần 2.

Trong phần 1 của series này, chúng ta tiến hành setup một project ReactJS bằng câu lệnh create-react-app,đăng ký và tạo app trên firebase để có thể sử dụng và lưu trữ data. Trong phần 2 này, chúng ta sẽ tạo header cho nó và tạo component post để hiển thị bài đăng nhé 😉. Nào bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 2.
Hướng dẫn clone instagram với React JS và Firebase phần 1.

Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 1.
Number, string, array và object trong JavaScript

Chúng ta đã cùng nhau tìm hiểu các kiểu dữ liệu có trong JavaScript ở bài trước, tuy nhiên chúng ta vẫn chưa biết cách thao tác với chúng như thế nào trong JavaScript, nó có hổ trợ các phương thức nào hay không? Vấn đề đó, chúng ta sẽ cùng nhau tìm hiểu trong bài này nhé 😉....

Number, string, array và object trong JavaScript
Tìm hiểu thêm về Window Object trong Javascript

Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần window object rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem window object là loại object như thế nào nhé...

Tìm hiểu thêm về Window Object trong Javascript
Tìm hiểu về "this" trong JavaScript.

Chắc hẵn bạn đã từng nhìn thấy từ this trong một ngôn ngữ lập trình nào trước đó hoặc là trong một vài đoạn code nào đó của JavaScript. Bạn thắc mắc nó có tác dụng gì hoặc là bạn đang mơ hồ về this trong JavaScript. Yên tâm, trong bài này chúng ta sẽ cùng nhau tìm hiểu this có ý nghĩa gì nhé....

Tìm hiểu về "this" trong JavaScript.
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.