Đôi khi, chúng ta cần thực hiện các hành động khác nhau dựa trên các điều kiện khác nhau.
Để làm điều đó, chúng ta có thể sử dụng câu lệnhif
và toán tử có điều kiện ?
, đó cũng được gọi là toán tử dấu hỏi.
Nội dung chính
1. Câu lệnh if
Câu lệnh if(...)
đánh giá một điều kiện trong ngoặc đơn và, nếu kết quả là true
, thực thi một khối code.
Ví dụ:
/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/
let year = prompt('In which year was ECMAScript-2015 specification published?', '');
if (year == 2015) alert( 'You are right!' );
Trong ví dụ trên, điều kiện là một kiểm tra đẳng thức đơn giản ( year == 2015
), nhưng nó có thể phức tạp hơn nhiều.
Nếu chúng ta muốn thực thi nhiều hơn một câu lệnh, chúng ta phải bọc khối code của mình bên trong dấu ngoặc nhọn:
if (year == 2015) {
alert( "That's correct!" );
alert( "You're so smart!" );
}
Chúng ta khuyên bạn nên bọc khối code của mình bằng dấu ngoặc nhọn {}
mỗi khi bạn sử dụng câu lệnhif
,ngay cả khi chỉ có một câu lệnh để thực thi. Làm như vậy sẽ cải thiện khả năng đọc.
2. Chuyển đổi kiểu Boolean
Câu lệnh if (…)
đánh giá biểu thức trong ngoặc đơn của nó và chuyển đổi kết quả thành kiểu boolean.
Chúng ta hãy nhớ lại các quy tắc chuyển đổi từ chương Chuyển đổi kiểu:
- Một số
0
, một chuỗi rỗng""
,null
,undefined
, vàNaN
tất cả trở thànhfalse
. Do đó, chúng được gọi là các giá trị của false. - Các giá trị khác trở thành
true
, vì vậy chúng được gọi là đúng.
Vì vậy, code theo điều kiện này sẽ không bao giờ thực thi:
if (0) { // 0 is falsy
...
}
Có giá trị bên trong điều kiện này – nó sẽ luôn luôn đúng:
if (1) { // 1 is truthy
...
}
Chúng ta cũng có thể chuyển một giá trị boolean được đánh giá trước khi dùng cho if
, như thế này:
let cond = (year == 2015); // equality evaluates to true or false
if (cond) {
...
}
3. Mệnh đề else
Câu lệnh if
có thể chứa một khối tùy chọn else. Nó thực thi khi điều kiện là sai.
Ví dụ:
/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/
let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
if (year == 2015) {
alert( 'You guessed it right!' );
} else {
alert( 'How can you be so wrong?' ); // any value except 2015
}
4. Một số điều kiện: “else if”
Đôi khi, chúng ta muốn thử nghiệm một số biến thể của một điều kiện. Điều kiện else if
cho phép chúng tôi làm điều đó.
Ví dụ:
let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
if (year < 2015) {
alert( 'Too early...' );
} else if (year > 2015) {
alert( 'Too late' );
} else {
alert( 'Exactly!' );
}
Trong đoạn code trên, trước tiên JavaScript kiểm tra year < 2015
. Nếu đó là sai, nó đi đến điều kiện tiếp theo year > 2015
. Nếu đó cũng là sai, nó hiển thị alert
cuối cùng.
Có thể có nhiều khối else if
. Cuối cùng sẽ là else
.
5. Toán tử điều kiện ‘?’
Đôi khi, chúng ta cần gán một biến tùy thuộc vào một điều kiện.
Ví dụ:
/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/
let accessAllowed;
let age = prompt('How old are you?', '');
if (age > 18) {
accessAllowed = true;
} else {
accessAllowed = false;
}
alert(accessAllowed);
Cái gọi là Toán tử có điều kiện và có điều kiện là toán tử, cho phép chúng ta làm điều đó một cách ngắn gọn và đơn giản hơn.
Toán tử được đại diện bởi một dấu hỏi ?
. Đôi khi, nó được gọi là trực tuyến, bởi vì toán tử có ba toán hạng. Nó thực sự là một toán tử và duy nhất trong JavaScript.
Cú pháp là:
let result = condition ? value1 : value2;
Điều condition
này được đánh giá: nếu nó là đúng thì value1
được trả lại, nếu không – value2
.
Ví dụ:
let accessAllowed = (age > 18) ? true : false;
Về mặt kỹ thuật, chúng ta có thể bỏ qua các dấu ngoặc đơn xung quanh age > 18
. Toán tử dấu hỏi có độ ưu tiên thấp, vì vậy nó thực thi sau khi so sánh >
.
Ví dụ này sẽ làm điều tương tự như ví dụ trước:
// the comparison operator "age > 18" executes first anyway
// (no need to wrap it into parentheses)
let accessAllowed = age > 18 ? true : false;
Nhưng dấu ngoặc đơn làm cho code dễ đọc hơn, vì vậy chúng ta khuyên bạn nên sử dụng chúng.
Xin lưu ý:
Trong ví dụ trên, bạn có thể tránh sử dụng toán tử dấu hỏi vì bản thân phép so sánh trả về true/false
:
// the same
let accessAllowed = age > 18;
6. Sử dụng nhiều ‘?’
Một chuỗi các toán tử dấu hỏi ?
có thể trả về một giá trị phụ thuộc vào nhiều điều kiện.
Ví dụ:
let age = prompt('age?', 18);
let message = (age < 3) ? 'Hi, baby!' :
(age < 18) ? 'Hello!' :
(age < 100) ? 'Greetings!' :
'What an unusual age!';
alert( message );
Ban đầu có thể khó nắm bắt những gì đang diễn ra. Nhưng sau khi xem xét kỹ hơn, chúng ta có thể thấy rằng đó chỉ là một chuỗi thử nghiệm thông thường:
- Dấu hỏi đầu tiên kiểm tra xem
age < 3
. - Nếu đúng – nó trả về
'Hi, baby!'
. Mặt khác, nó tiếp tục biểu thức sau dấu hai chấm ‘”:”‘, kiểm traage < 18
. - Nếu đó là đúng – nó trả lại
'Hello!'
. Mặt khác, nó tiếp tục biểu thức sau dấu hai chấm tiếp theo ‘”:”‘, kiểm traage < 100
. - Nếu đó là đúng – nó trả lại
'Greetings!'
. Mặt khác, nó tiếp tục biểu thức sau dấu hai chấm cuối “”: “‘, trả lại'What an unusual age!'
.
Đây là cách nó trông như thế nào bằng cách sử dụng if..else
:
/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/
if (age < 3) {
message = 'Hi, baby!';
} else if (age < 18) {
message = 'Hello!';
} else if (age < 100) {
message = 'Greetings!';
} else {
message = 'What an unusual age!';
}
7. Sử dụng toán tử ‘?’
Đôi khi, dấu hỏi ?
được sử dụng để thay thế cho if
:
let company = prompt('Which company created JavaScript?', '');
(company == 'Netscape') ?
alert('Right!') : alert('Wrong.');
Tùy thuộc vào điều kiện company == 'Netscape'
, biểu thức thứ nhất hoặc biểu thức thứ hai sau khi ?
được thực thi và hiển thị cảnh báo.
Chúng ta không chỉ định một kết quả cho một biến ở đây. Thay vào đó, chúng ta thực thi các code khác nhau tùy thuộc vào điều kiện.
Không nên sử dụng toán tử dấu hỏi theo cách này.
Ký hiệu này ngắn hơn câu lệnhif
tương đương, điều này hấp dẫn một số lập trình viên. Nhưng nó khó đọc hơn.
Đây là cùng một code sử dụng if
để so sánh:
let company = prompt('Which company created JavaScript?', '');
if (company == 'Netscape') {
alert('Right!');
} else {
alert('Wrong.');
}
Mắt của chúng ta quét code theo chiều dọc. Các khối code trải dài trên một số dòng dễ hiểu hơn một tập lệnh dài, ngang.
Mục đích của toán tử dấu hỏi ?
là trả về giá trị này hay giá trị khác tùy thuộc vào điều kiện của nó. Hãy sử dụng nó cho chính xác đó. Sử dụng if
khi bạn cần thực thi các nhánh code khác nhau.