Maison >interface Web >js tutoriel >Interprétation détaillée de la déconstruction des données ES6
Cet article présente l'utilisation d'une compréhension approfondie de la déconstruction des données ES6. Maintenant, je le partage avec vous et le donne comme référence.
Une déstructuration d'objet
La syntaxe de déstructuration d'objet utilise des littéraux d'objet sur le côté gauche de l'instruction d'affectation
let node = { type: true, name: false } //既声明又赋值 let { type, name } = node; //或者先声明再赋值 let type, name ({type,name} = node); console.log(type);//true console.log(name);//false
Le type et le nom identifiants Les variables locales sont déclarées et les valeurs d'attribut correspondantes de l'objet sont également lues.
La valeur d'une expression d'affectation déstructurante est la valeur située à droite de l'expression. Une erreur est générée lorsque le côté droit d’une expression de déstructuration est évalué comme nul ou indéfini.
Valeur par défaut
Lorsque vous utilisez l'instruction d'affectation de déstructuration, si la variable locale spécifiée ne trouve pas d'attribut du même nom dans l'objet, la variable sera attribué la valeur non définie
let node = { type: true, name: false }, type, name, value; ({type,value,name} = node); console.log(type);//true console.log(name);//false console.log(value);//undefined
Vous pouvez éventuellement définir une valeur par défaut à utiliser si la propriété spécifiée n'existe pas.
let node = { type: true, name: false }, type, name, value; ({ type, value = true, name } = node); console.log(type);//true console.log(name);//false console.log(value);//true
Attribuer des valeurs à différents noms de variables locales
let node = { type: true, name: false, value: "dd" } let { type: localType, name: localName, value: localValue = "cc" } = node; console.log(localType); console.log(localName); console.log(localValue);
type:localType Cette syntaxe signifie lire l'attribut nommé type et le mettre La valeur of est stocké dans la variable localType. Cette syntaxe est opposée à la syntaxe des littéraux d'objet traditionnels
Structure d'objet imbriquée
let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } } let { loc: localL, loc: { start: localS, end: localE } } = node; console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4} console.log(localS);//{line: 1,column: 1} console.log(localE);//{line: 1,column: 4}
Lorsqu'il y a une accolade sur le côté droit du côlon, elle signifie que la cible est imbriquée Dans une couche plus profonde de l'objet (loc: {start: localS, end: localE})
Deuxième déstructuration des données
La syntaxe de la déstructuration de tableau ressemble à la déstructuration d'objet Très similaire, sauf que le littéral d'objet est remplacé par un littéral de tableau.
let colors = ["red", "blue", "green"]; let [firstC, secondC, thirdC, thursC = "yellow"] = colors; console.log(firstC//red console.log(secondC);//blue console.log(thirdC);//green console.log(thursC);//yellow
Vous pouvez également ignorer certains éléments en mode déstructuration et fournir des noms de variables uniquement pour les éléments qui vous intéressent.
let colors = ["red","green","blue"]; let [,,thirdC] = colors; console.log(thirdC);//blue
La virgule avant ThirdC est un espace réservé fourni pour l'élément précédent du tableau. En utilisant cette méthode, vous pouvez facilement récupérer une valeur n’importe où dans le tableau sans donner de noms à d’autres éléments.
Affectation de déstructuration
let colors = ["red","green","blue"], firstColor = "black", secondColor = "purple"; [firstColor,secondColor] = colors; console.log(firstColor);//red console.log(secondColor);//green
La déstructuration de tableaux a un cas d'utilisation très unique, qui peut facilement échanger les valeursde deux variables.
let a =1,b =2; [a,b] = [b,a]; console.log(a);//2 console.log(b);//1
Déconstruction imbriquée
let colors = ["red", ["green", "blue"], "yellow"]; let [firstC, [, ssc]] = colors; console.log(ssc);//blue
Éléments restants
let colors = ["red", "green", "blue"]; let [firstC, ...restC] = colors; console.log(firstC); console.log(...restC); console.log(restC[0]);//green console.log(restC[1]);//blue
Utiliser les éléments restants peut être cloné par tableau
let colors = ["red", "green", "blue"]; let [...restC] = colors; console.log(restC);//["red", "green","blue"]
Trois déconstructions mixtes
let node = { type: "Identifier", name: 'foo', loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } }, range: [0, 3] } let { type, name: localName, loc: { start: { line: ll }, end: { column: col } }, range: [, second] } = node; console.log(type);//Identifier console.log(localName);//foo console.log(ll);//1 console.log(col);//4 console.log(second);//3
Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile. à l'avenir. .
Articles associés :
Comment implémenter le pontage React-native Android et quelles sont les étapes spécifiques ?
Interprétation détaillée du concept d'objet window $window dans AngularJS
Comment surveiller window.resize dans VueJs et comment l'implémenter spécifiquement ?
Comment implémenter l'adaptation de page dans angulairejs ?
Comment développer une directive personnalisée dans vue
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!