在JavaScript中使用對(duì)象解構(gòu)的方法

這篇文章給大家分享的是有關(guān)在JavaScript中使用對(duì)象解構(gòu)的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

JavaScript欄目介紹如何使用對(duì)象解構(gòu)

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

更好的是，對(duì)象解構(gòu)可以在一個(gè)語句中提取多個(gè)屬性，可以從嵌套對(duì)象訪問屬性，并且可以設(shè)置默認(rèn)值（如果該屬性不存在）。

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

目錄

1.需要對(duì)象分解
2.提取屬性
3.提取多個(gè)屬性
4.默認(rèn)值
5.別名
6.從嵌套對(duì)象中提取屬性
7.提取動(dòng)態(tài)名稱屬性
8.銷毀后的物體
9.常見用例
10.總結(jié)

1.需要對(duì)象分解

假設(shè)您要提取對(duì)象的某些屬性。在ES2015之前的環(huán)境中，您需要編寫以下代碼：

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兩次綁定，對(duì)于相同realName。

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

讓我們重構(gòu)上面的腳本，并應(yīng)用對(duì)象分解來訪問屬性name和realName：

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

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

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

比較兩種訪問對(duì)象屬性的方法：

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

// is equivalent to:

const { name, realName } = hero;

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

2.提取屬性

對(duì)象解構(gòu)的基本語法非常簡單：

const { identifier } = expression;

哪里identifier是要訪問的屬性名稱，expression應(yīng)評(píng)估為一個(gè)對(duì)象。銷毀后，變量identifier包含屬性值。

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

const identifier = expression.identifier;

讓我們?cè)趯?shí)踐中嘗試對(duì)象分解：

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

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

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

3.提取多個(gè)屬性

要將對(duì)象分解為多個(gè)屬性，請(qǐng)枚舉任意數(shù)量的屬性，并,在之間添加逗號(hào)：

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

其中identifier1，…identifierN是要訪問的屬性的名稱，expression應(yīng)評(píng)估為對(duì)象。銷毀后，變量identifier1…identifierN包含相應(yīng)的屬性值。

這是等效的代碼：

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

讓我們?cè)俅慰匆幌碌谝徊糠种械氖纠?，其中提取?個(gè)屬性：

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

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

const { name, realName } = hero創(chuàng)建2個(gè)變量name并realName分配相應(yīng)屬性hero.name和的值hero.realName。

4.默認(rèn)值

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

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

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

解構(gòu)后的變量enemies是undefined因?yàn)樵搶傩?code>enemies在對(duì)象中不存在hero。

幸運(yùn)的是，如果該屬性在解構(gòu)對(duì)象中不存在，則可以設(shè)置默認(rèn)值?；菊Z法如下：

const { identifier = defaultValue } = expression;

哪里identifier是要訪問的屬性名稱，expression應(yīng)評(píng)估為一個(gè)對(duì)象。銷毀后，變量identifier包含屬性值，或者defaultValue如果identifier屬性不存在則分配給變量。

這是等效的代碼：

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

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

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

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

現(xiàn)在，undefined該變量enemies默認(rèn)為，而不是['Joker']。

5.別名

如果要?jiǎng)?chuàng)建名稱與屬性不同的變量，則可以使用對(duì)象分解的別名功能。

const { identifier: aliasIdentifier } = expression;

identifier是要訪問的屬性的名稱，aliasIdentifier是變量的名稱，expression應(yīng)評(píng)估為對(duì)象。銷毀后，變量aliasIdentifier包含屬性值。

等效代碼：

const aliasIdentifier = expression.identifier;

這是一個(gè)對(duì)象分解別名功能的示例：

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

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

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

6.從嵌套對(duì)象中提取屬性

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

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

在這種情況下，您仍然可以從深處使用對(duì)象分解和訪問屬性。基本語法如下：

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp是保存嵌套對(duì)象的屬性的名稱。identifier是要從嵌套對(duì)象訪問的屬性名稱。expression應(yīng)該評(píng)估變形后的對(duì)象。

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

上面的語法等效于：

const identifier = expression.nestedObjectProp.identifier;

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

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

例如，對(duì)象hero包含一個(gè)嵌套對(duì)象{ city: 'Gotham'}。

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

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

通過對(duì)象解構(gòu)，const { address: { city } } = hero您可以city從嵌套對(duì)象訪問屬性。

7.提取動(dòng)態(tài)名稱屬性

您可以將具有動(dòng)態(tài)名稱的屬性提取到變量中（屬性名稱在運(yùn)行時(shí)是已知的）：

const { [propName]: identifier } = expression;

propNameexpression應(yīng)該計(jì)算為屬性名稱（通常是字符串），并且identifier應(yīng)該指示在解構(gòu)之后創(chuàng)建的變量名稱。第二個(gè)expression應(yīng)該評(píng)估要分解的對(duì)象。

沒有對(duì)象分解的等效代碼：

const identifier = expression[propName];

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

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

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

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

8.銷毀后的物體

rest語法對(duì)于在解構(gòu)之后收集其余屬性很有用：

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

哪里identifier是要訪問的屬性名稱，expression應(yīng)評(píng)估為一個(gè)對(duì)象。

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

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

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

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

破壞const { name, ...realHero } = hero提取財(cái)產(chǎn)name。

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

9.常見用例

9.1將屬性綁定到變量

如之前的許多示例所示，對(duì)象解構(gòu)將屬性值綁定到變量。

對(duì)象解構(gòu)可以給變量賦值使用聲明const，let和var。甚至分配給一個(gè)已經(jīng)存在的變量。

例如，以下是使用let語句解構(gòu)的方法：

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

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

如何使用var語句來破壞結(jié)構(gòu)：

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

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

以及如何解構(gòu)為已聲明的變量：

// existing variable
let name;

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

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

我發(fā)現(xiàn)將for..of循環(huán)與對(duì)象解構(gòu)相結(jié)合以立即提取屬性是令人滿意的：

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

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

9.2功能參數(shù)解構(gòu)

通常，對(duì)象分解可以放置在發(fā)生分配的任何位置。

例如，您可以在函數(shù)的參數(shù)列表內(nèi)破壞對(duì)象：

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

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

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

function({ name })解構(gòu)函數(shù)參數(shù)，創(chuàng)建一個(gè)name保存name屬性值的變量。

感謝各位的閱讀！關(guān)于在JavaScript中使用對(duì)象解構(gòu)的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！