JavaScript

Cấu trúc điều kiện trong JavaScript

Posted on by Dục Đoàn Trình
Rate this post

Một tập lệnh sẽ chứa nhiều dòng code. Từng dòng code được thực thi lần lượt từ trên xuống dưới. Đôi khi điều đó xảy ra là chúng ta muốn một dòng code chỉ được thực thi trong một số điều kiện nhất định. Trong những trường hợp như vậy, chúng ta nên sử dụng các cấu trúc có điều kiện. Các cấu trúc này về cơ bản là các câu lệnh có chứa một điều kiện. Một điều kiện sẽ là một câu lệnh code khi được thực thi sẽ codeng lại kết quả là true hoặc false.

Một câu lệnh điều kiện có thể chứa các toán tử quan hệ và logic. Có nhiều loại cấu trúc điều kiện khác nhau có các tình huống lý tưởng code chúng phù hợp nhất.

Hướng dẫn khác:

  1. String trong JavaScript
  2. Operator trong JavaScript
  3. Giới thiệu về Array trong JavaScript
  4. Function trong JavaScript
  5. Object trong JavaScript
  6. Callbacks trong JavaScript

Giới thiệu về cấu trúc điều kiện

Cấu trúc điều kiện trong JavaScript, như trong nhiều ngôn ngữ lập trình khác, đóng vai trò quan trọng trong việc điều hướng luồng thực thi của chương trình. Cơ bản, cấu trúc điều kiện cho phép chương trình thực hiện các quyết định dựa trên những điều kiện cụ thể, từ đó chọn lựa những đoạn mã cần được thực thi.

Trong JavaScript, cấu trúc điều kiện thường xuất hiện dưới dạng câu lệnh if, else if, else, và switch. Sự lựa chọn giữa các nhánh khác nhau của cấu trúc điều kiện phụ thuộc vào các điều kiện được đánh giá là đúng hay sai. Điều này có thể bao gồm việc kiểm tra sự bằng nhau hoặc so sánh giữa các biến, giá trị trả về từ hàm, hoặc kết quả của các phép toán.

Sự hiện diện của cấu trúc điều kiện làm cho chương trình linh hoạt hơn và có khả năng xử lý nhiều tình huống khác nhau. Ví dụ, trong một ứng dụng web, việc xác định người dùng đã đăng nhập hay chưa có thể được kiểm tra thông qua cấu trúc điều kiện, từ đó quyết định hiển thị nội dung thích hợp.

Ngoài ra, cấu trúc điều kiện còn giúp xử lý các tình huống ngoại lệ hoặc không mong muốn. Điều này quan trọng đối với việc tạo ra các ứng dụng web đáng tin cậy và an toàn, nơi xử lý đầu vào người dùng và phản hồi phù hợp trở thành yếu tố chính.

Như vậy, cấu trúc điều kiện không chỉ là một phần cơ bản của JavaScript mà còn là một yếu tố thiết yếu trong bất kỳ chương trình nào, giúp nó trở nên động và phản ứng linh hoạt với các đầu vào và hoàn cảnh khác nhau.

Cấu trúc if

Lưu ý rằng cú pháp của cấu trúc rất đơn giản. Từ khóa “if” chỉ định rằng nó là phần đầu của cấu trúc “if”. Theo sau từ khóa là câu lệnh điều kiện. Một tập hợp một hoặc nhiều câu lệnh tuân theo điều kiện trong dấu ngoặc nhọn. Nếu điều kiện đánh giá là true, thì các câu lệnh trong dấu ngoặc nhọn được thực thi. Nếu điều kiện đánh giá là false, thì các câu lệnh sẽ bị bỏ qua hoàn toàn.

if(condition)
{
    // nếu condition == true thì thực hiện điều này
}

Đây là một nhánh đơn giản. Có hai con đường. Một, nếu điều kiện đánh giá là true và hai, điều kiện đánh giá là false. Điều gì sẽ xảy ra nếu chúng ta muốn có hai lựa chọn thay thế? Đây là giải pháp.

