JavaScript - Operators Điều Kiện

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ lặn sâu vào thế giới kỳ diệu của các operators điều kiện. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn trong hành trình thú vị này. Vậy, hãy lấy keyboards của bạn (như những枝 ma pháp), và chúng ta cùng thực hiện một số phép thuật điều kiện!

Các Operators Điều Kiện Là Gì?

Hãy tưởng tượng bạn là một đèn giao thông. Công việc của bạn là quyết định xem xe cộ nên đi hay dừng. Đó chính xác là điều các operators điều kiện làm trong JavaScript - chúng giúp các chương trình của chúng ta đưa ra quyết định dựa trên một số điều kiện.

The Ternary Operator: Swiss Army Knife của Các Điều Kiện

Ngôi sao của chúng ta trong buổi biểu diễn hôm nay là operator điều kiện ternary. Nó giống như một câu lệnh if-else nhỏ gọn, siêu hiệu quả. Hãy phân tích nó:

condition ? expressionIfTrue : expressionIfFalse

Nó giống như chúng ta đang hỏi một câu hỏi:

• Nếu câu trả lời là có (đúng), hãy làm điều đầu tiên.
• Nếu câu trả lời là không (sai), hãy làm điều thứ hai.

Cú Pháp: C công Thức cho Phép Thuật Điều Kiện

Hãy nhìn vào các thành phần của potion điều kiện của chúng ta:

1. condition: Đây là câu hỏi của chúng ta. Có mưa không? Người dùng đã đăng nhập chưa? Con số này có phải là số chẵn không?
2. ?: Điều này giống như nói "thì..."
3. expressionIfTrue: Điều cần làm nếu điều kiện là đúng
4. :: Điều này giống như nói "ngược lại..."
5. expressionIfFalse: Điều cần làm nếu điều kiện là sai

Ví Dụ 1: Trình Định ĐDeterminer Khí Thời Tiết

Hãy bắt đầu với một ví dụ đơn giản. Chúng ta sẽ tạo một chương trình quyết định liệu có cần mang theo dù không dựa trên thời tiết.

let isRaining = true;
let decision = isRaining ? "Bring an umbrella" : "Leave the umbrella at home";
console.log(decision);

Nếu bạn chạy đoạn mã này, nó sẽ hiển thị: "Bring an umbrella"

Hãy phân tích nó:

• isRaining là điều kiện của chúng ta. Nó được đặt là true.
• Nếu trời mưa (isRaining là true), biểu thức sẽ trả về "Bring an umbrella".
• Nếu không mưa, nó sẽ trả về "Leave the umbrella at home".
• Chúng ta lưu kết quả này trong biến decision.

Thử thay đổi isRaining thành false và xem会发生什么!

Ví Dụ 2: Trình Kiểm Tra Tuổi

Bây giờ, hãy tạo một chương trình kiểm tra xem ai đó có đủ tuổi để bầu cử hay không.

let age = 20;
let canVote = age >= 18 ? "Yes, you can vote!" : "Sorry, you're too young to vote.";
console.log(canVote);

Điều này sẽ hiển thị: "Yes, you can vote!"

Dưới đây là những gì đang xảy ra:

• Chúng ta đặt age thành 20.
• Điều kiện của chúng ta là age >= 18 (tuổi có lớn hơn hoặc bằng 18 không?).
• Nếu đúng, chúng ta trả về "Yes, you can vote!".
• Nếu sai, chúng ta trả về "Sorry, you're too young to vote."

Thử thay đổi tuổi thành 16 và xem kết quả thay đổi như thế nào!

Ví Dụ 3: Trình Gán Điểm

Hãy làm một chút phức tạp hơn. Chúng ta sẽ tạo một chương trình gán điểm dựa trên số điểm.

let score = 85;
let grade = score >= 90 ? 'A' :
score >= 80 ? 'B' :
score >= 70 ? 'C' :
score >= 60 ? 'D' : 'F';
console.log(`Your grade is: ${grade}`);

Điều này sẽ hiển thị: "Your grade is: B"

Wow, điều này trông khác! Chúng ta thực sự đã chaining nhiều operators điều kiện ternary lại với nhau. Nó giống như một водопад quyết định:

• Đầu tiên, chúng ta kiểm tra xem điểm số có lớn hơn hoặc bằng 90 không. Nếu có, nó là 'A'.
• Nếu không, chúng ta kiểm tra xem điểm số có lớn hơn hoặc bằng 80 không. Nếu có, nó là 'B'.
• Điều này tiếp tục xuống đến 'F' cho bất kỳ điểm số nào dưới 60.

Đây là một kỹ thuật mạnh mẽ, nhưng hãy sử dụng nó khôn ngoan - quá nhiều chains có thể làm cho mã của bạn khó đọc!

Xử Lý giá Trị null: Operator Null Coalescing

Đôi khi, chúng ta cần phải xử lý các giá trị có thể là null hoặc undefined. Đây là operator null coalescing: ??

let username = null;
let displayName = username ?? "Guest";
console.log(`Welcome, ${displayName}!`);

Điều này sẽ hiển thị: "Welcome, Guest!"

Dưới đây là những gì đang xảy ra:

• Nếu username là null hoặc undefined, chúng ta sử dụng "Guest" thay thế.
• Nếu username có giá trị, chúng ta sử dụng giá trị đó.

Đây là một cách tiện lợi để cung cấp các giá trị mặc định!

Bảng Tóm Tắt Operators Điều Kiện

Dưới đây là bảng tham khảo nhanh của các operators chúng ta đã học:

Operator	Tên	Mục Đích
?:	Operator Điều Kiện Ternary	Làm một quyết định giữa hai giá trị dựa trên một điều kiện
??	Operator Null Coalescing	Cung cấp một giá trị mặc định khi xử lý null hoặc undefined

Nhớ rằng, thực hành sẽ giúp bạn thành thạo! Thử tạo các ví dụ riêng của bạn và thử nghiệm với các operators này. Trước khi bạn biết, bạn sẽ trở thành người chỉ huy một dàn nhạc của các điều kiện trong mã của bạn!

Chúc các bạn mã hóa vui vẻ, và mong rằng các điều kiện của bạn luôn là true (khi bạn muốn chúng là true)!

Credits: Image by storyset