[Tự Học Javascript] Toán Tử điều Kiện: If, '?' Trong Javascript - Cafedev

🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Đô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.

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à NaNtất cả trở thành false. 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ị alertcuố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 conditionnà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:

1. Dấu hỏi đầu tiên kiểm tra xem age < 3.
2. 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 tra age < 18.
3. 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 tra age < 100.
4. 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 ifkhi bạn cần thực thi các nhánh code khác nhau.

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!