if(1<2)
{
  alert("1 nhỏ hơn 2");
}

Cấu trúc if … else

if(condition)
{
  //nếu condition là true thì thực hiện.
}
else
{
  //nếu condition là false thì thực hiện.
}

Cấu trúc if..else có thể giúp bạn thực hiện hai nhánh. Chúng ta có thể có một tập hợp các câu lệnh thay thế được thực thi. Các câu lệnh sau if sẽ được thực thi nếu điều kiện cho giá trị true. Các câu lệnh theo sau else sẽ được thực thi nếu điều kiện là false.

if(1<2)
{ 
  alert("true");
}
else
{
  alert("false");
}

Bây giờ, trong ví dụ trên, rõ ràng là 1 trên thực tế nhỏ hơn 2. Do đó, câu lệnh cảnh báo hiện diện sau khi “if” được thực thi. Hãy để chúng tôi thay đổi điều kiện một chút và giữ lại các phần khác của code như vậy.

if(1>2)
{ 
  alert("true");
}
else
{
  alert("false");
}

Bạn có thể thấy từ điều kiện code nó sẽ đánh giá là sai không? Do đó các câu lệnh sau else được thực thi. Điều gì sẽ xảy ra nếu chúng ta muốn ngày càng có nhiều lựa chọn thay thế? Chúng ta có cấu trúc if..else if..else để sắp xếp điều đó.

Xem thêm Cấu trúc điều khiển trong R

Cấu trúc If..else if…else

Có thể có nhiều điều kiện. Cấu trúc được gọi là một bậc thang. Ở đây if được theo sau bởi một điều kiện và một tập hợp các câu lệnh. Sau điều kiện này, một if khác được theo sau bởi một điều kiện khác và một tập hợp các câu lệnh. Sau số lượng câu lệnh else if bắt buộc, đến câu lệnh else và tập hợp các câu lệnh.

if(condition)
{
  //
}
else if(condition)
{
  //
}
:
:
:
else
{
  //
}

Bậc thang là cung cấp kiểm tra nhiều điều kiện. Điều kiện đầu tiên đi kèm với if được thực thi. Nếu nó đánh giá là true, thì các câu lệnh sau if được thực thi. Nếu nó cho kết quả là false, thì điều kiện tiếp theo sẽ được thực hiện và cứ tiếp tục như vậy. Nếu không có điều kiện nào đánh giá là true, thì các câu lệnh sau khác sẽ được thực thi. Còn lại là không bắt buộc.

var x;
if(x>0)
{
  alert("Positive");
}
else if (x==0)
{
  alert("zero");
}
else
{
  alert("negative");
}

Trong ví dụ đoạn code dưới đây, nếu x có giá trị lớn hơn 0, một giá trị sẽ được hiển thị một thông báo cảnh báo, tích cực. Nếu không, x được kiểm tra bằng 0. Nếu x bằng 0 thì một thông báo cảnh báo bằng 0 sẽ hiển thị. Nếu x không phải là 0 thì một âm cảnh báo sẽ được hiển thị.

Switch…case..default

Đây là một trong những cấu trúc có điều kiện có thể nhận một biểu thức và so sánh nó cho bằng nhau với các giá trị khác nhau và thực hiện các câu lệnh đối với từng trường hợp. Nó là một sửa đổi của thang if..else if … Ở đây người ta chỉ có thể kiểm tra sự bằng nhau với các giá trị khác nhau.

Switch(expression)
{
	case value 1:
		//statements
	break;
	:
	:
	Case value n:
		//statements
	break;
	default:
		//statements
}

Những loại thang này là lý tưởng trong việc đưa ra các tùy chọn như menu. Tùy thuộc vào các giá trị của x và y được gán cho các biến, người ta có thể thấy rằng nếu tổng giá trị lên đến 4, thì giá trị chữ hoa đầu tiên khớp với biểu thức được đánh giá. Nếu không, nó được so khớp với 6. Nếu không, câu lệnh trong codec định được thực thi. Trường hợp codec định là không bắt buộc. Câu lệnh break làm cho điều khiển chuyển sang câu lệnh sau khi nấc thang chuyển codech không thành công code các câu lệnh theo sau trường hợp khớp cũng được thực hiện.

