Chúng ta có thể sử dụng toán tử bậc ba trong đối tượng JavaScript không?

Một toán tử bậc ba có thể được sử dụng để thay thế một câu lệnh if..else trong một số tình huống nhất định. Trước khi bạn tìm hiểu về các toán tử bậc ba, hãy nhớ kiểm tra JavaScript nếu. hướng dẫn khác

Toán tử ternary là gì?

Toán tử bậc ba đánh giá một điều kiện và thực thi một khối mã dựa trên điều kiện

Cú pháp của nó là

condition ? expression1 : expression2

Toán tử ternary đánh giá điều kiện kiểm tra

• Nếu điều kiện là

  // program to check pass or fail
  
  let marks = prompt('Enter your marks :');
  
  // check the condition
  let result = (marks >= 40) ? 'pass' : 'fail';
  
  console.log(`You ${result} the exam.`);

  0, biểu thức 1 được thực hiện
• Nếu điều kiện là

  // program to check pass or fail
  
  let marks = prompt('Enter your marks :');
  
  // check the condition
  let result = (marks >= 40) ? 'pass' : 'fail';
  
  console.log(`You ${result} the exam.`);

  1, biểu thức 2 được thực hiện

Toán tử bậc ba nhận ba toán hạng, do đó, tên toán tử bậc ba. Nó còn được gọi là toán tử có điều kiện

Hãy viết một chương trình để xác định xem một học sinh đạt hay trượt trong kỳ thi dựa trên số điểm đạt được

Thí dụ. Toán tử bậc ba JavaScript

// program to check pass or fail

let marks = prompt('Enter your marks :');

// check the condition
let result = (marks >= 40) ? 'pass' : 'fail';

console.log(`You ${result} the exam.`);

Đầu ra 1

Enter your marks: 78
You pass the exam.

Giả sử người dùng nhập 78. Sau đó, điều kiện

// program to check pass or fail

let marks = prompt('Enter your marks :');

// check the condition
let result = (marks >= 40) ? 'pass' : 'fail';

console.log(`You ${result} the exam.`);

// program to check pass or fail

let marks = prompt('Enter your marks :');

// check the condition
let result = (marks >= 40) ? 'pass' : 'fail';

console.log(`You ${result} the exam.`);

// program to check pass or fail

let marks = prompt('Enter your marks :');

// check the condition
let result = (marks >= 40) ? 'pass' : 'fail';

console.log(`You ${result} the exam.`);

Đầu ra 2

Giả sử sử dụng nhập 35. Sau đó, điều kiện

// program to check pass or fail

let marks = prompt('Enter your marks :');

// check the condition
let result = (marks >= 40) ? 'pass' : 'fail';

console.log(`You ${result} the exam.`);

// program to check pass or fail

let marks = prompt('Enter your marks :');

// check the condition
let result = (marks >= 40) ? 'pass' : 'fail';

console.log(`You ${result} the exam.`);

// program to check pass or fail

let marks = prompt('Enter your marks :');

// check the condition
let result = (marks >= 40) ? 'pass' : 'fail';

console.log(`You ${result} the exam.`);

Toán tử bậc ba được sử dụng thay cho if. khác

Trong JavaScript, một toán tử bậc ba có thể được sử dụng để thay thế một số loại câu lệnh if..else nhất định. Ví dụ,

Bạn có thể thay thế mã này

// check the age to determine the eligibility to vote
let age = 15;
let result;

if (age >= 18) {
      result = "You are eligible to vote.";
} else {
      result = "You are not eligible to vote yet.";
}

console.log(result);

với

// ternary operator to check the eligibility to vote
let age = 15;
let result =
    (age >= 18) ? "You are eligible to vote." : "You are not eligible to vote yet";
console.log(result);

Đầu ra của cả hai chương trình sẽ giống nhau

đầu ra

You are not eligible to vote yet.

Toán tử ternary lồng nhau

Bạn cũng có thể lồng một toán tử bậc ba làm biểu thức bên trong một toán tử bậc ba khác. Ví dụ,

// program to check if number is positive, negative or zero
let a = 3;
let result = (a >= 0) ? (a == 0 ? "zero" : "positive") : "negative";
console.log(`The number is ${result}.`);

đầu ra

The number is positive.

Ghi chú. Bạn nên cố gắng tránh các toán tử bậc ba lồng nhau bất cứ khi nào có thể vì chúng làm cho mã của bạn khó đọc

Toán tử điều kiện hoặc dấu chấm hỏi, được đại diện bởi một ?, là một trong những tính năng mạnh mẽ nhất trong JavaScript. Toán tử ? được sử dụng trong các câu điều kiện và khi được kết hợp với một ____29_______, có thể hoạt động như một sự thay thế nhỏ gọn cho các câu lệnh if...else

Nhưng có nhiều thứ hơn là bắt mắt. Có ba cách sử dụng chính của toán tử ?, hai trong số đó bạn có thể chưa từng sử dụng hoặc thậm chí chưa từng nghe đến. Hãy tìm hiểu về tất cả chúng một cách chi tiết

Ba cách sử dụng chính cho Dấu chấm hỏi (?) trong JavaScript

1. Toán tử bậc ba
2. Chuỗi tùy chọn
3. Kết hợp Nullish

Chúng ta sẽ xem xét chi tiết từng vấn đề này, bắt đầu với cách phổ biến nhất mà bạn sẽ thấy toán tử ? đang được sử dụng – như một toán tử bậc ba

1. Toán tử bậc ba

