JS : Object Destructuring

admin

原本：

1. const profile = {
   
2.   firstName: "Oluwatobi",
   
3.   lastName: "Sofela",
   
4.   website: "yahoo.com"
   
5. };
   
6. 
   
7. const firstName = profile.firstName;
   
8. const lastName = profile.lastName;
   
9. const website = profile.website;
   
10. 
    
11. console.log(firstName); // "Oluwatobi"
    
12. console.log(lastName); // "Sofela"
    
13. console.log(website); // "yahoo.com"

複製代碼

Object Destructuring :

1. const profile = {
   
2.   firstName: "Oluwatobi",
   
3.   lastName: "Sofela",
   
4.   website: "yahoo.com"
   
5. };
   
6. 
   
7. const { firstName: firstName, lastName: lastName, website: website } = profile;
   
8. 
   
9. console.log(firstName); // "Oluwatobi"
   
10. console.log(lastName); // "Sofela"
    
11. console.log(website); // "yahoo.com"

複製代碼

admin

簡化：

1. const profile = {
   
2.   firstName: "Oluwatobi",
   
3.   lastName: "Sofela",
   
4.   website: "yahoo.com"
   
5. };
   
6. 
   
7. const { firstName, lastName, website } = profile;
   
8. 
   
9. console.log(firstName); // "Oluwatobi"
   
10. console.log(lastName); // "Sofela"
    
11. console.log(website); // "yahoo.com"

複製代碼

admin

How to Use Object Destructuring When the Property’s Name Differs from That of the Variable

1. const profile = {
   
2.   firstName: "Oluwatobi",
   
3.   lastName: "Sofela",
   
4.   website: "yahoo.com"
   
5. };
   
6. 
   
7. const { firstName: forename, lastName: surname, website: onlineSite } = profile;
   
8. 
   
9. console.log(forename); // "Oluwatobi"
   
10. console.log(surname); // "Sofela"
    
11. console.log(onlineSite); // "yahoo.com"
    
12. console.log(website); // "ReferenceError: website is not defined"

複製代碼

注意最後兩個 console.log 的差別。

admin

再一個例子：

1. const profile = {
   
2.   lastName: { familyName: "Sofela" }
   
3. };
   
4. 
   
5. const { lastName: { familyName: surname } } = profile;
   
6. 
   
7. console.log(surname); // "Sofela"

複製代碼

admin

How to Do Direct Object Destructuring

1. const { firstName, lastName, website } = {
   
2.   firstName: "Oluwatobi",
   
3.   lastName: "Sofela",
   
4.   website: "yahoo.com"
   
5. };
   
6. 
   
7. console.log(firstName); // "Oluwatobi"
   
8. console.log(lastName); // "Sofela"
   
9. console.log(website); // "yahoo.com"

複製代碼

admin

How to Use Object Destructuring While Separating Variable Declarations from Their Assignments

1. // Declare three variables:
   
2. let firstName, lastName, website;
   
3. 
   
4. // Extract values to the three variables above:
   
5. ({ firstName, lastName, website } = {
   
6.   firstName: "Oluwatobi",
   
7.   lastName: "Sofela",
   
8.   website: "yahoo.com"
   
9. });
   
10. 
    
11. // Invoke the three variables:
    
12. console.log(firstName); // "Oluwatobi"
    
13. console.log(lastName); // "Sofela"
    
14. 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.

admin

How to Use Object Destructuring to Assign the Rest of an Object to a Variable

1. const { firstName, ...otherInfo } = {
   
2.   firstName: "Oluwatobi",
   
3.   lastName: "Sofela",
   
4.   website: "yahoo.com"
   
5. };
   
6. 
   
7. console.log(firstName); // "Oluwatobi"
   
8. console.log(otherInfo); // {lastName: "Sofela", website: "yahoo.com"}

複製代碼

admin

預設：

1. const { firstName = "Tobi", website = "Yahoo" } = {
   
2.   firstName: "Oluwatobi"
   
3. };
   
4. 
   
5. console.log(firstName); // "Oluwatobi"
   
6. console.log(website); // "Yahoo"

複製代碼

admin

Swap 互換：

1. let firstName = "Oluwatobi";
   
2. let website = "Yahoo";
   
3. 
   
4. ({ firstName, website } = {firstName: website, website: firstName});
   
5. 
   
6. console.log(firstName); // "Yahoo"
   
7. console.log(website); // "Oluwatobi"

複製代碼

admin

How to Use Object Destructuring to Extract Values from Properties to a Function’s Parameters

1. // Define an object with two properties:
   
2. const profile = {
   
3.   firstName: "Oluwatobi",
   
4.   lastName: "Sofela",
   
5. };
   
6. 
   
7. // Define a function with one destructuring object containing two parameters:
   
8. function getUserBio({ firstName, lastName }) {
   
9.   return `My name is ${firstName} ${lastName}.`;
   
10. }
    
11. 
    
12. // Invoke getUserBio while passing the profile object as an argument:
    
13. getUserBio(profile);
    
14. 
    
15. // The invocation above will return:
    
16. "My name is Oluwatobi Sofela."

複製代碼