var x,y;
//Assign some value to x and y
switch(x + y)
{
case 4:
    alert("trường hợp x+y= 4");
    break;
case 6:
    alert("trường hợp x+y =8");
    break;
default:
	alert("không có trường hợp nào");
}

Người ta có thể sử dụng cùng một tập hợp các câu lệnh cho nhiều trường hợp bằng cách chỉ định các giá trị trường hợp và đưa ra các câu lệnh sau giá trị trường hợp cuối cùng.

var x;
//Assign some value to x
switch(x)
{
  	Case 0:
  	Case 1:
	alert("cả 2 trường hợp 0 và 1 đều chạy");
}

Xem thêm Sử dụng If Statement trong Swift

Do-while trong JavaScript

Câu lệnh vòng lặp do-while tạo ra một vòng lặp thực thi một khối mã cho đến khi một điều kiện kiểm tra đánh giá là sai.

Câu lệnh sau minh họa cú pháp của vòng lặp do-while:

do {
  statement(s);
} while(expression);

Không giống như vòng lặp while, vòng lặp do-while luôn thực thi phần thân ít nhất một lần trước khi nó đánh giá biểu thức.

Vì biểu thức chỉ được đánh giá sau khi phần thân của vòng lặp đã được thực thi, nên vòng lặp do-while được gọi là vòng lặp kiểm tra sau.

Bên trong phần nội dung của vòng lặp, bạn cần thực hiện các thay đổi đối với một số biến để đảm bảo rằng biểu thức đánh giá là false sau các lần lặp. Nếu không, bạn sẽ có một vòng lặp không xác định.

Lưu ý rằng từ ES6 +, dấu chấm phẩy ở cuối (;) theo sau (biểu thức) while là tùy chọn.

JavaScript vòng lặp do while

Lưu đồ sau minh họa câu lệnh lặp do-while:

minh họa câu lệnh lặp do-while

Xem thêm Sử dụng if…else trong Python

Ví dụ về câu lệnh do-while trong JavaScript

Xem ví dụ sau về câu lệnh lặp do-while.

let count = 0;
do {
    count++;
    console.log('count có giá trị:' + count);
} while (count < 10);

Trong ví dụ này, biến đếm được đặt thành 0 và được tăng thêm một trong mỗi lần lặp vòng lặp. Vòng lặp tiếp tục miễn là số đếm nhỏ hơn 10.

Bạn thường sử dụng câu lệnh do-while trong trường hợp phần thân của vòng lặp cần thực thi ít nhất một câu lệnh. Đây là một tính năng quan trọng của vòng lặp do-while.

Ví dụ điển hình nhất của việc sử dụng vòng lặp do-while là nhận đầu vào từ người dùng cho đến khi giá trị được cung cấp được mong đợi.

Hãy sử dụng vòng lặp do-while để phát triển một trò chơi đoán đơn giản. Tập lệnh tạo một số nguyên ngẫu nhiên từ 1 đến 12.

Bạn phải đoán số bằng cách đoán cho đến khi số bạn chọn khớp với số mà kịch bản đã chọn.

Xem Script sau:

// random 1 số từ 1 đến 12
const MIN = 1;
const MAX = 12;

let secretNumber = Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;

let guesses = 0; // sắp xếp
let hint = ''; // lưu trữ hint
let number = 0;
do {
    // nhập user từ khách hàng
    let input = prompt(`nhap so ${MIN} and ${MAX}` + hint);
    // lấy interger
    number = parseInt(input);
    // tăng giá trị số ++
    guesses++;
    // kiểm tra giá trị guesses
    // show ra hind nếu cần thiết
    if (number > secretNumber) {
        hint = ', và nhỏ hơn ' + number;
    } else if (number < secretNumber) {
        hint = ', và lớn hơn ' + number;
    } else if(number == secretNumber) {
        alert("mã pin là" + ${guesses});
    }
} while (number != secretNumber);

