Maison >interface Web >js tutoriel >Compréhension approfondie de la déconstruction des données ES6
Je pense que tout le monde a entendu parler de la déconstruction des données ES6. Cet article vous aide principalement à comprendre l'utilisation de la déconstruction des données ES6. Je pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
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
Les identifiants de type et de nom déclarent non seulement les variables locales, mais lisent également les valeurs d'attribut correspondantesde l'objet.
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
est affecté à 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 stocker sa valeur dans la variable localType. Cette syntaxe est opposée à celle des littéraux d'objet traditionnels
Structures d'objets imbriquées
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}
lorsque le côté droit de les deux points sont présents Lorsqu'il est utilisé entre accolades, il indique que la cible est imbriquée dans une couche plus profonde de l'objet (loc: {start: localS,end: localE})
Deuxième déconstruction des données
La syntaxe de la déstructuration de tableaux ressemble beaucoup à celle de la déstructuration d'objets, 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 la valeur de 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
Articles 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
Le clonage de tableau peut être effectué en utilisant les éléments restants
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
Recommandations associées :
le tableau Excel d'exportation js dépasse Solution pour les caractères anglais 26 bits ES6
Un moyen simple de convertir la syntaxe es6 en es5 à l'aide de babel
Quelles sont les méthodes statiques des classes dans la fonction ES6
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!