Giải thích các câu lệnh điều kiện trong JavaScript: Cách sử dụng if, else if và switch

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu: Phân nhánh có điều kiện trong JavaScript và Vai trò của “else if”

JavaScript là một ngôn ngữ lập trình được sử dụng rộng rãi để triển khai chức năng động trong phát triển web. Trong số nhiều tính năng của nó, phân nhánh có điều kiện là một cơ chế thiết yếu cho phép thực thi các quy trình khác nhau dựa trên các điều kiện cụ thể.

Trong bài viết này, chúng tôi tập trung vào một loại phân nhánh có điều kiện: câu lệnh “else if”. Chúng tôi sẽ giải thích cú pháp và cách sử dụng cơ bản của nó một cách chi tiết, sử dụng các ví dụ cụ thể để dễ hiểu cho người mới bắt đầu.

Tầm quan trọng của Phân nhánh có điều kiện trong JavaScript

Trong lập trình, thường cần thực hiện các hành động khác nhau tùy thuộc vào các điều kiện nhất định. Ví dụ, trên một trang mua sắm trực tuyến, vận chuyển có thể miễn phí tùy thuộc vào số tiền mua hàng, hoặc mã giảm giá chỉ được áp dụng khi đáp ứng các điều kiện cụ thể.

Trong những tình huống như vậy, các câu lệnh if...else và else if của JavaScript cho phép bạn định nghĩa logic điều kiện linh hoạt.

Câu lệnh “else if” là gì?

Câu lệnh else if là một cú pháp được sử dụng để đánh giá nhiều điều kiện theo thứ tự. Nó được sử dụng như sau:

if (condition1) {
  // Process executed when condition1 is true
} else if (condition2) {
  // Process executed when condition2 is true
} else {
  // Process executed when all conditions above are false
}

Cấu trúc này đặc biệt hữu ích khi bạn cần kiểm tra nhiều điều kiện. Ví dụ, nó có thể được sử dụng để thay đổi quyền truy cập dựa trên độ tuổi của người dùng hoặc xác định thứ hạng dựa trên điểm số.

Tổng quan bài viết

Bài viết này bao gồm các chủ đề sau theo thứ tự:

1. Cú pháp và cách sử dụng cơ bản của các câu lệnh “if” và “else”
2. Cú pháp và các ví dụ thực tế của câu lệnh “else if”
3. Các kỹ thuật ứng dụng sử dụng các ví dụ mã thực tế
4. So sánh giữa các câu lệnh “else if” và “switch”
5. Các lỗi phổ biến và mẹo khắc phục sự cố

Bằng cách học các chủ đề này, bạn sẽ củng cố kỹ năng phân nhánh có điều kiện trong JavaScript và có thể viết các chương trình nâng cao hơn.

Trong phần tiếp theo, chúng tôi sẽ bắt đầu bằng cách xem xét kỹ hơn cú pháp cơ bản của các câu lệnh “if” và “else”.

2. Cơ bản: Cú pháp và Cách sử dụng của các Câu lệnh “if” và “else”

Phân nhánh có điều kiện trong JavaScript có thể được triển khai đơn giản bằng cách sử dụng các câu lệnh if và else. Trong phần này, chúng tôi giải thích cú pháp cơ bản và cách sử dụng cụ thể của chúng.

Câu lệnh “if” là gì?

Câu lệnh if là một cú pháp thực thi mã chỉ khi điều kiện được chỉ định đánh giá là true. Cấu trúc cơ bản được hiển thị bên dưới.

if (condition) {
  // Code executed when the condition is true
}

Ví dụ về Câu lệnh “if”

Ví dụ sau phân nhánh xử lý dựa trên độ tuổi của người dùng.

let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
}

Trong mã này, thông báo “You are an adult.” được hiển thị khi biến age là 18 hoặc lớn hơn. Nếu điều kiện không được đáp ứng, không có gì được thực thi.

Câu lệnh “else” là gì?

Câu lệnh else định nghĩa quy trình được thực thi khi điều kiện “if” là false. Nó được sử dụng kết hợp với if.

