在JavaScript中使用對象解構的方法

這篇文章給大家分享的是有關在JavaScript中使用對象解構的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

JavaScript欄目介紹如何使用對象解構

對象解構是一種有用的JavaScript功能，可以從對象中提取屬性并將其綁定到變量。

更好的是，對象解構可以在一個語句中提取多個屬性，可以從嵌套對象訪問屬性，并且可以設置默認值（如果該屬性不存在）。

在這篇文章中，我將解釋如何在JavaScript中使用對象分解。

目錄

1.需要對象分解
2.提取屬性
3.提取多個屬性
4.默認值
5.別名
6.從嵌套對象中提取屬性
7.提取動態名稱屬性
8.銷毀后的物體
9.常見用例
10.總結

1.需要對象分解

假設您要提取對象的某些屬性。在ES2015之前的環境中，您需要編寫以下代碼：

var hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

var name     = hero.name;var realName = hero.realName;
name;     // => 'Batman',
realName; // => 'Bruce Wayne'

屬性hero.name值已分配給變量name。將相同的hero.realName值分配給realName。

這種訪問屬性并將其分配給變量的方法需要樣板代碼。通過編寫var name = hero.name，您必須提及name兩次綁定，對于相同realName。

這就是對象解構語法有用的地方：您可以讀取屬性并將其值分配給變量，而無需重復屬性名稱。不僅如此，您還可以在一個語句中讀取同一對象的多個屬性！

讓我們重構上面的腳本，并應用對象分解來訪問屬性name和realName：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, realName } = hero;
name;     // => 'Batman',
realName; // => 'Bruce Wayne'

const { name, realName } = hero是對象銷毀分配。這個語句定義變量name和realName，然后分配給他們的屬性值hero.name和hero.realNamecorrespondigly。

比較兩種訪問對象屬性的方法：

const name     = hero.name;
const realName = hero.realName;

// is equivalent to:

const { name, realName } = hero;

可以看到，由于屬性名稱和對象變量都沒有重復，因此對象的分解更加方便。

2.提取屬性

對象解構的基本語法非常簡單：

const { identifier } = expression;

哪里identifier是要訪問的屬性名稱，expression應評估為一個對象。銷毀后，變量identifier包含屬性值。

這是使用屬性訪問器的等效代碼：

const identifier = expression.identifier;

讓我們在實踐中嘗試對象分解：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name } = hero;
name; // => 'Batman'

該語句const { name } = hero定義變量name，并使用hero.nameproperty的值對其進行初始化。

3.提取多個屬性

要將對象分解為多個屬性，請枚舉任意數量的屬性，并,在之間添加逗號：

const { identifier1, identifier2, ..., identifierN } = expression;

其中identifier1，…identifierN是要訪問的屬性的名稱，expression應評估為對象。銷毀后，變量identifier1…identifierN包含相應的屬性值。

這是等效的代碼：

const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;

讓我們再次看一下第一部分中的示例，其中提取了2個屬性：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, realName } = hero;
name;     // => 'Batman',
realName; // => 'Bruce Wayne'

const { name, realName } = hero創建2個變量name并realName分配相應屬性hero.name和的值hero.realName。

4.默認值

如果已解構的對象不具有在解構分配中指定的屬性，則將變量分配給undefined。讓我們看看它是如何發生的：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { enemies } = hero;
enemies;     // => undefined

解構后的變量enemies是undefined因為該屬性enemies在對象中不存在hero。

幸運的是，如果該屬性在解構對象中不存在，則可以設置默認值?；菊Z法如下：

const { identifier = defaultValue } = expression;

哪里identifier是要訪問的屬性名稱，expression應評估為一個對象。銷毀后，變量identifier包含屬性值，或者defaultValue如果identifier屬性不存在則分配給變量。

這是等效的代碼：

const identifier = expression.identifier === undefined ? 
        defaultValue : expression.identifier;

讓我們更改先前的代碼示例，并使用默認值功能：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { enemies = ['Joker'] } = hero;
enemies;     // => ['Joker']

現在，undefined該變量enemies默認為，而不是['Joker']。

5.別名

如果要創建名稱與屬性不同的變量，則可以使用對象分解的別名功能。

const { identifier: aliasIdentifier } = expression;