Làm thế nào nó hoạt động.

Đầu tiên, tạo một số ngẫu nhiên giữa hàm MIN (bao gồm) và MAX (bao gồm).

Thứ hai, lấy một số nguyên ngẫu nhiên từ người dùng và kiểm tra nó với số bí mật. Nếu số khác với số bí mật, hãy gợi ý cho người dùng, ngược lại, hiển thị thông báo chúc mừng.

Thứ ba, lặp lại bước thứ hai cho đến khi số do người dùng cung cấp khớp với số ngẫu nhiên đã tạo.

Trong hướng dẫn này, bạn đã học cách sử dụng câu lệnh vòng lặp do-while để tạo một vòng lặp sau kiểm tra cho phép phần thân của vòng lặp thực thi ít nhất một và thực thi cho đến khi điều kiện kiểm tra đánh giá là sai.

Xem thêm if trong c++

Toán tử 3 ngôi trong JavaScript

Toán tử ba ngôi, hay còn được gọi là Ternary Operator, là một cấu trúc điều kiện đặc biệt trong JavaScript, cung cấp một cách ngắn gọn để thực hiện các lệnh dựa trên điều kiện. Toán tử này thường được sử dụng như một phương pháp viết gọn cho cấu trúc điều kiện if-else.

1. Cú Pháp và Cách Sử Dụng:

  • Cú pháp của toán tử ba ngôi là condition ? expr1 : expr2.
  • Trong đó, condition là điều kiện cần kiểm tra. Nếu condition là đúng (true), expr1 sẽ được thực hiện; nếu condition là sai (false), expr2 sẽ được thực hiện.
  • Ví dụ:
    javascript let result = (score > 60) ? 'Passed' : 'Failed';
    Trong ví dụ này, nếu score lớn hơn 60, result sẽ nhận giá trị “Passed”; ngược lại, nó sẽ nhận giá trị “Failed”.

2. So Sánh với Cấu Trúc if-else Truyền Thống:

  • Tính Gọn Gàng: Toán tử ba ngôi giúp giảm bớt số dòng mã cần thiết để viết một cấu trúc điều kiện, làm cho mã nguồn trở nên gọn gàng và dễ đọc hơn.
  • Sử Dụng: Trong khi if-else phù hợp cho các khối lệnh phức tạp và nhiều điều kiện, toán tử ba ngôi thích hợp hơn cho các điều kiện đơn giản và gán giá trị.
  • Khả Năng Đọc: Mặc dù toán tử ba ngôi mang lại sự gọn gàng, nhưng nó có thể làm giảm tính dễ đọc nếu sử dụng quá phức tạp hoặc quá nhiều lần trong một dòng.

Toán tử ba ngôi là một công cụ hữu ích và mạnh mẽ trong JavaScript, đặc biệt khi cần một cách ngắn gọn và trực quan để xử lý các điều kiện đơn giản. Tuy nhiên, việc lựa chọn giữa toán tử ba ngôi và cấu trúc if-else cần dựa trên yêu cầu cụ thể của từng tình huống cũng như mục tiêu về tính rõ ràng và dễ bảo trì của mã nguồn.

Một số lỗi thường gắp khi sử dụng điều kiện

Khi làm việc với cấu trúc điều kiện trong JavaScript, có một số lỗi thường gặp mà các lập trình viên, đặc biệt là những người mới học, có thể gặp phải. Dưới đây là phân tích về những lỗi này cùng với một số mẹo và thực hành tốt nhất để tránh phạm phải.

1. Sử Dụng Sai Toán Tử So Sánh:

  • Lỗi: Việc nhầm lẫn giữa == (so sánh bằng) và === (so sánh tuyệt đối bằng) có thể dẫn đến kết quả không mong muốn.
  • Cách Khắc Phục: Sử dụng === để so sánh cả giá trị lẫn kiểu dữ liệu, đảm bảo tính chính xác hơn trong điều kiện.