Thuật ngữ bộ ba có nghĩa là bao gồm ba mục hoặc bộ phận. Toán tử ? còn được gọi là toán tử bậc ba bởi vì, không giống như các toán tử khác như bằng nghiêm ngặt (

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

Bắt đầu với ?, chúng ta thêm một điều kiện ở bên trái và một giá trị ở bên phải để trả về khi điều kiện đúng. Sau đó, chúng tôi thêm dấu hai chấm (_______ 29 _______) theo sau là một giá trị để trả về nếu điều kiện sai

Toán tử bậc ba về cơ bản là một lối tắt cho câu lệnh if...else truyền thống

Hãy so sánh toán tử bậc ba với câu lệnh if...else dài hơn

Ở đây, toán tử bậc ba chỉ chiếm một dòng mã, trong khi if...else chiếm bảy dòng

Sử dụng một toán tử ternary hiệu quả hơn nhiều, phải không?

2. Chuỗi tùy chọn

Vào năm 2020, một tính năng mới tuyệt vời được gọi là Chuỗi tùy chọn đã được giới thiệu

Để hiểu cách nó hoạt động, hãy tưởng tượng kịch bản này

Giả sử bạn có mã gọi một thuộc tính đối tượng không tồn tại, điều này gây ra lỗi khi chạy. Điều này có thể là do giá trị bị thiếu hoặc không xác định trong cơ sở dữ liệu của bạn hoặc do API

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

Nhờ Chuỗi tùy chọn, bạn có thể chỉ cần chèn một ____27_______ giữa tên thuộc tính và khoảng thời gian giữa thuộc tính tiếp theo

Cùng với đó, nó sẽ chỉ trả về

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

Chuỗi tùy chọn thực sự là một tính năng thay đổi cuộc sống cho các nhà phát triển JavaScript

3. Kết hợp Nullish

Trong một số trường hợp, bạn phải đặt giá trị mặc định cho tên hoặc giá trị thuộc tính bị thiếu

Ví dụ: giả sử chúng ta đang tạo Ứng dụng thời tiết trong đó chúng ta đang tìm nạp nhiệt độ, độ ẩm, tốc độ gió, áp suất, thời gian mặt trời mọc và lặn cũng như hình ảnh thành phố. Chúng tôi đã nhập một địa điểm, chẳng hạn như Bangalore, nhưng vì lý do nào đó, hình ảnh của địa điểm đó không có trong cơ sở dữ liệu

Khi ứng dụng tìm nạp và hiển thị dữ liệu, hình ảnh sẽ trống, trông có vẻ xấu. Trong trường hợp đó, những gì chúng tôi có thể làm là đặt ảnh mặc định cho những thành phố không có ảnh, trong trường hợp của chúng tôi là Bangalore

Bằng cách này, khi ứng dụng hiển thị dữ liệu, hình ảnh mặc định sẽ ở đó cho các thành phố không có hình ảnh

Bạn có thể làm điều này bằng cách sử dụng toán tử ?0, được gọi là toán tử logic OR

Nhưng nếu bạn sử dụng ?0 để cung cấp một giá trị mặc định, bạn có thể gặp phải các hành vi không mong muốn nếu bạn coi một số giá trị là có thể sử dụng được (ví dụ: ?2 hoặc ?3)

Xem xét một kịch bản trong đó một biến có giá trị 0 hoặc một chuỗi rỗng. Nếu chúng tôi sử dụng (?0), nó sẽ được coi là không xác định hoặc NULL và trả về một số giá trị mặc định mà chúng tôi đã sửa

Thay vì toán tử logic OR (?0), bạn có thể sử dụng dấu chấm hỏi kép (?6) hoặc Nullish Coalescing

Hãy tìm hiểu với một ví dụ

const value1 = 0 || 'default string';
console.log(value1);


const value2 = '' || 1000;
console.log(value2);

Ở đây, chúng ta có '0' và 'chuỗi mặc định' trong giá trị biến1. Nếu chúng tôi đăng nhập giá trị của nó trong bảng điều khiển, chúng tôi sẽ nhận được 'chuỗi mặc định', điều này thật kỳ lạ. Thay vì chuỗi mặc định, chúng ta sẽ nhận được 0, vì 0 không phải là không xác định hoặc null. Vì vậy, '?0' không thực hiện được công việc ở đây

Tương tự, nó giống với value2

Nhưng nếu chúng ta thay thế '?0' bằng '?6', chúng ta sẽ nhận được 0 và một chuỗi rỗng, điều này thật tuyệt

Nullish Coalescing hoạt động chính xác như toán tử logic OR, ngoại trừ bạn sẽ nhận được giá trị bên phải khi giá trị bên trái là

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

Nói cách khác, ?6 chỉ cho phép các giá trị

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

Phần kết luận

Bây giờ, hy vọng bạn đã hiểu cách hoạt động của toán tử ? trong JavaScript. Trông thì đơn giản, nhưng lại là một trong những ký tự mạnh mẽ nhất trong ngôn tình. Nó cung cấp đường cú pháp theo ba cách tuyệt vời nhưng khác nhau

Hãy thử chúng và cho tôi biết nó diễn ra như thế nào

học tập vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Nishant Kumar

Tôi xây dựng các dự án để tìm hiểu cách hoạt động của mã. Và trong khi tôi không viết mã, tôi thích viết thơ và kể chuyện, chơi piano và nấu những bữa ăn ngon

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Bạn có thể sử dụng toán tử bậc ba trong đối tượng JavaScript không?

Làm cách nào để sử dụng toán tử bậc ba bên trong đối tượng trong JavaScript?

Sử dụng toán tử bậc ba trong JavaScript có tốt không?

Tôi có thể sử dụng ternary ở đâu?