Toán tử ternary bên trong đối tượng JavaScript

Trong quá trình làm việc của tôi, không có gì lạ khi tôi cần thêm các thuộc tính vào các đối tượng hoặc (có lẽ ít phổ biến hơn) vào các mảng một cách có điều kiện. Hãy nói về cách làm cả hai. Đây là đoạn mã tôi sẽ đề cập đến

const trueCondition = true;
const falseCondition = false;

const obj = {
  ...(trueCondition && { dogs: "woof" }),
  ...(falseCondition && { cats: "meow" }),
};

// { dogs: 'woof' }

const arr = [
  ...(trueCondition ? ["dog"] : []),
  ...(falseCondition ? ["cat"] : [])
];

// ['dog']

Đầu tiên, xác định một số điều

Nếu bạn đã quen thuộc với toán tử

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

2, toán tử bậc ba và cú pháp trải rộng,

Toán tử logic // expr1 && expr2 console.log(true && "hi"); // hi console.log(`abc` && "123"); // 123 console.log({} && "empty but valid"); // empty but valid console.log(false && "bye"); // false2 (AND)

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

2 là một toán tử logic. Các toán tử logic được sử dụng để “suy luận” về Booleans. Toán tử

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

2 là một trong ba toán tử có sẵn trong JavaScript (Không phải là tài liệu ở đây, nhưng để hoàn thiện — hai toán tử còn lại là toán tử

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

6 (OR) và toán tử

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

7 (kết hợp vô giá trị). )

Cách sử dụng

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

Nếu biểu thức đầu tiên (ở bên trái) là đúng (“được coi là đúng khi gặp trong ngữ cảnh Boolean”), hãy trả về biểu thức thứ hai (ở bên phải)

Nếu biểu thức đầu tiên là sai (“được coi là sai khi gặp trong ngữ cảnh Boolean”), hãy trả về biểu thức đầu tiên

đánh giá ngắn mạch

Biểu thức

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

2 được đánh giá từ trái sang phải. Nếu biểu thức đầu tiên là sai, thì biểu thức đầy đủ sẽ được đánh giá ngắn mạch thành biểu thức sai (có nghĩa là biểu thức thứ hai không bao giờ được đánh giá). Đây là thứ cho phép chúng tôi thực hiện những việc như truy cập an toàn các thuộc tính lồng nhau trên một đối tượng

const obj = {};

console.log(obj.first && obj.first.second);
// undefined

console.log(obj.first.second);
// TypeError: Cannot read property 'second' of undefined

Toán tử điều kiện (ba ngôi)

Toán tử bậc ba có thể được coi là một lối tắt cho câu lệnh

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

9. Nó được làm từ ba phần

• Một điều kiện theo sau bởi một dấu chấm hỏi (

  const obj = {};
  
  console.log(obj.first && obj.first.second);
  // undefined
  
  console.log(obj.first.second);
  // TypeError: Cannot read property 'second' of undefined

  0)
• Một biểu thức để thực hiện nếu điều kiện là đúng, theo sau là dấu hai chấm (

  const obj = {};
  
  console.log(obj.first && obj.first.second);
  // undefined
  
  console.log(obj.first.second);
  // TypeError: Cannot read property 'second' of undefined

  1)
• một biểu thức để thực hiện nếu điều kiện là sai

// condition ? exprIfTrue : exprIfFalse

Một ví dụ. Hai chức năng dưới đây thực hiện chính xác điều tương tự bằng cách sử dụng cú pháp khác nhau. Cái đầu tiên sử dụng logic

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

9 và cái thứ hai sử dụng một bộ ba

function getWelcomeMessage(isLoggedIn) {
  if (isLoggedIn) {
    return "Welcome!";
  } else {
    return "Please log in.";
  }
}

console.log(getWelcomeMessage(true));
// Welcome!

console.log(getWelcomeMessage(false));
// Please log in.

function getWelcomeMessageTernary(isLoggedIn) {
  return isLoggedIn ? "Welcome!" : "Please log in.";
}

console.log(getWelcomeMessageTernary(true));
// Welcome!

console.log(getWelcomeMessageTernary(false));
// Please log in.

