Thứ ba, 29/08/2017 | 00:00 GMT+7

Cách viết các câu lệnh có điều kiện trong JavaScript

Trong lập trình, sẽ có nhiều trường hợp bạn muốn các khối mã khác nhau chạy tùy thuộc vào đầu vào của user hoặc các yếu tố khác.

Ví dụ: bạn có thể cần gửi biểu mẫu nếu mỗi trường được điền đúng cách, nhưng bạn có thể cần ngăn biểu mẫu đó gửi nếu thiếu một số trường bắt buộc. Để đạt được các nhiệm vụ như thế này, ta có các câu lệnh điều kiện , là một phần không thể thiếu của tất cả các ngôn ngữ lập trình.

Câu lệnh điều kiện thực hiện một hành động cụ thể dựa trên kết quả của một kết quả là true hoặc false .

Một vài ví dụ về câu lệnh điều kiện JavaScript mà bạn có thể thấy bao gồm:

  • Kiểm tra vị trí của user và hiển thị ngôn ngữ chính xác dựa trên quốc gia
  • Gửi biểu mẫu khi gửi hoặc hiển thị cảnh báo bên cạnh các trường bắt buộc bị thiếu
  • Mở menu thả xuống về một sự kiện nhấp chuột hoặc đóng menu thả xuống nếu nó đã được mở
  • Hiển thị trang web của nhà cung cấp rượu nếu user trên tuổi uống rượu hợp lệ
  • Hiển thị mẫu đặt phòng cho một khách sạn nhưng không hiển thị nếu khách sạn đã được đặt

Câu lệnh điều kiện là một phần của logic, ra quyết định hoặc điều khiển stream của một chương trình máy tính. Bạn có thể so sánh một câu lệnh điều kiện với một cuốn sách “ Hãy chọn cuộc phiêu lưu của bạn ” hoặc một sơ đồ.

Trong hướng dẫn này, ta sẽ xem xét các câu lệnh điều kiện, bao gồm các từ khóa if , elseelse if . Ta cũng sẽ đề cập đến toán tử bậc ba.

Nếu tuyên bố

Các cơ bản nhất của các báo cáo có điều kiện là if tuyên bố. Một if tuyên bố sẽ đánh giá liệu một tuyên bố là đúng hay sai, và chỉ chạy nếu trở về tuyên bố true . Khối mã sẽ bị bỏ qua trong trường hợp kết quả false và chương trình sẽ chuyển sang phần tiếp theo.

Một if tuyên bố được viết với if từ khóa, tiếp theo là một điều kiện trong ngoặc đơn, với mã được thực hiện trong các ngoặc nhọn. Tóm lại, nó có thể được viết như if () {} .

Đây là phần kiểm tra dài hơn về câu lệnh if cơ bản.

