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

創(chuàng)新互聯(lián)是一家專業(yè)從事成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)依托強(qiáng)大的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)！

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

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

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

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

目錄

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

1.需要對象分解

假設(shè)您要提取對象的某些屬性。在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兩次綁定，對于相同realName。

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

讓我們重構(gòu)上面的腳本，并應(yīng)用對象分解來訪問屬性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;

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

2.提取屬性

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

const { identifier } = expression;

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

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

const identifier = expression.identifier;

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

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

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

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

3.提取多個屬性

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

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

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

這是等效的代碼：

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創(chuàng)建2個變量name并realName分配相應(yīng)屬性hero.name和的值hero.realName。

4.默認(rèn)值

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

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

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

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

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

const { identifier = defaultValue } = expression;

哪里identifier是要訪問的屬性名稱，expression應(yīng)評估為一個對象。銷毀后，變量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.別名

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

const { identifier: aliasIdentifier } = expression;

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

等效代碼：

const aliasIdentifier = expression.identifier;

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

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

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

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

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

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

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

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

const { nestedObjectProp: { identifier } } = expression;

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

銷毀后，變量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'

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

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

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

const { [propName]: identifier } = expression;

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

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

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是一個對象分解，將變量賦給namevaluehero[prop]，其中prop是一個保存屬性名稱的變量。

8.銷毀后的物體

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

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

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

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

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

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

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

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

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

9.常見用例

9.1將屬性綁定到變量

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

對象解構(gòu)可以給變量賦值使用聲明const，let和var。甚至分配給一個已經(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)與對象解構(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)

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

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

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)建一個name保存name屬性值的變量。

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

網(wǎng)頁題目：在JavaScript中使用對象解構(gòu)的方法-創(chuàng)新互聯(lián)
地址分享：http://www.rwnh.cn/article48/dghihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站排名、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計、做網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)