Der Master fasst zusammen, wie die Objektdestrukturierung in JavaScript verwendet wird

Die Spalte „JavaScript“ stellt die Verwendung der Objektdestrukturierung vor. Verwandte kostenlose Lernempfehlungen: „Javascript“ (Video) „Objektdestrukturierung“ ist eine nützliche JavaScript-Funktion, die Objekte extrahieren kann von Objekte extrahieren Eigenschaften und binden sie an Variablen.

Noch besser ist, dass durch die Objektdestrukturierung mehrere Eigenschaften in einer einzigen Anweisung extrahiert werden können, auf Eigenschaften aus verschachtelten Objekten zugegriffen werden kann und Standardwerte festgelegt werden können, wenn die Eigenschaft nicht vorhanden ist.

In diesem Artikel erkläre ich, wie man die Objektzerlegung in JavaScript verwendet.

Verzeichnis

1. Erfordert Objektzerlegung

3. Extrahieren Sie mehrere Attribute 5. Extrahieren Sie Attribute aus verschachtelten Objekten 8. Objekt nach Zerstörung9. Häufige Anwendungsfälle1. Objektzerlegung ist erforderlichAngenommen, Sie möchten einige Eigenschaften des Objekts extrahieren. In einer Umgebung vor ES2015 müssten Sie den folgenden Code schreiben:

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

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

Der Wert des Attributs hero.name wird der Variablen name zugewiesen. Weisen Sie realName denselben hero.realName-Wert zu.

Diese Methode, auf Eigenschaften zuzugreifen und sie Variablen zuzuweisen, erfordert Boilerplate-Code. Wenn Sie var name = hero.name schreiben, müssen Sie name zweimal in der Bindung für denselben realName erwähnen.

Hier ist die Objektdestrukturierungssyntax nützlich: Sie können eine Eigenschaft lesen und ihren Wert einer Variablen zuweisen, ohne den Eigenschaftsnamen zu wiederholen. Darüber hinaus können Sie mehrere Eigenschaften desselben Objekts in einer Anweisung lesen!

Lassen Sie uns das obige Skript umgestalten und die Objektzerlegung anwenden, um auf die Eigenschaften name und realName zuzugreifen:

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

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

const { name, realName } = hero ist Objektzerstörung und -zuordnung. Diese Anweisung definiert die Variablen <code>name und realName und weist dann ihren Eigenschaften Werte hero.name und hero.realName zu. code> entsprechend.

Vergleichen Sie zwei Methoden zum Zugriff auf Objekteigenschaften:

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

// is equivalent to:

const { name, realName } = hero;

Wie Sie sehen können, ist die Objektzerlegung bequemer, da weder Eigenschaftsnamen noch Objektvariablen wiederholt werden.

2. Eigenschaften extrahieren

Die grundlegende Syntax für die Objektdestrukturierung ist sehr einfach:

const { identifier } = expression;

wobei identifier der Name der Eigenschaft ist, auf die zugegriffen werden soll und expression ausgewertet werden soll zu einem Objekt. Nach der Zerstörung enthält die Variable identifier den Attributwert.
Dies ist der entsprechende Code, der Eigenschaftszugriffsmethoden verwendet:

const identifier = expression.identifier;

Lassen Sie uns die Objektzerlegung in der Praxis ausprobieren:

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

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

Die Anweisung const { name } = hero definiert die Variable name und initialisieren Sie es mit dem Wert der Eigenschaft <code>hero.name.

hero.name值已分配给变量name。将相同的hero.realName值分配给realName。

这种访问属性并将其分配给变量的方法需要样板代码。通过编写var name = hero.name，您必须提及name两次绑定，对于相同realName。

这就是对象解构语法有用的地方：您可以读取属性并将其值分配给变量，而无需重复属性名称。不仅如此，您还可以在一个语句中读取同一对象的多个属性！

让我们重构上面的脚本，并应用对象分解来访问属性name和realName：

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

const { name, realName } = hero是对象销毁分配。这个语句定义变量name和realName，然后分配给他们的属性值hero.name和hero.realNamecorrespondigly。

比较两种访问对象属性的方法：

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'

哪里identifier是要访问的属性名称，expression应评估为一个对象。销毁后，变量identifier包含属性值。

这是使用属性访问器的等效代码：

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

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

让我们在实践中尝试对象分解：

const { identifier = defaultValue } = expression;

该语句const { name } = hero定义变量name，并使用hero.nameproperty的值对其进行初始化。

3.提取多个属性

要将对象分解为多个属性，请枚举任意数量的属性，并,在之间添加逗号：

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

