JS : Object Destructuring
原本：const profile = {
firstName: "Oluwatobi",
lastName: "Sofela",
website: "yahoo.com"
};
const firstName = profile.firstName;
const lastName = profile.lastName;
const website = profile.website;
console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "yahoo.com"Object Destructuring :
const profile = {
firstName: "Oluwatobi",
lastName: "Sofela",
website: "yahoo.com"
};
const { firstName: firstName, lastName: lastName, website: website } = profile;
console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "yahoo.com"
簡化：
const profile = {
firstName: "Oluwatobi",
lastName: "Sofela",
website: "yahoo.com"
};
const { firstName, lastName, website } = profile;
console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "yahoo.com"
How to Use Object Destructuring When the Property’s Name Differs from That of the Variable
const profile = {
firstName: "Oluwatobi",
lastName: "Sofela",
website: "yahoo.com"
};
const { firstName: forename, lastName: surname, website: onlineSite } = profile;
console.log(forename); // "Oluwatobi"
console.log(surname); // "Sofela"
console.log(onlineSite); // "yahoo.com"
console.log(website); // "ReferenceError: website is not defined"注意最後兩個 console.log 的差別。
再一個例子：
const profile = {
lastName: { familyName: "Sofela" }
};
const { lastName: { familyName: surname } } = profile;
console.log(surname); // "Sofela"
How to Do Direct Object Destructuring
const { firstName, lastName, website } = {
firstName: "Oluwatobi",
lastName: "Sofela",
website: "yahoo.com"
};
console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "yahoo.com"
How to Use Object Destructuring While Separating Variable Declarations from Their Assignments
// Declare three variables:
let firstName, lastName, website;
// Extract values to the three variables above:
({ firstName, lastName, website } = {
firstName: "Oluwatobi",
lastName: "Sofela",
website: "yahoo.com"
});
// Invoke the three variables:
console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "yahoo.com"注意：Make sure that you encase the object destructuring assignment in parentheses. By so doing, the computer will know that the object destructuring is an object literal, not a block.
How to Use Object Destructuring to Assign the Rest of an Object to a Variable
const { firstName, ...otherInfo } = {
firstName: "Oluwatobi",
lastName: "Sofela",
website: "yahoo.com"
};
console.log(firstName); // "Oluwatobi"
console.log(otherInfo); // {lastName: "Sofela", website: "yahoo.com"}
預設：
const { firstName = "Tobi", website = "Yahoo" } = {
firstName: "Oluwatobi"
};
console.log(firstName); // "Oluwatobi"
console.log(website); // "Yahoo"
Swap 互換：
let firstName = "Oluwatobi";
let website = "Yahoo";
({ firstName, website } = {firstName: website, website: firstName});
console.log(firstName); // "Yahoo"
console.log(website); // "Oluwatobi"
How to Use Object Destructuring to Extract Values from Properties to a Function’s Parameters
// Define an object with two properties:
const profile = {
firstName: "Oluwatobi",
lastName: "Sofela",
};
// Define a function with one destructuring object containing two parameters:
function getUserBio({ firstName, lastName }) {
return `My name is ${firstName} ${lastName}.`;
}
// Invoke getUserBio while passing the profile object as an argument:
getUserBio(profile);
// The invocation above will return:
"My name is Oluwatobi Sofela."
頁:
[1]