Qu'est-ce que la déconstruction?
La déconstruction est complètement opposée à la construction de données. Par exemple, au lieu de construire un nouvel objet ou un nouvel tableau, il divise l'objet ou le tableau existant un par un pour extraire les données dont vous avez besoin.
ES6 utilise un nouveau modèle pour correspondre aux valeurs numériques que vous souhaitez extraire, et l'affectation de déconstruction adopte ce modèle. Ce modèle mappera la structure de données que vous déconstruisez, et seules les données qui correspondent au modèle seront extraites.
L'élément de données déconstruit est situé dans l'opérateur d'affectation À droite de =, il peut s'agir de n'importe quelle combinaison de tableaux et d'objets, permettant la nidification arbitraire. Il n'y a pas de limite au nombre de variables utilisées pour attribuer des valeurs à ces données.
Destruction du tableau
La déconstruction du tableau utilise un tableau comme élément de données, et vous pouvez extraire les valeurs de ce tableau pour attribuer des valeurs à une ou plusieurs variables en fonction du modèle de tableau (utilisé pour correspondre aux valeurs dont vous avez besoin dans le tableau).
Le modèle de tableau est utilisé pour identifier les valeurs que vous souhaitez extraire en fonction de la position des valeurs. Il doit être capable de cartographier avec précision la structure du tableau afin que chaque variable du modèle de tableau se voit attribuer une valeur correspondant à la position dans le tableau déconstruit.
Permettez-moi de vous donner quelques exemples pour nous aider à comprendre:
Exemple de modèle de tableau
Attribuez toutes les valeurs du tableau aux variables individuelles
// Set Array Const Avengers = [«Tony Stark», «Steve Rogers», «Natasha Romanoff»]; // Déconstructeur le tableau vers une variable. Le modèle de tableau est situé à gauche de l'opérateur d'affectation `=`, et le réseau structuré est à droite de //. const [ironman, cap, blackwidow] = Avengers; // ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' // Sortie Ironman: Ironman;
Extraire toutes les valeurs sauf la première
const Avengers = [«Tony Stark», «Steve Rogers», «Natasha Romanoff»]; // Nous n'avons pas besoin d'utiliser Tony const [, Cap, BlackWidow] = Avengers; // ironman = error: undefined // cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' // Cap de sortie: CAP;
Extraire toutes les valeurs sauf la seconde
const Avengers = [«Tony Stark», «Steve Rogers», «Natasha Romanoff»]; // Cap manquante const [ironman ,, Blackwidow] = Avengers; // ironman = 'Tony Stark' // Cap = erreur: Undefined // BlackWidow = 'Natasha Romanoff' // Sortie BlackWidow: BlackWidow;
Extraire toutes les valeurs sauf la dernière
const Avengers = [«Tony Stark», «Steve Rogers», «Natasha Romanoff»]; // Ironman vs Cap const [Ironman, Cap] = Avengers; // ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow = Erreur: Undefined // Sortie BlackWidow: Ironman;
Tableaux imbriqués
Ce modèle de correspondance prend également en charge les tableaux imbriqués, tant que l'opérateur d'attribution = le modèle de tableau à gauche correspond à la structure du tableau à droite. Permettez-moi d'expliquer à nouveau que les variables à gauche se verront attribuer la valeur correspondant à la position dans le tableau à droite. Peu importe à quel point vous les nidiez, vous pouvez toujours les déconstruire.
Déconstruire les tableaux imbriqués
// destructuration des tableaux imbriqués Const Avengers = [«Natasha Romanoff», [«Tony Stark», «James Rhodes»], [«Steve Rogers», «Sam Wilson»]]; // Avengers et leurs partenaires Const [Blackwidow, [Ironman, Warmachine], [Cap, Falcon]] = Avengers; // BlackWidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Warmachine = 'James Rhodes' // Cap = 'Steve Rogers' // Falcon = 'Sam Wilson' // Sortie Warmachine: Warmachine;
Extraire une valeur d'un tableau profondément imbriqué
// Extrait de poivrons Potts constant Avengers de ce tableau = ['Natasha Romanoff', [['Tony Stark', 'Pepper Potts'], 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']]; // destructure const [, // skip 'natasha romanoff' [[, // sauter 'Tony Stark' son // poivre potts à la variable 'Hera']]] = Avengers; // Veuillez noter: vous pouvez également écrire de cette façon // const [, [[, Hera]]] = Avengers; // Sortie Hera: Hera; // Hera = 'Pepper Potts'
Utilisez l'opérateur de repos pour capturer tous les articles restants
Si vous souhaitez obtenir un élément de tableau spécifique et mettre les éléments restants dans un tableau, vous pouvez utiliser l'opérateur de repos pour le déconstruire comme ceci:
// déconstruct const les Avengers via REST Operator = ['Natasha Romanoff', 'Tony Stark', 'Steve Rogers']; Const [Blackwidow, ... les autres] = Avengers; les autres; // BlackWidow = 'Natasha Romanoff' // The Mothers = ['Tony Stark', 'Steve Rogers'] // Sortie des autres: les autres;
Destruction d'objets
La déconstruction des objets est encore plus magique, surtout lorsque vous devez prendre des valeurs d'un objet complexe et profondément imbriqué, ce qui est plus évident. Pour réitérer, la déconstruction de l'objet et la déconstruction du tableau utilisent les mêmes règles (c'est-à-dire créer un motif d'objet sur le côté gauche de l'opérateur d'affectation, de sorte que sa position variable correspond à la position de valeur de l'objet sur le côté droit).
Dans la destruction des objets, vous devez spécifier les noms d'attribut qui doivent être extraits et les noms de variables qui seront attribués. Comme la déconstruction du tableau, nous devons créer un motif d'objet pour cartographier l'objet déconstruit sur le côté gauche de l'opérateur d'affectation.
Bien que dans ce cas, ce que nous voulons extraire, c'est la valeur de la propriété de l'objet (tel que: nous extrassons value de { prop: value }). En conséquence, notre modèle d'objet doit avoir une variable et la position de cette variable doit être cohérente avec la position de la valeur de propriété que nous sommes sur le point d'extraire.
Exemple simple
Extraire une valeur d'attribut d'objet simple
Nous pouvons le faire pour attribuer la valeur de la propriété ironMan de l'objet { ironMan: 'Tony Stark' } 'Tony Stark' la variable a :
// Déconstruire la valeur de propriété de l'objet et l'attribuer à une seule variable `a`: const {ironman: a} = {ironman: 'Tony Stark'}; // Sortie a: a; // a = 'Tony Stark'Extraire plusieurs valeurs d'attribut
Tant que nous étendons le même modèle, nous pouvons extraire plusieurs valeurs d'attribut à partir d'un objet, comme suit:
// Configuration de notre objet const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Objet destructure aux variables individuelles const {ironman: a, cap: b, blackwidow: c} = Avengers; // a = 'Tony Stark' // b = 'Steve Rogers' // C = 'Natasha Romanoff' // Sortie a: a;Observez comment ce modèle de déconstruction correspond exactement à l'objet déconstruit.
Destruction d'objets imbriqués
Comme déconstruire les tableaux imbriqués, nous pouvons déconstruire des objets imbriqués, quelle que soit leur profondeur.
// Configuration de notre objet const Avengers = {Blackwidow: 'Natasha Romanoff', IronmanCharacters: {couple: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}, partenaire: {Warmachine: 'James Brodie'}}, CapCharacters: {Cap: 'Steve Rogers', Partner: {falcon: 'SAM WILSON' '. // Objet destructure aux variables individuelles const {Blackwidow: A, IronManCharacters: {couple: {Ironman: B, Hera: C}, partenaire: {warmachine: d}}, CapCharacters: {Cap: E, partenaire: {Falcon: F}}} = Avengers; // a = 'Natasha Romanoff' // b = 'Tony Stark' // C = 'Pepper Potts' // D = 'James Brodie' // E = 'Steve Rogers' // F = 'Sam Wilson' // Sortie a: a;Nommez la variable attribuée
Bien sûr, il est mauvais de définir des noms de variables tels que les noms de variables, B, C , et les noms de variables devraient avoir un sens.
Dénomination durable
// Configuration de notre objet const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Objet destructure aux variables individuelles avec des noms significatifs const {ironman: ironman, cap: cap, Blackwidow: BlackWidow} = Avengers; // BlackWidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Sortie BlackWidow: BlackWidow; Cette approche est meilleure que le nom A, B et C ci-dessus, mais elle peut toujours être améliorée. { ironMan: ironMan } a l'air un peu laid et pas intuitif.
Raccourcis syntaxiquement nommé
Si vous souhaitez attribuer la valeur d'attribut d'un objet à une variable, et que le nom de la variable est le même que le nom d'attribut de l'objet, alors dans le mode d'attribution sur le côté gauche de = , il vous suffit d'écrire le nom d'attribut, comme suit:
// Configuration de notre objet const Avenger = {ironman: 'Tony Stark'}; // Objet destructure aux variables individuelles avec des noms significatifs const {ironman // équivalent à 'ironman: ironman'} = venger; // ironman = 'Tony Stark' // Sortie Ironman: Ironman;Étant donné que le nom d'attribut d'objet déconstruit est le même que le nom de variable attribué, nous n'avons besoin de répertorier le nom qu'une seule fois.
Grammaire concise
Retwet le code précédent un peu pour les rendre plus concises et clairs:
// Configuration de notre objet const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Objet destructure aux variables individuelles avec des noms significatifs const {ironman, cap, BlackWidow} = Avengers; // Sortie Ironman: Ironman;Extraire une propriété profondément imbriquée d'un objet
Les choses sont encore plus intéressantes lorsque nous voulons extraire une propriété d'objet profondément imbriquée:
// Configuration de notre objetConst Avengers = {Blackwidow: 'Natasha Romanoff', IronmanCharacters: {couple: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}, partenaire: {Warmachine: 'James Brodie'}}, CapCharacters: {Cap: 'Steve Rogers', Partner: {falcon: 'SAM WILSON' }}.Attendez, comment avez-vous lu ce code? Comment le couple variable est-il défini?
En divisant de cette façon, nous pouvons voir que l'opérateur d'affectation = à gauche est une carte de l'objet déconstruit:
const Avengers = {IronManCharacters: {couple: {ironman: 'Tony Stark', Hera: 'Pepper Potts',}}}; const {ironManCharacters: {couple}} = Avengers; // couple de sortie: couple; Utilisation de const { couple } = avengers; Il n'y a aucun moyen d'extraire la valeur du couple . Ce n'est qu'en mappant l'emplacement et le nom de l'attribut objet à extraire que le compilateur JS peut obtenir les informations correspondantes, rechercher le long de tous les attributs de l'objet et extraire avec précision la valeur que nous voulons.
Il convient également de noter ici que le couple utilise des raccourcis de syntaxe pour nommer des variables, ce qui est en fait comme ceci:
const {ironManCharacters: {couple: couple}} = Avengers;C'est ainsi que le couple est défini, et sa valeur est la valeur dont le couple d'attribut dans l'objet Avengers .
Déconstruire les attributs de l'objet
Jusqu'à présent, nous avons déconstruit la valeur de l'objet pour attribuer des valeurs à une seule variable, et en fait nous pouvons également attribuer des valeurs aux propriétés d'un autre objet.
Const Avengers = {Blackwidow: 'Natasha Romanoff', IronmanCharacters: {couple: {Ironman: 'Tony Stark', Hera: 'Pepper Potts'}}}; Const IronManProperties = {Family: {}}; ({ironManCharacters: {couple: ironmanproperties.family}}); IronManProperties.Family// IronManProperties.Family = {// Ironman: 'Tony Stark', // Hera: 'Pepper Potts' //} // Sortie IronManProperties.Family:IronManProperties.Family; Ici, nous attribuons la valeur d' ironManCharacters.couple à la propriété d' ironManProperties.family . Voici deux points à expliquer:
1. L'attribution de déconstruction doit être incluse entre parenthèses
Lorsque nous déconstruire une variable existante (comme IronManProperties dans l'exemple ci-dessus), nous devons le faire au lieu de déclarer une nouvelle variable.
2. Le modèle correspond toujours
{ ironManCharacters: { couple... } } correspond à IronManCharacters dans Object Avengers . De cette façon, vous pouvez extraire la valeur de ironManCharacters.couple de l'objet Avengers comme vous le souhaitez. Mais maintenant, un nouvel objet Ironmanproperties et sa famille de propriétés sont placés derrière le couple . En fait, la propriété ironManProperties.family de cet objet est effectivement attribuée.
Êtes-vous toujours confus lorsque vous essayez d'expliquer clairement cette situation? Essayez le code ci-dessus dans JSFiddle et tout sera clair.
Si vous ne savez pas pourquoi vous faites cela, veuillez vous référer à l'exemple de l'article suivant. Ces exemples vous indiqueront pourquoi ce modèle est utilisé pour déconstruire l'objet JSON appelé par l'API, vous permettant d'apprécier la magie de la déconstruction!
valeur par défaut
Lors de la déconstruction, vous pouvez également spécifier une valeur par défaut à la variable:
// Configuration de notre objet const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // destructure en utilisant les défauts de par défaut {ironman, cap, blackwidow, thehulk = 'Bruce Banner'} = Avengers; // ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' // thehulk = 'Bruce Banner' // Sortie BlackWidow: BlackWidow;Évitez ces problèmes pendant la déconstruction
Const, let, var n'est pas utilisé lors de la déconstruction de l'affectation
Ce point a été mentionné lors de la parole de déconstruire et d'attribuer des propriétés d'objets, mais il est toujours nécessaire de le réitérer ici pour donner à chacun une profonde impression.
Ne peut pas déconstruire les variables déclarées
Autrement dit, vous ne pouvez déclarer que les variables tout en déconstruisant les variables.
// Configuration de notre objet const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff', Thehulk: 'Bruce Banner'}; // destructrice valide const {ironman} = Avengers; Soit {Cap} = Avengers; var {BlackWidow} = Avengers; // Destructuration invalide de laisser thehulk; {theHulk} = Avengers; // error // sort thehulk: thehulk;Pourquoi une variable déclarée ne peut-elle pas être déconstruite? C'est parce que si vous utilisez des accolades bouclées { alors JavaScript pense que vous déclarez un bloc .
La solution consiste à enfermer l'intégralité de l'affectation déconstruite dans une paire de supports .
Comment déconstruire et affecter une variable déclarée
// Configuration de notre objet const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff', Thehulk: 'Bruce Banner'}; // un hulk valide a laissé thehulk; ({theHulk} = Avengers); // thehulk = 'Bruce Banner' // Sortie thehulk: thehulk;Maintenant, nous ne commençons pas par des accolades bouclées, donc JS ne pense pas que nous déclarons un bloc afin que nous puissions atteindre le résultat de la déconstruction attendu.
Renvoie directement une valeur déconstruite
Lorsqu'une variable à retourner ensuite n'est pas déclarée en premier, une valeur déconstruite est directement retournée, ce qui n'atteindra pas l'effet attendu. Par exemple, dans le code suivant, l'objet Ironman entier renvoyé ne sera pas la valeur attendue de Tony Stark .
// Remarque: cela ne fonctionne pas! fonction getTonyStark (Avengers) {return {ironman: {realName}} = Avengers; // Renvoie l'objet Avengers, pas la valeur realName} const Avengers = {ironman: {realName: 'Tony Stark'}}; const TonyStark = GetTonyStark (Avengers); // TonyStark = {// Ironman: {// realName: 'Tony Stark' //} //}; // Sortie TonyStark: TonyStark;Pour extraire une valeur à partir d'un objet déconstruit, vous devez d'abord l'avoir à une variable, puis renvoyer cette variable, comme indiqué dans le code suivant:
// Remarque: cela fonctionne! fonction getTonyStark (Avengers) {const {ironman: {realName}} = Avengers; return realName; } const Avengers = {ironman: {realName: 'Tony Stark'}}; const TonyStark = GetTonyStark (Avengers); // TonyStark = 'Tony Stark' // Sortie TonyStark: TonyStark;Cette façon de diviser l'affectation et de revenir en deux lignes de code est vraiment ennuyeuse, et le code est laid et inutile. Malheureusement, JavaScript fonctionne comme ceci - vous devez d'abord attribuer la valeur déconstruite à une variable, puis la renvoyer, et les deux étapes doivent être effectuées séparément.
Cependant, nous n'avons pas dit que nous l'avons fait séparément, et nous n'avons pas dit que nous devons le mettre en deux lignes de code. L'écriture donc en une seule ligne comme ce qui suit peut également obtenir les résultats attendus:
fonction getTonyStark (Avengers) {return ({ironman: {realName}} = Avengers) && realName; } const Avengers = {ironman: {realName: 'Tony Stark'}}; const TonyStark = GetTonyStark (Avengers); // TonyStark = 'Tony Stark' // Sortie TonyStark: TonyStark; Étant donné que l'opérateur _short-circuit_ circuit_logical de JavaScript (&& et ||) renvoie la valeur du deuxième opérande en fonction de la valeur du premier opérande, cette méthode d'écriture peut réaliser l'effet attendu. Ici, le premier opérande consiste à déconstruire l'expression de l'affectation et à attribuer la valeur à RealName . REALNAME est le deuxième opérande, donc sa valeur est enfin renvoyée.
Ce n'est pas optimal, mais peut être réalisé. Lors de la poursuite de la brièveté du code, vous devez prêter attention à la lisibilité du code.
Résumer
Cet article explique en profondeur les principaux principes de l'attribution de déconstruire. La déconstruction réduit non seulement le montant de votre code, mais change également fondamentalement la façon dont vous le codez. Plus vous l'utilisez, plus vous pouvez façonner les données et les fonctions, ce qui était presque impossible dans le passé. J'espère que cet article sera utile à tout le monde d'apprendre ES6.