其中identifier1，…identifierN是要访问的属性的名称，expression应评估为对象。销毁后，变量identifier1…identifierN包含相应的属性值。

这是等效的代码：

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

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

让我们再次看一下第一部分中的示例，其中提取了2个属性：

const { identifier: aliasIdentifier } = expression;

const { name, realName } = hero创建2个变量name并realName分配相应属性hero.name和的值hero.realName。

4.默认值

如果已解构的对象不具有在解构分配中指定的属性，则将变量分配给undefined。让我们看看它是如何发生的：

const aliasIdentifier = expression.identifier;

解构后的变量enemies是undefined因为该属性enemies在对象中不存在hero。

幸运的是，如果该属性在解构对象中不存在，则可以设置默认值。基本语法如下：

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

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

哪里identifier是要访问的属性名称，expression应评估为一个对象。销毁后，变量identifier包含属性值，或者defaultValue如果identifier属性不存在则分配给变量。

这是等效的代码：

const { nestedObjectProp: { identifier } } = expression;

让我们更改先前的代码示例，并使用默认值功能：

const identifier = expression.nestedObjectProp.identifier;

现在，undefined该变量enemies默认为，而不是['Joker']。

5.别名

如果要创建名称与属性不同的变量，则可以使用对象分解的别名功能。

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

identifier是要访问的属性的名称，aliasIdentifier是变量的名称，expression应评估为对象。销毁后，变量aliasIdentifier3. Mehrere Eigenschaften extrahieren

Um das Objekt in mehrere Eigenschaften aufzuteilen, zählen Sie eine beliebige Anzahl von Eigenschaften auf und fügen Sie Kommas zwischen , ein:

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

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

wobei identifier1 , .. . identifierN ist der Name der Eigenschaft, auf die zugegriffen werden soll, und der expression sollte zu einem Objekt ausgewertet werden. Nach der Zerstörung enthalten die Variablen identifier1…identifierN die entsprechenden Attributwerte.

🎜Hier ist der entsprechende Code: 🎜

const { [propName]: identifier } = expression;

🎜Schauen wir uns noch einmal das Beispiel aus dem ersten Teil an, in dem 2 Eigenschaften extrahiert werden: 🎜

const identifier = expression[propName];

🎜const { name, realName } = hero Erstellen Sie 2 Variablen name und realName werden die entsprechenden Eigenschaften hero.name und der Wert von hero.realName zugewiesen. 🎜🎜4.Standard 🎜🎜Wenn das destrukturierte Objekt nicht über die in der Destrukturierungszuweisung angegebenen Eigenschaften verfügt, wird die Variable undefiniert zugewiesen. Mal sehen, wie es passiert: 🎜

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

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

🎜Die destrukturierte Variable enemies ist undefiniert, weil die Eigenschaft enemies im Objekt hero nicht existiert . 🎜🎜 Glücklicherweise ist es möglich, einen Standardwert festzulegen, wenn die Eigenschaft im destrukturierten Objekt nicht vorhanden ist. Die grundlegende Syntax lautet wie folgt: 🎜

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

🎜Wobei identifier der Name der Eigenschaft ist, auf die zugegriffen werden soll, und expression zu einem Objekt ausgewertet werden soll. Nach der Zerstörung enthält die Variable identifier den Attributwert, oder defaultValue wird der Variablen zugewiesen, wenn das Attribut identifier nicht vorhanden ist. 🎜🎜Dies ist der entsprechende Code: 🎜

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

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

🎜 Lassen Sie uns das vorherige Codebeispiel ändern und die Standardwertfunktion verwenden: 🎜

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

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

🎜 Jetzt undefiniert die Variable enemiesdefault für, statt ['Joker']. 🎜🎜5. Aliase 🎜🎜 Wenn Sie eine Variable mit einem anderen Namen als einem Attribut erstellen möchten, können Sie die Alias-Funktion der Objektzerlegung verwenden. 🎜

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

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

🎜identifier ist der Name der Eigenschaft, auf die zugegriffen werden soll, aliasIdentifier ist der Name der Variablen und expression sollte zu einem Objekt ausgewertet werden . Nach der Zerstörung enthält die Variable aliasIdentifier den Attributwert. 🎜🎜Äquivalenter Code: 🎜

// existing variable
let name;

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

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

🎜Hier ist ein Beispiel für die Alias-Funktionalität der Objektzerlegung: 🎜

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.总结

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

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

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

Das obige ist der detaillierte Inhalt vonDer Master fasst zusammen, wie die Objektdestrukturierung in JavaScript verwendet wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!