identifier是要訪問的屬性的名稱，aliasIdentifier是變量的名稱，expression應評估為對象。銷毀后，變量aliasIdentifier包含屬性值。

等效代碼：

const aliasIdentifier = expression.identifier;

這是一個對象分解別名功能的示例：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { realName: secretName } = hero;
secretName; // => 'Bruce Wayne'

看一下const { realName: secretName } = hero，解構定義了一個新變量secretName（別名變量），并為其分配了值hero.realName。

6.從嵌套對象中提取屬性

在前面的示例中，對象很簡單：屬性具有原始數據類型（例如字符串）。

通常，對象可以嵌套在其他對象中。換句話說，某些屬性可以包含對象。

在這種情況下，您仍然可以從深處使用對象分解和訪問屬性?；菊Z法如下：

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp是保存嵌套對象的屬性的名稱。identifier是要從嵌套對象訪問的屬性名稱。expression應該評估變形后的對象。

銷毀后，變量identifier包含嵌套對象的屬性值。

上面的語法等效于：

const identifier = expression.nestedObjectProp.identifier;

您可以從中提取屬性的嵌套級別不受限制。如果要從深處提取屬性，只需添加更多嵌套的花括號：

const { propA: { propB: { propC: { .... } } } } = object;

例如，對象hero包含一個嵌套對象{ city: 'Gotham'}。

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne',
  address: {
    city: 'Gotham'
  }
};

// Object destructuring:
const { address: { city } } = hero;
city; // => 'Gotham'

通過對象解構，const { address: { city } } = hero您可以city從嵌套對象訪問屬性。

7.提取動態名稱屬性

您可以將具有動態名稱的屬性提取到變量中（屬性名稱在運行時是已知的）：

const { [propName]: identifier } = expression;

propNameexpression應該計算為屬性名稱（通常是字符串），并且identifier應該指示在解構之后創建的變量名稱。第二個expression應該評估要分解的對象。

沒有對象分解的等效代碼：

const identifier = expression[propName];

讓我們看一個prop包含屬性名稱的示例：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const prop = 'name';
const { [prop]: name } = hero;
name; // => 'Batman'

const { [prop]: name } = hero是一個對象分解，將變量賦給namevalue hero[prop]，其中prop是一個保存屬性名稱的變量。

8.銷毀后的物體

rest語法對于在解構之后收集其余屬性很有用：

const { identifier, ...rest } = expression;

哪里identifier是要訪問的屬性名稱，expression應評估為一個對象。

銷毀后，變量identifier包含屬性值。rest變量是具有其余屬性的普通對象。

例如，讓我們提取屬性name，但保留其余屬性：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, ...realHero } = hero;
realHero; // => { realName: 'Bruce Wayne' }

破壞const { name, ...realHero } = hero提取財產name。

同時，剩余的屬性（realName在這種情況下）被收集到變量realHero：中{ realName: 'Bruce Wayne' }。

9.常見用例

9.1將屬性綁定到變量

如之前的許多示例所示，對象解構將屬性值綁定到變量。

對象解構可以給變量賦值使用聲明const，let和var。甚至分配給一個已經存在的變量。

例如，以下是使用let語句解構的方法：

// let
const hero = {
  name: 'Batman',
};

let { name } = hero;
name; // => 'Batman'

如何使用var語句來破壞結構：

// var
const hero = {
  name: 'Batman',
};

var { name } = hero;
name; // => 'Batman'

以及如何解構為已聲明的變量：

// existing variable
let name;

const hero = {
  name: 'Batman',
};

({ name } = hero);
name; // => 'Batman'

我發現將for..of循環與對象解構相結合以立即提取屬性是令人滿意的：

const heroes = [
  { name: 'Batman' },
  { name: 'Joker' }
];

for (const { name } of heroes) {  console.log(name); // logs 'Batman', 'Joker'
}

9.2功能參數解構

通常，對象分解可以放置在發生分配的任何位置。

例如，您可以在函數的參數列表內破壞對象：

const heroes = [
  { name: 'Batman' },
  { name: 'Joker' }
];

const names = heroes.map(
  function({ name }) {    return name;
  }
);

names; // => ['Batman', 'Joker']

function({ name })解構函數參數，創建一個name保存name屬性值的變量。

感謝各位的閱讀！關于在JavaScript中使用對象解構的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！