HomeLập trìnhJavaScriptJavaScript If-Else và...

JavaScript If-Else và If-Then – Câu lệnh có điều kiện trong JS


Sẽ có lúc bạn muốn viết các lệnh xử lý các quyết định khác nhau trong mã của mình.

Ví dụ: nếu bạn đang mã hóa một bot, bạn có thể yêu cầu nó phản hồi bằng các thông báo khác nhau dựa trên một tập hợp các lệnh mà nó nhận được.

Trong bài viết này, tôi sẽ giải thích thế nào là một if...else tuyên bố là và cung cấp các ví dụ về mã. Chúng ta cũng sẽ xem xét toán tử điều kiện (bộ ba) mà bạn có thể sử dụng làm cách viết tắt cho if...else bản tường trình.

Câu lệnh if…else trong JavaScript là gì?

Các if...else là một loại câu lệnh điều kiện sẽ thực thi một khối mã khi điều kiện trong if tuyên bố là truthy. Nếu điều kiện là falsysau đó else khối sẽ được thực thi.

Truthyfalsy các giá trị được chuyển đổi thành true hoặc false Trong if các câu lệnh.

if (condition is true) {
   // code is executed
} else {
   // code is executed
}

Bất kỳ giá trị nào không được định nghĩa là falsy sẽ được xem xét truthy trong JavaScript.

đây là danh sách falsy giá trị:

  • sai
  • 0 (không)
  • -0 (số 0 âm)
  • 0n (BigInt không)
  • "", '', `` (chuỗi rỗng)
  • vô giá trị
  • không xác định
  • NaN (không phải số)

Ví dụ về câu lệnh if…else trong JavaScript

Trong ví dụ này, điều kiện để if tuyên bố là true vì vậy thông báo được in ra bảng điều khiển sẽ là “Nick là người lớn.”

const age = 18;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}
Screen-Shot-2021-08-09-at-3.18.12-AM

Nhưng nếu tôi thay đổi age biến nhỏ hơn 18, thì điều kiện sẽ là false và mã sẽ thực thi else chặn thay thế.

const age = 12;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}
Screen-Shot-2021-08-09-at-3.17.07-AM

Ví dụ về nhiều điều kiện (câu lệnh if…else if…else) trong JavaScript

Sẽ có lúc bạn muốn kiểm tra nhiều điều kiện. Đó là nơi mà else if khối đi vào.

if (condition 1 is true) {
   // code is executed
} else if (condition 2 is true) {
  // code is executed
} else {
   // code is executed
}

Khi mà if tuyên bố là falsemáy tính sẽ chuyển sang else if bản tường trình. Nếu đó cũng là falsesau đó nó sẽ chuyển sang else chặn.

Đọc thêm  Cách sử dụng JavaScript Math.random() làm Trình tạo số ngẫu nhiên

Trong ví dụ này, các else if khối sẽ được thực thi vì Alice ở độ tuổi từ 18 đến 21.

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}
Screen-Shot-2021-08-09-at-3.33.33-AM

Khi nào thì sử dụng câu lệnh switch thay vì câu lệnh if…else?

Đôi khi trong JavaScript, bạn có thể cân nhắc sử dụng một switch tuyên bố thay vì một if else bản tường trình.

switch các câu lệnh có thể có cú pháp rõ ràng hơn phức tạp if else các câu lệnh.

Hãy xem ví dụ bên dưới – thay vì sử dụng từ này if else tuyên bố, bạn có thể chọn đi với một dễ dàng hơn để đọc switch bản tường trình.

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}
const pet = "dog";
 
switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

switch báo cáo sẽ không thích hợp để sử dụng trong mọi tình huống. Nhưng nếu bạn cảm thấy thích if else báo cáo là dài và phức tạp, sau đó một switch tuyên bố có thể là một lựa chọn thay thế.

Đọc thêm  Cách xóa một mảng JavaScript – JS Empty Array