if (condition) {
  // Code executed when the condition is true
} else {
  // Code executed when the condition is false
}

Ví dụ về Câu lệnh “else”

Ví dụ tiếp theo hiển thị một thông báo khác khi người dùng dưới 18 tuổi.

let age = 16;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Trong mã này, “You are a minor.” được hiển thị khi age nhỏ hơn 18.

Tóm tắt

Trong phần này, chúng tôi đã học cú pháp và cách sử dụng của các câu lệnh điều kiện cơ bản trong JavaScript: if và else. Những cấu trúc này hình thành nền tảng không chỉ cho phân nhánh đơn giản, mà còn cho việc xây dựng logic phức tạp hơn.

Trong phần tiếp theo, chúng ta sẽ xem xét sâu hơn về câu lệnh else if, cho phép bạn xử lý nhiều điều kiện. Chúng ta sẽ khám phá các ví dụ thực tế và các kỹ thuật áp dụng.

3. Trình độ Trung cấp: Cú pháp và Ví dụ “else if” cho Người mới bắt đầu

Trong phần này, chúng tôi giải thích việc phân nhánh điều kiện phức tạp bằng câu lệnh “else if”. Bằng cách sử dụng else if, bạn có thể đánh giá nhiều điều kiện theo thứ tự và thực thi quy trình thích hợp.

Cú pháp của câu lệnh “else if”

Câu lệnh else if là một cú pháp mở rộng để đánh giá nhiều điều kiện. Cấu trúc cơ bản như sau.

if (condition1) {
  // Process when condition1 is true
} else if (condition2) {
  // Process when condition2 is true
} else {
  // Process when all conditions are false
}

Ví dụ: Đánh giá Điểm kiểm tra

Mã sau hiển thị một đánh giá dựa trên điểm kiểm tra.

let score = 75;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else if (score >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}

Tóm tắt

Trong phần này, chúng tôi đã giải thích cú pháp và các ví dụ của câu lệnh “else if”. Câu lệnh else if là một tính năng mạnh mẽ cho phép bạn đánh giá nhiều điều kiện theo thứ tự.

Trong phần tiếp theo, chúng tôi sẽ giới thiệu các ví dụ nâng cao và các nghiên cứu trường hợp để giúp bạn xây dựng kỹ năng thực tiễn.

4. Nâng cao: Mã thực tế và Nghiên cứu trường hợp Sử dụng “else if”

Trong phần này, chúng tôi giới thiệu các ví dụ mã thực tế sử dụng câu lệnh else if. Bằng cách thực hành các kịch bản thường gặp trong các ứng dụng thực tế, bạn có thể củng cố kỹ năng áp dụng.

Trường hợp 1: Kiểm tra hợp lệ Dữ liệu Đầu vào Form

let username = "user123";
let password = "pass123";

if (username === "") {
  console.log("Please enter a username.");
} else if (password === "") {
  console.log("Please enter a password.");
} else if (password.length < 6) {
  console.log("Password must be at least 6 characters long.");
} else {
  console.log("The input is valid.");
}

Trường hợp 2: Đánh giá và Xếp hạng Điểm

let score = 72;

if (score >= 90) {
  console.log("Rank: S");
} else if (score >= 80) {
  console.log("Rank: A");
} else if (score >= 70) {
  console.log("Rank: B");
} else if (score >= 60) {
  console.log("Rank: C");
} else {
  console.log("Rank: D");
}

Tóm tắt

Trong phần này, chúng tôi đã giới thiệu các ví dụ áp dụng và mã thực tế sử dụng câu lệnh else if.
Bằng cách áp dụng các mẫu này, bạn có thể xử lý các logic điều kiện phức tạp hơn.

Trong phần tiếp theo, chúng tôi sẽ so sánh chi tiết câu lệnh else if và switch và giải thích cách lựa chọn giữa chúng.

5. “else if” vs “switch”: Nên dùng cái nào?

Trong JavaScript, hai cách tiếp cận thường dùng cho việc phân nhánh điều kiện là câu lệnh else if và câu lệnh switch. Trong phần này, chúng tôi so sánh cú pháp và đặc điểm của chúng và giải thích cách chọn lựa phù hợp cho trường hợp của bạn.

