JS : Array Destructuring

admin

原本寫法：

1. const profile = ["Oluwatobi", "Sofela", "google.com"];
   
2. 
   
3. const firstName = profile[0];
   
4. const lastName = profile[1];
   
5. const website = profile[2];
   
6. 
   
7. console.log(firstName); // "Oluwatobi"
   
8. console.log(lastName); // "Sofela"
   
9. console.log(website); // "google.com"

複製代碼

可以寫成：

1. const profile = ["Oluwatobi", "Sofela", "google.com"];
   
2. 
   
3. const [firstName, lastName, website] = profile;
   
4. 
   
5. console.log(firstName); // "Oluwatobi"
   
6. console.log(lastName); // "Sofela"
   
7. console.log(website); // "google.com"

複製代碼

admin

Direct Array Destructuring

1. const [firstName, lastName, website] = [
   
2.     "Oluwatobi",
   
3.     "Sofela",
   
4.     "google.com"
   
5. ];
   
6. 
   
7. console.log(firstName); // "Oluwatobi"
   
8. console.log(lastName); // "Sofela"
   
9. console.log(website); // "google.com"

複製代碼

admin

也可以：

1. let firstName, lastName, website;
   
2. 
   
3. [firstName, lastName, website] = ["Oluwatobi", "Sofela", "google.com"];
   
4. 
   
5. console.log(firstName); // "Oluwatobi"
   
6. console.log(lastName); // "Sofela"
   
7. console.log(website); // "google.com"

複製代碼

admin

How to Use Array Destructuring to Assign the Rest of an Array Literal to a Variable

1. const [firstName, ...otherInfo] = ["Oluwatobi", "Sofela", "google.com"];
   
2. 
   
3. console.log(firstName); // "Oluwatobi"
   
4. console.log(otherInfo); // ["Sofela", "google.com"]

複製代碼

admin

How to Use Array Destructuring to Extract Values at Any Index

1. const [, , website] = ["Oluwatobi", "Sofela", "google.com"];
   
2. 
   
3. console.log(website); // "google.com"

複製代碼

admin

How Default Values Work in an Array Destructuring Assignment

1. const [firstName = "Tobi", website = "Google"] = ["Oluwatobi"];
   
2. 
   
3. console.log(firstName); // "Oluwatobi"
   
4. console.log(website); // "Google"

複製代碼

admin

Swap 互換

1. let firstName = "Oluwatobi";
   
2. let website = "Google";
   
3. 
   
4. [firstName, website] = [website, firstName];
   
5. 
   
6. console.log(firstName); // "Google"
   
7. console.log(website); // "Oluwatobi"

複製代碼

admin

How to Use Array Destructuring to Extract Values from an Array to a Function’s Parameters

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

複製代碼