Toán tử logic AND (&&) và câu lệnh if…else trong JavaScript

Trong logic AND (&&) toán tử, nếu cả hai điều kiện là truesau đó if khối sẽ được thực thi. Nếu một hoặc cả hai điều kiện là falsesau đó else khối sẽ được thực thi.

Trong ví dụ này, vì tuổi lớn hơn 16 và ownsCar biến là truecác if khối sẽ chạy. Thông báo được in ra bảng điều khiển sẽ là “Jerry đủ tuổi lái xe và có ô tô riêng.”

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}
Ảnh chụp màn hình-2021-08-09-at-4.22.49-AM

Nếu tôi thay đổi age biến nhỏ hơn 16, thì cả hai điều kiện không còn trueelse thay vào đó, khối sẽ được thực thi.

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}
Screen-Shot-2021-08-09-at-4.20.19-AM

Toán tử logic OR (||) và câu lệnh if…else trong JavaScript

Trong logic OR (||) toán tử, nếu một hoặc cả hai điều kiện là truethì mã bên trong if tuyên bố sẽ thực hiện.

Trong ví dụ này, mặc dù isSale biến được đặt thành falsemã bên trong if khối sẽ vẫn thực thi vì boyfriendIsPaying biến được đặt thành true.

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}
Screen-Shot-2021-08-09-at-4.40.36-AM

Nếu tôi thay đổi giá trị của boyfriendIsPaying biến thành falsesau đó else khối sẽ thực thi vì cả hai điều kiện là false.

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}
Screen-Shot-2021-08-09-at-4.42.12-AM

Toán tử logic NOT (!) và câu lệnh if…else trong JavaScript

Logic KHÔNG (!) sẽ lấy thứ gì đó là true và làm cho nó false. Nó cũng sẽ mất một cái gì đó là false và làm cho nó true.

Chúng ta có thể sửa đổi ví dụ từ trước đó để sử dụng ! nhà điều hành để thực hiện boyfriendIsPaying Biến đổi false. Vì cả hai điều kiện đều falsecác else khối sẽ được thực thi.

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}
Ảnh chụp màn hình-2021-08-09-at-5.02.04-AM

Toán tử điều kiện (ternary) trong JavaScript

Nếu bạn có một đoạn ngắn if else thì bạn có thể chọn sử dụng toán tử bậc ba. Từ ternary có nghĩa là một cái gì đó bao gồm ba phần.

Đọc thêm  Cách xây dựng cầu giao tiếp gốc trong Flutter với WebView và JavaScript

Đây là cú pháp cơ bản cho toán tử bậc ba:

condition ? if condition is true : if condition is false

điều kiện đi trước ? đánh dấu và nếu nó là truethì mã giữa ? đánh dấu và : sẽ thực thi. Nếu điều kiện là falsethì mã sau : sẽ thực thi.

Trong ví dụ này, vì tuổi lớn hơn 18 nên thông báo tới bảng điều khiển sẽ là “Có thể bỏ phiếu”.

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";
console.log(citizen);
Screen-Shot-2021-08-09-at-5.25.14-AM

Đây là giao diện của mã khi sử dụng một if else bản tường trình:

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

Phần kết luận

if else các câu lệnh sẽ thực thi một khối mã khi điều kiện trong if tuyên bố là truthy. Nếu điều kiện là falsysau đó else khối sẽ được thực thi.

Sẽ có lúc bạn muốn kiểm tra nhiều điều kiện và bạn có thể sử dụng một if...else if...else bản tường trình.

Nếu bạn cảm thấy thích if else tuyên bố là dài và phức tạp, sau đó một switch tuyên bố có thể là một lựa chọn thay thế.

Sử dụng các toán tử logic để kiểm tra nhiều điều kiện có thể thay thế các phép toán lồng nhau if else các câu lệnh.

Toán tử bậc ba có thể được sử dụng để viết mã ngắn hơn cho đơn giản if else bản tường trình.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status