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ử
2, toán tử bậc ba và cú pháp trải rộ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
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"];
// false
2 [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
// 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ượngconst 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 [
0]const obj = {}; console.log[obj.first && obj.first.second]; // undefined console.log[obj.first.second]; // TypeError: Cannot read property 'second' of undefined
- 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 [
1]const obj = {}; console.log[obj.first && obj.first.second]; // undefined console.log[obj.first.second]; // TypeError: Cannot read property 'second' of undefined
- 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ộ bafunction 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 undefined
3]
const obj = {};
console.log[obj.first && obj.first.second];
// undefined
console.log[obj.first.second];
// TypeError: Cannot read property 'second' of undefined
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
2const 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ượngTrong đị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 baKhô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
0Do đó 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