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 valeurs​​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

É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!