if (condition) {     // code that will execute if condition is true } 

Nội dung của một if tuyên bố đang thụt vào, và các dấu ngoặc nhọn có chứa các khối mã để chạy không kết thúc bằng một dấu chấm phẩy, giống như một khối chức năng.

Ví dụ, hãy xem xét một ứng dụng mua sắm. Giả sử, đối với chức năng của ứng dụng này, user đã gửi một số tiền nhất định vào account của họ sau đó sẽ muốn mua một mặt hàng từ cửa hàng.

shop.js
// Set balance and price of item const balance = 500; const jeans = 40;  // Check if there are enough funds to purchase item if (jeans <= balance) {   console.log("You have enough money to purchase the item!"); } 
Output
You have enough money to purchase the item!

Ta có số dư account là 500 và muốn mua một chiếc quần jean với giá 40 . Sử dụng toán tử nhỏ hơn hoặc bằng toán tử, ta có thể kiểm tra xem giá quần jean có nhỏ hơn hoặc bằng số tiền ta có hay không. Vì jeans <= balance đánh giá là true , điều kiện sẽ vượt qua và khối mã sẽ chạy.

Trong một ví dụ mới, ta sẽ tạo một mặt hàng mới trong cửa hàng có giá cao hơn số dư hiện có.

shop.js
// Set balance and price of item const balance = 500; const phone = 600;  // Check if there is enough funds to purchase item if (phone <= balance) {     console.log("You have enough money to purchase the item!"); } 

Ví dụ này sẽ không có kết quả , vì phone <= balance đánh giá là false . Khối mã đơn giản sẽ bị bỏ qua và chương trình sẽ chuyển sang dòng tiếp theo.

Tuyên bố khác

Với if báo cáo, ta chỉ thực thi mã khi một tuyên bố để đánh giá true , nhưng thường ta sẽ muốn cái gì khác xảy ra nếu tình trạng này không.

Ví dụ: ta có thể cần hiển thị thông báo cho user biết trường nào đã được điền chính xác nếu biểu mẫu không được gửi đúng cách. Trong trường hợp này, ta sẽ sử dụng câu lệnh else , đây là mã sẽ thực thi nếu điều kiện ban đầu không thành công.

Các else tuyên bố được viết sau if tuyên bố, và nó không có điều kiện trong ngoặc đơn. Đây là cú pháp cho câu lệnh if...else cơ bản.

if (condition) {     // code that will execute if condition is true } else {     // code that will execute if condition is false } 

Sử dụng ví dụ tương tự như trên, ta có thể thêm một thông báo để hiển thị nếu số tiền trong account quá thấp.

shop.js
// Set balance and price of item const balance = 500; const phone = 600;  // Check if there is enough funds to purchase item if (phone <= balance) {     console.log("You have enough money to purchase the item!"); } else {     console.log("You do not have enough money in your account to purchase this item."); } 
Output
You do not have enough money in your account to purchase this item.

Vì điều kiện if không thành công, mã chuyển sang những gì trong câu lệnh else .

Điều này có thể rất hữu ích để hiển thị cảnh báo hoặc cho user biết những hành động cần thực hiện để tiếp tục. Thông thường một hành động sẽ được yêu cầu cho cả thành công và thất bại, vì vậy if...else phổ biến hơn câu lệnh if solo.

Khác nếu Tuyên bố

Với ifelse , ta có thể chạy các khối mã tùy thuộc vào điều kiện là true hay false . Tuy nhiên, đôi khi ta có thể có nhiều điều kiện và kết quả kết quả , và cần nhiều hơn hai tùy chọn. Một cách để làm điều này là với câu lệnh else if , câu lệnh này có thể đánh giá nhiều hơn hai kết quả có thể xảy ra.

Dưới đây là một ví dụ cơ bản của một khối mã có chứa một if tuyên bố, nhiều else if báo cáo, và một else tuyên bố trong trường hợp không có điều kiện đánh giá để true .

if (condition a) {     // code that will execute if condition a is true } else if (condition b) {     // code that will execute if condition b is true } else if (condition c) {     // code that will execute if condition c is true } else {     // code that will execute if all above conditions are false } 

JavaScript sẽ cố gắng chạy tất cả các câu lệnh theo thứ tự, và nếu không câu lệnh nào thành công, nó sẽ mặc định là khối else .

Bạn có thể có nhiều câu lệnh else if cần thiết. Trong trường hợp có nhiều câu lệnh else if , câu lệnh switch có thể được ưu tiên hơn để dễ đọc.

Như một ví dụ về nhiều câu lệnh else if , ta có thể tạo một ứng dụng chấm điểm sẽ xuất ra điểm chữ cái dựa trên điểm trên 100.

Các yêu cầu của ứng dụng này như sau:

  • Điểm 90 trở lên là A
  • Hạng 80 đến 89 là hạng B
  • Hạng 70 đến 79 là điểm C
  • Hạng 60 đến 69 là hạng D
  • Điểm 59 trở xuống là điểm F

Dưới đây, ta sẽ tạo một tập hợp đơn giản gồm các câu lệnh if , elseelse if và kiểm tra chúng theo điểm đã cho.

điểm.js
// Set the current grade of the student let grade = 87;  // Check if grade is an A, B, C, D, or F if (grade >= 90) {   console.log("A"); } else if (grade >= 80) {   console.log("B"); } else if (grade >= 70) {   console.log("C"); } else if (grade >= 60) {   console.log("D"); } else {   console.log("F"); } 
Output
B

Trong ví dụ của ta , trước tiên ta kiểm tra điểm cao nhất, sẽ lớn hơn hoặc bằng 90 . Sau đó, các câu lệnh else if sẽ kiểm tra lớn hơn 80 , 7060 cho đến khi nó đạt đến giá trị mặc định else là điểm không đạt.

Mặc dù về mặt kỹ thuật, giá trị grade 87 của ta cũng đúng với C , DF , các câu lệnh sẽ dừng lại ở câu đầu tiên thành công. Do đó, ta nhận được kết quả là B , là kết quả phù hợp đầu tiên.

Nhà điều hành bậc ba

Toán tử bậc ba , còn gọi là toán tử điều kiện, được sử dụng như viết tắt cho một câu lệnh if...else .

(Một nhà điều hành ternary được viết với cú pháp của một dấu hỏi ? ) Tiếp theo là dấu hai chấm ( : ), như chứng minh dưới đây.

(condition) ? expression on true : expression on false 

Trong câu lệnh trên, điều kiện được viết đầu tiên, sau đó là dấu ? . Biểu thức đầu tiên sẽ thực thi trên true và biểu thức thứ hai sẽ thực thi trên false . Nó rất giống với câu lệnh if...else , với cú pháp nhỏ gọn hơn.

Trong ví dụ này, ta sẽ tạo một chương trình kiểm tra xem user có 21 tuổi trở lên hay không. Nếu có, nó sẽ in "You may enter" vào console . Nếu không, nó sẽ in "You may not enter." vào console .

age.js
// Set age of user let age = 20;  // Place result of ternary operation in a variable const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";  // Print output oldEnough; 
Output
'You may not enter.'

age của user dưới 21 , thông báo lỗi được xuất ra console . if...else tương đương với điều này sẽ là "You may enter." trong if tuyên bố, và "You may not enter." trong câu lệnh else .

Kết luận

Các câu lệnh có điều kiện cung cấp cho ta khả năng kiểm soát stream để xác định kết quả của các chương trình của ta . Chúng là một trong những nền tảng cơ bản của lập trình và có thể được tìm thấy trong hầu hết các ngôn ngữ lập trình.

Trong bài viết này, ta đã tìm hiểu về cách sử dụng các từ khóa if , elseelse if lồng ghép các câu lệnh được bao phủ và cách sử dụng toán tử bậc ba.


Tags:

Các tin liên quan

Hiểu các đối tượng trong JavaScript
2017-08-24
Cách sử dụng phương thức mảng trong JavaScript: Phương thức lặp lại
2017-08-15
Cách chuyển đổi kiểu dữ liệu trong JavaScript
2017-08-15
Cách sử dụng các phương thức mảng trong JavaScript: Phương thức Accessor
2017-08-14
Cách sử dụng phương thức mảng trong JavaScript: Phương thức đột biến
2017-08-10
Cách viết chương trình JavaScript đầu tiên của bạn
2017-08-02
Hiểu mảng trong JavaScript
2017-07-28
Làm thế nào để làm toán trong JavaScript với các toán tử
2017-07-20
Cách lập chỉ mục, tách và thao tác chuỗi trong JavaScript
2017-07-14
Object.values và Object.entries trong JavaScript
2017-07-12