Đặc điểm của câu lệnh “else if”

Cú pháp và Ví dụ

let grade = "B";

if (grade === "A") {
  console.log("Excellent!");
} else if (grade === "B") {
  console.log("Good performance.");
} else if (grade === "C") {
  console.log("Pass level.");
} else {
  console.log("Retest required.");
}

Đặc điểm của câu lệnh “switch”

Cú pháp và Ví dụ

let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent!");
    break;
  case "B":
    console.log("Good performance.");
    break;
  case "C":
    console.log("Pass level.");
    break;
  default:
    console.log("Retest required.");
}

Tóm tắt

• Câu lệnh “else if”: Thích hợp cho các biểu thức điều kiện phức tạp và các toán tử logic.
• Câu lệnh “switch”: Thích hợp cho việc tổ chức phân nhánh điều kiện dựa trên các giá trị cụ thể.

6. Những Sai Lầm Thường Gặp và Mẹo Xử Lý Lỗi

Trong phần này, chúng tôi giải thích các sai lầm thường gặp khi sử dụng câu lệnh else if và cách ngăn ngừa chúng thông qua việc xử lý lỗi thích hợp.

Những Sai Lầm Thường Gặp và Giải Pháp

Đánh Giá Điều Kiện Sai

let age = 20;

if (age > 18) {
  console.log("You are an adult.");
} else if (age > 20) {
  console.log("You are over 20.");
} else {
  console.log("You are a minor.");
}

Thêm Xử Lý Lỗi

try {
  let input = prompt("Please enter a score:");
  let score = parseInt(input);

  if (isNaN(score)) {
    throw new Error("Please enter a numeric value.");
  }

  if (score >= 90) {
    console.log("Grade: A");
  } else if (score >= 80) {
    console.log("Grade: B");
  } else {
    console.log("Grade: C");
  }
} catch (error) {
  console.error(error.message);
}

Tóm Tắt

Bằng cách ngăn ngừa các sai lầm trong biểu thức điều kiện và sử dụng các kỹ thuật gỡ lỗi và xử lý lỗi, bạn có thể viết mã an toàn và mạnh mẽ hơn.

7. Câu Hỏi Thường Gặp: Trả Lời Các Câu Hỏi Thông Thường

Trong phần này, chúng tôi giải đáp các câu hỏi và hiểu lầm thường gặp của độc giả về câu lệnh else if trong JavaScript.

Câu 1. Sự khác biệt giữa “else if” và “if” là gì?

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

Câu 2. Bạn có thể sử dụng “else if” bao nhiêu lần?

Không có giới hạn, nhưng nếu bạn có nhiều điều kiện, hãy cân nhắc sử dụng câu lệnh switch.

Câu 3. Sự khác biệt giữa “else if” và toán tử ba ngôi là gì?

let score = 75;
console.log(score >= 60 ? "Passed!" : "Failed.");

8. Kết Luận: Thành Thạo Câu Lệnh “else if” trong JavaScript

Trong bài viết này, chúng tôi đã bao quát mọi thứ từ cơ bản đến các ví dụ nâng cao về nhánh điều kiện trong JavaScript bằng cách sử dụng câu lệnh else if.

Những Điểm Học Chủ Chốt

• Cú pháp cơ bản: Học cách các biểu thức điều kiện điều khiển luồng chương trình.
• Ví dụ thực tế: Củng cố kỹ năng ứng dụng thông qua mã thực tế.
• So sánh: Hiểu cách lựa chọn giữa else if và switch .
• Xử lý lỗi: Học các kỹ thuật gỡ lỗi để ngăn ngừa sai lầm.

Các Bước Tiếp Theo

• Sử dụng toán tử logic: Học các biểu thức điều kiện phức tạp hơn.
• Toán tử ba ngôi và đánh giá ngắn mạch: Đơn giản hoá các điều kiện.
• Kết hợp các điều kiện với hàm: Cải thiện khả năng tái sử dụng mã.

Thành thạo câu lệnh else if và bắt đầu viết các chương trình JavaScript thực tế, thực dụng!