什麼是解構？

解構是 JavaScript 中一個非常酷的特殊語法功能，它允許我們從陣列、物件或其他可迭代結構中提取值並將它們指派給變數。

這是一種存取資料結構的屬性或元素的簡寫方式，而無需使用點表示法或陣列索引。

它對我們（用 JavaScript 寫程式的人）有什麼好處？

解構有幾個好處，可以讓我們的程式碼更加簡潔、可讀和可維護！

• 提高可讀性：解構透過減少複雜變數賦值和點符號的需要來簡化程式碼。

• 更少的樣板程式碼：您可以直接從資料結構中提取值，而無需建立中間變數。

• 更簡潔的程式碼：解構可以減少實現相同結果所需的程式碼行數。

• 靈活性：您可以解構任何類型的資料結構（物件、陣列、迭代），使其成為 JavaScript 工具包中的多功能工具。

有效的解構🚀使我們能夠編寫更具表現力、可維護性和高效性的程式碼，並且更容易理解和除錯。

基本範例

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // "John"
console.log(age); // 30

在這裡，我們解構了一個具有兩個屬性的物件person ： name和age 。

解構 JavaScript 物件時，我們提取的值必須與物件中的鍵完全相同。您不能將userName取代該行中的name

const { name, age } = person; 。這只是意味著 - const { userName, age } = person;行不通的。

但是，是的！我們可以在解構物件時套用別名。

EG-

const person = { name: 'John', age: 30 };
const { name:userName, age:userAge } = person;
console.log(userName); // "John"
console.log(userAge); // 30

您很可能在導入模組時第一次看到物件的解構。例如，當導入 exec 函數時 -

import { exec } from "node:child_process"; // ES Module syntax

const { exec } = require("child_process"); // commonJS syntax

同樣，我們也可以解構陣列-

const numbers = [4, 5, 6];
const [x, y, z] = numbers;
console.log(x); // 4
console.log(y); // 5
console.log(z); // 6

在這裡，當解構陣列時，您不需要使用別名將任何元素指派給自訂變數名稱。因為陣列元素只是值，所以它們不與某些鍵綁定。

預設值

如果物件中不存在屬性，則解構允許您為變數指派預設值。

const person = { name: 'John' };
const { name = 'Anonymous', age } = person; // age will be undefined
console.log(name); // "John"
console.log(age); // undefined

這裡，字串值'John'沒有被變數name中的值'Anonymous'替換，因為它已經存在於物件中。

然而 -

const person = { name: 'John' };
const { name, age = 30 } = person; // age defaults to 30 if not present
console.log(name); // "John"
console.log(age); // 30

傳播文法

擴展語法或運算子(...)可以與解構一起使用，以將陣列的剩餘元素或物件的屬性捕獲到新變數中。

• 使用陣列的擴充語法 -

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first);  // 1
console.log(second); // 2
console.log(rest);    // [3, 4, 5] (remaining elements)

• 物件的擴展語法 -

const person = { name: 'John', age: 30, city: 'New York' };
const { name, ...info } = person;
console.log(name);  // "John"
console.log(info);   // { age: 30, city: "New York"} (remaining properties)

嵌套解構

解構可以嵌套以從深度嵌套的物件或陣列中提取值。

const data = {
  user: {
    name: 'Alicia',
    origin: 'Romania',
    eyes: 'blue',
    address: {
      city: 'London',
    }
  }
};

const { user: { name, address: { city } } } = data;
console.log(name);  // "Alicia"
console.log(city);   // "London"

函數參數列表中的解構

假設我們有一個名為credentials的JavaScript物件 -

const credentials = {
  name: 'Debajyati',
  age: 20,
  address: {
    city: 'Kolkata',
    state: 'West Bengal',
    country: 'India'
  },
  phone: '',
  email: '',
  hobbies: ['reading', 'listening to music', 'coding', 'watching Anime'],
  skills: {
    programming: true,
    blogging: true,
    singing: false
  }
}

名為showCredentials的函數只接受 1 個參數值，該參數值是一個物件，而 Standard 會根據某些物件屬性輸出一個字串。

好吧，我們可以這樣寫函數定義 -

function showCredential(obj) {
  const hasSkill = (skill) => obj.skills[skill];
  console.log(
    `${obj.name} is ${obj.age} years old.\n Lives in ${obj.address.city}, ${obj.address.country}.\n`,
    `He has the following hobbies: ${obj.hobbies.join(", ")}`,
  );
  if (hasSkill("programming")) {
    console.log(`He is a programmer.`);
  }
  if (hasSkill("singing")) {
    console.log(`He is a singer.`);
  }
  if (hasSkill("blogging")) {
    console.log(`He is also a tech blogger.`);
  }
}

用 - 來呼叫它

showCredential(credentials);

得到這個輸出 -

Debajyati is 20 years old.
 Lives in Kolkata, India.
 He has the following hobbies: reading, listening to music, coding, watch
ing Anime
He is a programmer.
He is also a tech blogger.

相反，我們可以在定義函數時解構參數清單中的物件參數。像這樣 -

