Déstructuration et affectation des variables d'apprentissage ES6

Parfois, il est vraiment gênant d'écrire trop de variables, et il y a beaucoup de travail fastidieux et presque répétitif. es6 nous offre une variété de façons plus pratiques de déclarer des variables - déstructurer et attribuer des variables. L'article suivant présente principalement les informations pertinentes sur la déstructuration et l'affectation des variables dans ES6. Les amis dans le besoin peuvent s'y référer.

Assignation déstructurante des variables

ES6 permet l'extraction de tableaux et d'objets selon un certain modèle et l'affectation de variables.

Affectation de déstructuration du tableau

var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

Le code ci-dessus indique que les valeurs peuvent être extraites du tableau et que les variables peuvent être traitées en fonction du poste correspondant.

Essentiellement, cette façon d'écrire est une "correspondance de motifs". Tant que les motifs des deux côtés du signe égal sont les mêmes, la variable de gauche se verra attribuer la valeur correspondante.

let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;

let [,,third] = ['foo','bar','baz'];
third //'baz'

let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]

Si la déstructuration échoue, la valeur de la variable sera égale à undefined.

let [x,y,z] = ['a']
x // 'a';
y // undefined
z //[]

Déconstruction incomplète

Si le motif à gauche du signe égal ne correspond qu'à une partie de le tableau à droite du signe égal , la déconstruction peut encore réussir, cette situation est appelée déconstruction incomplète.

let [x,y] = [1,2,3]
x //1
y //2

Si le côté droit du signe égal n'est pas un tableau, une erreur sera signalée. (N'a pas de structure traversable).

Tant qu'une certaine structure de données possède une interface Iterator, une affectation de déstructuration sous forme de tableau peut être utilisée

function* fibs(){
 var a = 0;
 var b = 1;
 while(true){
  yield a;
  [a,b] = [b,a+b];
 }
}

var [first,second,third,fourth,fifth,sixth] = fibs();
sixth // 5

fibs est une fonction Generator. Elle possède nativement une interface Iterator, et l'affectation de déstructuration obtiendra à son tour les valeurs de cette interface.

Valeur par défaut

L'affectation de déstructuration permet de spécifier des valeurs par défaut.

var [foo=true] = [];
foo //true

ES6 utilise en interne l'opérateur d'égalité stricte (===) pour déterminer si une position a une valeur. Par conséquent, si un membre du tableau n’est pas strictement égal à undefined, la valeur par défaut ne prendra pas effet.

var [x = 1] = [undefined]
x // 1

var [x = 1] = [null]
x // null

Une expression peut également être utilisée comme valeur par défaut Si une expression est utilisée comme valeur par défaut, l'expression est évaluée paresseusement et ne peut être utilisée que. être utilisé quand Il ne sera évalué qu'à son arrivée.

function f(){
 console.log('aaa')
}

let [x = f()] = [1]

Dans le code ci-dessus, la fonction f ne sera pas exécutée car x peut obtenir la valeur.

La valeur par défaut peut faire référence à d'autres variables d'affectation déstructurante, mais la variable doit avoir été déclarée.

Affectation déstructurante d'objets

L'affectation déstructurante peut être appliquée aux tableaux ainsi qu'aux objets.

 var {foo,bar} = {foo:'aaa',bar:'bbb'}
 foo // 'aaa'
 bar // 'bbb'

Une différence entre l'affectation déstructurante des objets et des tableaux est que les éléments des tableaux sont triés dans l'ordre et que la valeur d'une variable est déterminée par sa position. Décision, et les propriétés de l'objet ne sont pas en ordre, la variable doit avoir le même nom que la propriété pour obtenir la valeur correcte.

var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'


var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined

Si le nom de la variable est incohérent avec le nom de l'attribut, il doit être écrit ainsi :

var {foo:baz} = {foo:'aaa'}
baz //'aaa'

En fait, l'affectation déstructurante d'un objet est l'abréviation de la forme suivante :

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

L'interne Le mécanisme de déstructuration et d'attribution d'un objet consiste à trouver d'abord le même attribut de nom, puis à l'attribuer à la variable correspondante. Ce qui est réellement attribué est ce dernier, pas le premier.

Cependant, lorsque vous utilisez la méthode d'écriture ci-dessus, la déclaration et l'affectation des variables sont ensemble. Pour let et const, les variables ne peuvent pas être redéclarées, donc une fois que la variable affectée a été déclarée auparavant, une erreur sera signalée.

La déstructuration d'objets peut également être utilisée pour des objets structurés imbriqués.

var obj = {
 p: [
  'hello' ,
  {
   y : 'world'
  }
 ]
}

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

À ce stade, p est un modèle, pas une variable, donc aucune valeur ne lui sera attribuée.

L'affectation déstructurante d'un objet peut également spécifier une valeur par défaut. La condition effective pour la valeur par défaut est que la valeur de l'attribut de l'objet soit strictement égale à indéfini.

var {x=3} = {x:undefined}
x //3

var {x=3} = {x:null}
x //null

Si le mode de déstructuration est un objet imbriqué et que la propriété parent où se trouve l'objet enfant n'existe pas, une erreur sera signalée.

var {foo:{bar}} = {baz:'baz'}

Pour plus d'articles liés à la déstructuration et à l'affectation de variables dans l'apprentissage ES6, veuillez faire attention au site Web PHP chinois !