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 correspondantes​​de 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!