2. Điều Kiện Mơ Hồ hoặc Sai:

  • Lỗi: Điều kiện không rõ ràng hoặc sai có thể không thực hiện chính xác ý định của lập trình viên.
  • Cách Khắc Phục: Kiểm tra kỹ lưỡng điều kiện và thử nghiệm với các trường hợp khác nhau để đảm bảo chúng hoạt động đúng.

3. Quên Các Nhánh Điều Kiện:

  • Lỗi: Bỏ sót else hoặc else if có thể dẫn đến việc không xử lý tất cả các trường hợp có thể.
  • Cách Khắc Phục: Luôn cân nhắc tất cả các khả năng và đảm bảo xử lý mọi trường hợp trong cấu trúc điều kiện.

4. Lỗi Logic Trong Điều Kiện:

  • Lỗi: Các điều kiện logic phức tạp có thể chứa lỗi, làm cho chương trình không thực hiện đúng.
  • Cách Khắc Phục: Tách các điều kiện phức tạp thành các phần nhỏ hơn, dễ quản lý và kiểm tra.

5. Dùng Sai Cấu Trúc Điều Kiện:

  • Lỗi: Chọn sai cấu trúc điều kiện (ví dụ, dùng if-else thay vì switch trong một số trường hợp cụ thể) có thể làm tăng độ phức tạp không cần thiết.
  • Cách Khắc Phục: Hiểu rõ mục đích và tính chất của từng cấu trúc điều kiện và chọn lựa phù hợp.

6. Không Kiểm Tra Điều Kiện Rõ Ràng:

  • Lỗi: Không kiểm tra rõ ràng điều kiện (như kiểm tra null hoặc undefined) có thể dẫn đến lỗi.
  • Cách Khắc Phục: Sử dụng các điều kiện kiểm tra cụ thể và rõ ràng để tránh lỗi không đáng có.

Bằng cách tuân theo các mẹo và thực hành tốt nhất này, bạn có thể giảm thiểu rủi ro phạm phải các lỗi thông thường trong cấu trúc điều kiện và tạo ra mã JavaScript chắc chắn và đáng tin cậy hơn.

Ví dụ về ứng dụng cấu trúc điều kiện trong JavaScript

Dưới đây là một số ví dụ về ứng dụng của cấu trúc điều kiện trong JavaScript:

  1. Ví dụ về câu lệnh if-else:
let age = 18;

if (age >= 18) {
  console.log("Bạn đã đủ tuổi để lái xe.");
} else {
  console.log("Bạn chưa đủ tuổi để lái xe.");
}
  1. Ví dụ về câu lệnh switch-case:
let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "Thứ Hai";
    break;
  case 2:
    dayName = "Thứ Ba";
    break;
  case 3:
    dayName = "Thứ Tư";
    break;
  case 4:
    dayName = "Thứ Năm";
    break;
  case 5:
    dayName = "Thứ Sáu";
    break;
  default:
    dayName = "Ngày không hợp lệ";
    break;
}

console.log("Hôm nay là: " + dayName);
  1. Ví dụ về cấu trúc điều kiện ba ngôi (Ternary Operator):
let age = 20;
let canVote = (age >= 18) ? "Có thể bỏ phiếu" : "Không thể bỏ phiếu";
console.log(canVote);
  1. Ví dụ về câu lệnh điều kiện nhiều mức (Nested Conditionals):
let temperature = 25;
let time = "morning";
let clothes;

if (temperature >= 30) {
  if (time === "morning") {
    clothes = "Áo sơ mi và quần ngố";
  } else {
    clothes = "Áo thun và quần jean";
  }
} else if (temperature >= 20) {
  clothes = "Áo khoác nhẹ và quần dài";
} else {
  clothes = "Áo ấm và quần dài";
}

console.log("Hãy mặc: " + clothes);

Đây chỉ là một số ví dụ cơ bản để minh họa ứng dụng của cấu trúc điều kiện trong JavaScript. Bạn có thể áp dụng cấu trúc điều kiện này để kiểm tra và thực hiện các hành động khác nhau dựa trên điều kiện trong chương trình JavaScript của mình.

Xem thêm Điều kiện if else trong ngôn ngữ SAS

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now