大神總結如何在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。

幸運的是，如果該屬性在解構物件中不存在，則可以設定預設值。基本語法如下：

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.从嵌套对象中提取属性

在前面的示例中，对象很简单：属性具有原始数据类型（例如字符串）。

通常，对象可以嵌套在其他对象中。换句话说，某些属性可以包含对象。

在这种情况下，您仍然可以从深处使用对象分解和访问属性。基本语法如下：

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属性值的变量。

10.总结

对象解构是一项强大的功能，可让您从对象中提取属性并将这些值绑定到变量。

我特别喜欢对象分解的简洁语法和在一条语句中提取多个变量的能力。

希望我的帖子对您了解对象分解的有用！

以上是大神總結如何在JavaScript中使用物件解構的詳細內容。更多資訊請關注PHP中文網其他相關文章！