Le maître résume comment utiliser la déstructuration d'objets en JavaScript

La colonne

JavaScript présente comment utiliser la déstructuration d'objets

Recommandations d'apprentissage gratuites associées : javascript(Vidéo)

La déstructuration d'objets est une fonctionnalité JavaScript utile qui extrait les propriétés d'un objet et les lie à des variables.

Mieux encore, la déstructuration d'objets peut extraire plusieurs propriétés dans une seule instruction, les propriétés sont accessibles à partir d'objets imbriqués et une valeur par défaut peut être définie si la propriété n'existe pas.

Dans cet article, j'expliquerai comment utiliser la décomposition d'objets en JavaScript.

Répertoire

1. Décomposition d'objet requise
2. Extraire les attributs
3. Extraire plusieurs attributs
4. . Extraire les attributs des objets imbriqués
7. Extraire les attributs de nom dynamique
8. Objets détruits
9. Cas d'utilisation courants
10. Résumé

1. Objet requis Décomposition

Supposons que vous souhaitiez extraire certaines propriétés d'un objet. Dans un environnement pré-ES2015, vous écririez le code suivant :

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

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

Propriété

valeur affectée à la variable

. Attribuez la même valeur hero.name à name. hero.realNamerealNameCette méthode pour accéder à une propriété et l'attribuer à une variable nécessite un code passe-partout. En écrivant

, il faut mentionner deux fois la

liaison, pour le même var name = hero.name. namerealNameC'est là que la syntaxe de déstructuration d'objets est utile : vous pouvez lire une propriété et attribuer sa valeur à une variable sans répéter le nom de la propriété. De plus, vous pouvez lire plusieurs propriétés du même objet dans une seule instruction !

Refactorisons le script ci-dessus et appliquons la décomposition d'objet pour accéder aux propriétés

et

 : name

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

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

realName est une allocation de destruction d'objet. Cette instruction définit les variables

et const { name, realName } = hero puis attribue leurs valeurs d'attribut name et realName en conséquence. hero.namehero.realNameComparez les deux méthodes d'accès aux propriétés de l'objet :

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

// is equivalent to:

const { name, realName } = hero;

Comme vous pouvez le voir, puisque les noms de propriété et les variables de l'objet ne sont pas répétés, la décomposition de l'objet est plus pratique.

2. Extraire les propriétés

La syntaxe de base pour la déstructuration d'objets est très simple :

const { identifier } = expression;

où

est le nom de la propriété à laquelle accéder, et

devrait être évalué comme un objet. Après destruction, la variable identifier contient la valeur de l'attribut. expressionidentifierVoici le code équivalent utilisant les accesseurs de propriété :

const identifier = expression.identifier;

Essayons la décomposition d'objets en pratique :

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

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

Cette instruction

définit une variable

, et initialise avec la valeur de la const { name } = heropropriété. namehero.name3. Extraire plusieurs propriétés

Pour diviser un objet en plusieurs propriétés, énumérez un nombre quelconque de propriétés et

ajoutez des virgules entre les deux :

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

, où , ...

sont les noms des propriétés auxquelles il faut accéder et identifier1 doit être évalué comme un objet. Après destruction, les variables identifierN…expression contiennent les valeurs d'attribut correspondantes. identifier1identifierNVoici le code équivalent :

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

Regardons à nouveau l'exemple de la première partie, où 2 propriétés sont extraites :

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

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

Créer 2 variables

et const { name, realName } = hero se voient attribuer les attributs name et valeurs realName correspondants. hero.namehero.realName 4. Valeur par défaut

Si l'objet déstructuré n'a pas les propriétés spécifiées dans l'affectation de déstructuration, la variable est affectée à

. Voyons comment ça se passe :

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

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

undefinedLa variable déstructurée est

car la propriété enemies n'existe pas undefined dans l'objet. enemieshero Heureusement, il est possible de définir une valeur par défaut si la propriété n'existe pas dans l'objet déstructuré. La syntaxe de base est la suivante :

const { identifier = defaultValue } = expression;

où

est le nom de la propriété à laquelle accéder et

doit être évalué comme un objet. Après destruction, la variable identifier contient la valeur de l'attribut, ou expression est affecté à la variable si l'attribut identifier n'existe pas. defaultValueidentifierVoici le code équivalent :

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

Changeons l'exemple de code précédent et utilisons la fonction de valeur par défaut :

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

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

Maintenant,

la variable au lieu de

. undefinedenemies5. Alias['Joker']

Si vous souhaitez créer des variables avec des noms et des propriétés différents, vous pouvez utiliser la fonction alias de décomposition d'objets.

const { identifier: aliasIdentifier } = expression;

est le nom de la propriété à laquelle accéder,

est le nom de la variable et

doit être évalué comme un objet. Après destruction, la variable identifier contient la valeur de l'attribut. aliasIdentifierexpressionCode équivalent : aliasIdentifier

const aliasIdentifier = expression.identifier;

Ceci est un exemple de fonctionnalité d'alias de décomposition d'objet :

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!