Toán tử chênh lệch (const obj = {}; console.log(obj.first && obj.first.second); // undefined console.log(obj.first.second); // TypeError: Cannot read property 'second' of undefined3)

Cú pháp trải rộng có thể được sử dụng để mở rộng một lần lặp (như biểu thức mảng) hoặc mở rộng các thuộc tính đối tượng

Lan truyền một iterable

let myDogs = [`Riggins`, `Lyla`];
let parentsDogs = [`Ellie`, `Remi`];

const holidayDoghouse = [...myDogs, ...parentsDogs];
// [ 'Riggins', 'Lyla', 'Ellie', 'Remi' ]

Trải rộng thuộc tính đối tượng

let existingAnimals = {
  dogs: 2,
  cats: 4,
  donkeys: 2,
  horses: 2,
};

let newAnimals = {
  goats: 2,
};

const allAnimals = {
  ...existingAnimals,
  ...newAnimals,
};
// { dogs: 2, cats: 4, donkeys: 2, horses: 2, goats: 2 }

Nó có thể được sử dụng trên các lần lặp như một mảng hoặc một chuỗi. Nó mở rộng một iterable cho các phần tử riêng lẻ của nó

Thêm thuộc tính vào đối tượng một cách có điều kiện

Để thêm một thuộc tính vào một đối tượng một cách có điều kiện, chúng ta có thể sử dụng toán tử

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

2

const trueCondition = true;
const falseCondition = false;

const obj = {
  ...(trueCondition && { dogs: "woof" }),
  ...(falseCondition && { cats: "meow" }),
};

// { dogs: 'woof' }

Trong ví dụ trên, trong định nghĩa thuộc tính đầu tiên trên

const obj = {};

console.log(obj.first && obj.first.second);
// undefined

console.log(obj.first.second);
// TypeError: Cannot read property 'second' of undefined

5, biểu thức đầu tiên (

const obj = {};

console.log(obj.first && obj.first.second);
// undefined

console.log(obj.first.second);
// TypeError: Cannot read property 'second' of undefined

6) là đúng/trung thực, vì vậy biểu thức thứ hai được trả về, sau đó lan truyền vào đối tượng

Trong định nghĩa thuộc tính thứ hai, biểu thức đầu tiên (_______9_______7) là sai/sai, và do đó, biểu thức đầu tiên được trả về (và biểu thức thứ hai không bao giờ được đánh giá, do đoản mạch). Có vẻ hơi khó hiểu khi lan truyền một biểu thức giả tạo, nhưng kết quả là nó bị bỏ qua

const spreadFalsy = {
  ...false,
  ...null,
  ...undefined,
};

console.log(spreadFalsy);
// {}

Bạn không cần dấu ngoặc đơn khi đánh giá các biểu thức này, nhưng tôi thích chúng hơn, để làm rõ rằng thao tác trải rộng áp dụng cho kết quả của biểu thức đầy đủ

const trueCondition = true;
const falseCondition = false;

const withParentheses = {
  ...(trueCondition && { dogs: "woof" }),
  ...(falseCondition && { cats: "meow" }),
};

// { dogs: 'woof' }

const withoutParentheses = {
  ...trueCondition && { birds: "tweet" },
  ...falseCondition && { foxes: "???" },
};

// { birds: 'tweet' }

Thêm giá trị vào mảng theo điều kiện

Việc thêm một giá trị vào một mảng có điều kiện trông hơi khác một chút. Thay vì sử dụng toán tử

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

2, chúng ta sử dụng toán tử bậc ba

Không giống như ví dụ trải rộng đối tượng, nếu bạn cố gắng trải rộng trên một giá trị giả trong một mảng, bạn sẽ nhận được TypeError

// expr1 && expr2

console.log(true && "hi");
// hi

console.log(`abc` && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

0

Do đó chúng ta cần một ternary; . Sau đó (giả sử chúng tôi đã cung cấp chính xác hai lần lặp có thể) cả hai biểu thức được trả về có thể sẽ là lần lặp

Chúng ta có thể sử dụng toán tử bậc ba trong đối tượng trong 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?

Chúng ta có thể sử dụng toán tử bậc ba bên trong điều kiện không?

Chúng ta có thể sử dụng toán tử bậc ba lồng nhau trong JavaScript không?