function showCredential({ name, age, address: { city, country}, hobbies, skills }) {
  const hasSkill = (skill) => skills[skill];
  console.log(
    `${name} is ${age} years old.\n Lives in ${city}, ${country}.\n`,
    `He has the following hobbies: ${hobbies.join(", ")}`,
  );
  if (hasSkill("programming")) {
    console.log(`He is a programmer.`);
  }
  if (hasSkill("singing")) {
    console.log(`He is a singer.`);
  }
  if (hasSkill("blogging")) {
    console.log(`He is also a tech blogger.`);
  }
}

給出相同的輸出。

>

| :資訊來源: 注意|

|----------------------------------------|

函數仍然只接受一個參數。解構不會增加函數參數清單中的參數數量。

此外，呼叫該函數也沒有改變。依然是——

showCredential(credentials);

那麼，為什麼要解構函數參數列表中的物件呢？

雖然函數參數清單中的解構一開始可能看起來很麻煩或乏味，但它有非常重要的好處。

需要考慮的要點

• 更安全的程式碼：

解構可以清楚地表明函數需要哪些屬性，有助於防止錯誤。如果傳遞的物件中缺少屬性，解構將導致函數執行期間出現錯誤，有助於及早發現潛在問題。

• 減少冗長：

透過直接將屬性提取到參數清單中的變數中，可以避免使用點表示法重複存取物件屬性。這導致函數定義更清晰、更簡潔。

• 注重功能：

透過在參數清單中進行解構，您可以將資料存取邏輯與函數的核心功能分開。這改進了程式碼組織並使函數的目的更加清晰。

解構字串

就像我們如何解構陣列一樣，我們也可以將字串解包為陣列元素。巧妙地運用我們的智慧。

const fruit = 'grape';
const [first, second, ...rest] = fruit;
const animal = rest.join('');
console.log(animal); // ape

| ：警告：記住！

|------------------------|

當您使用展開運算子(...)捕獲字串中的剩餘字元時，您不會得到字串。您將會得到這些字元的陣列。

解構的一些方便的應用範例

• 沒有第三個變數的交換解構：

JavaScript 傳統上需要一個臨時變數來交換兩個變數的值。解構提供了一種更簡潔、更易讀的方式來實現這一目標。

- Before Destructuring: 

        let a = 10;
        let b = 20;

        let temp = a;
        a = b;
        b = temp;
        console.log(a, b); // Output: 20 10

- After Destructuring:

        let a = 10;
        let b = 20;

        [a, b] = [b, a];

        console.log(a, b); // Output: 20 10

 So nifty & elegant✨! Isn't it?

• 解構函數傳回值：函數可以以陣列或物件的形式傳回多個值。解構允許您將這些返回值解包到單獨的變數中，從而提高程式碼清晰度。

假設您有一個從 API 取得資料並傳回回應物件的函數：

    function getUserUpdates(id) {
      // Simulating some API call with a GET request
      return {
        data: {
          player: response.group.names[id],
          brain: "rotting",
          powerLevel: Number(response.group.power[id]),
          useAsDecoy: true,
        },
        statusCode: Number(response.status),
      };
    }

在建立 API 或處理伺服器回應的上下文中，它提供了增強程式碼品質和可維護性的獨特優勢。

存取各個屬性將變得輕而易舉，因為您可以在函數呼叫本身期間直接將所需的屬性從函數的返回值提取到單獨的變數中。

const {
  data: {player, useAsDecoy, powerLevel},
  statusCode,
} = getUserUpdates(1);

每當函數傳回物件並且您對特定屬性值感興趣時，請始終立即套用解構。

如果您仍然認為返回值的解構不是一個好主意，那麼這另外兩個優點可能會說服您 -

(A)簡化的心智模型：解構簡化了將使用您的函數的開發人員理解資料流所需的思考過程。開發人員可以專注於解構模式中使用的變數名稱所傳達的含義，而不是記住複雜的屬性存取鏈。這減少了認知負擔並促進更好的程式碼理解。

(B)簡化複雜回傳物件的樣板程式碼：

當函數傳回具有大量或嵌套屬性的物件時，解構會顯著減少單獨存取它們所需的樣板程式碼。這使得程式碼庫更加簡潔、更簡潔，從而提高了整體程式碼品質。

• 帶條件的解構：解構可以與條件語句結合起來，根據物件的結構來處理不同的場景。如果您有一個接收具有可選屬性的物件的函數：

    function greetUser(user) {
      const { name = "Anonymous" } = user || {}; // Destructuring with default value

      console.log(`Hello, ${name}!`);
    }

    greetUser({ name: "Bob" });       // Output: "Hello, Bob!"
    greetUser({});                    // Output: "Hello, Anonymous!" (no name property)
    greetUser(undefined);           // Output: "Hello, Anonymous!" (function receives no argument)

結論

在整篇文章中，我們了解到「解構」是 JavaScript 中一個強大且多功能的功能，可以顯著提高程式碼的可讀性、可維護性和效率。透過有效地使用解構技術，您可以編寫更乾淨、更簡潔且不易出錯的程式碼。因此，擁抱解構並將您的 JavaScript 技能提升到一個新的水平！

如果您發現這篇文章有幫助，如果這個部落格為您的時間和精力增加了一些價值，請透過給這篇文章點讚來表達一些愛，並與您的朋友分享。

請隨時透過Twitter 、 LinkedIn或GitHub與我聯繫:)

快樂編碼🧑🏽‍💻👩🏽‍💻！祝你有個美好的一天！ 🚀

原文出處：https://dev.to/ddebajyati/exploring-destructuring-in-javascript-5a24