Le contenu de cet article concerne l'analyse de l'affectation de déstructuration dans ES6 (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
ES6 permet d'extraire des valeurs de tableaux et d'objets et d'attribuer des valeurs aux variables selon certains modèles, ce qu'on appelle la déstructuration.
Qui peut déstructurer
Les tableaux peuvent être déstructurés à l'aide de tableaux. Pour les structures Set, l'affectation de déstructuration des tableaux peut également être utilisée.
La règle de l'affectation de déstructuration est que tant que la valeur à droite du signe égal n'est pas un objet ou un tableau, convertissez-la d'abord en objet.
1 2 |
|
En fait, 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.
1 2 3 4 5 6 7 8 9 10 11 |
|
Dans le code ci-dessus, fibs est une fonction Generator (voir Fonction Generator) et possède nativement une interface Iterator. L'affectation de déstructuration obtiendra à son tour la valeur de cette interface.
L'instruction ci-dessus signalera une erreur car la valeur à droite du signe égal soit n'a pas l'interface Iterator après avoir été convertie en objet (les cinq premières expressions), soit elle n'a pas l'interface Iterator elle-même. (la dernière expression).
Lorsque le côté droit de l'expression d'affectation de déstructuration (= l'expression suivante) est évalué comme nul ou indéfini, une erreur sera générée. Parce que toute tentative de lecture nulle ou indéfinie entraînera une "erreur d'exécution".
La déstructuration manque d'erreur d'initialisation
Lors de l'utilisation de la déstructuration pour déclarer des variables avec var , let ou const, un initialiseur (c'est-à-dire la valeur à droite de l'égalité signe) doit être fourni. Le code suivant générera des erreurs en raison d'initialiseurs manquants :
1 2 3 4 5 6 |
|
Semblable à la déstructuration d'objets, lorsque vous utilisez var , let , const pour la déstructuration de tableaux, vous devez fournir un initialiseur.
Les variables déclarées sont utilisées pour l'affectation de déstructuration
Objet
1 2 3 4 |
|
Le code ci-dessus signalera une erreur car le moteur JavaScript interprétera {x } compris comme un bloc de code, entraînant une erreur de syntaxe. Ce problème ne peut être résolu qu'en n'écrivant pas l'accolade au début de la ligne pour empêcher JavaScript de l'interpréter comme un bloc de code.
1 2 3 |
|
Tableau
Vous pouvez utiliser la déstructuration de tableau dans les expressions d'affectation, mais contrairement à la déstructuration d'objet, vous n'avez pas besoin de mettre l'expression entre parenthèses, par exemple :
1 2 3 4 5 6 |
|
La valeur de l'expression d'affectation de déstructuration
La valeur de l'expression d'affectation de déstructuration est la valeur sur le côté droit de l'expression (après = ). Cela signifie qu'une expression d'affectation déstructurante peut être utilisée partout où une valeur est attendue. Par exemple, passer une valeur à une fonction :
1 2 3 4 5 6 7 8 9 10 11 |
|
Affectation de déstructuration de tableau
La valeur r d'une expression d'affectation de déstructuration de tableau signale une erreur
Si le signe égal Le côté droit de n'est pas un tableau (ou à proprement parler, pas une structure traversable, voir Itérateur), alors une erreur sera signalée.
Si {} est utilisé pour déconstruire le côté gauche, la rvalue sera convertie en objet et aucune erreur ne sera signalée sauf pour null et indéfini.
1 2 3 4 5 6 7 |
|
Déconstruction d'un tableau unidimensionnel
1 |
|
Le code ci-dessus indique que les valeurs peuvent être extraites du tableau et affectées à des variables selon les positions correspondantes.
Déstructuration des tableaux imbriqués
1 2 3 4 5 6 7 8 |
|
Déstructuration incomplète
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
La déstructuration échoue
Lorsque l'élément à la position spécifiée n'existe pas, ou Si sa valeur est indéfinie, la déconstruction échoue et la valeur de la variable est égale à indéfinie.
1 2 |
|
Valeur par défaut
Lorsque la déstructuration de l'élément à la position spécifiée échoue, alors cette valeur par défaut sera utilisée.
Notez qu'ES6 utilise l'opérateur d'égalité stricte (===) en interne pour déterminer si une position a une valeur. Par conséquent, la valeur par défaut ne prendra effet que si un membre du tableau est strictement égal à indéfini.
Si un membre du tableau est nul, la valeur par défaut ne prendra pas effet, car null n'est pas strictement égal à indéfini.
1 2 3 4 5 6 7 |
|
Si la valeur par défaut est une expression, alors l'expression est évaluée paresseusement, c'est-à-dire qu'elle ne sera évaluée que lorsqu'elle est utilisée.
1 2 3 4 5 |
|
Dans le code ci-dessus, comme x peut obtenir une valeur, la fonction f ne sera pas exécutée du tout. Le code ci-dessus est en fait équivalent au code suivant.
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.
1 2 3 4 |
|
Déstructuration des éléments restants
La déstructuration des tableaux a un concept similaire appelé éléments de repos ( rest items ), qui utilise... la syntaxe pour attribuer les éléments restants à une variable spécifiée.
1 2 3 |
|
Mais il a une autre fonctionnalité utile. Le clonage pratique de tableaux est une fonctionnalité manifestement manquée dans JS. Dans ES5, les développeurs utilisent souvent une méthode simple, qui consiste à utiliser la méthode concat() pour cloner un tableau.
1 2 3 |
|
Dans ES6, vous pouvez utiliser la syntaxe de reste pour obtenir le même effet. La mise en œuvre est la suivante :
1 2 3 |
|
Attention ! L'élément restant doit être la dernière partie du modèle de déstructuration du tableau et ne peut pas être suivi d'une virgule, sinon il s'agit d'une erreur de syntaxe.
Affectation déstructurante d'objets
解构不仅可以用于数组,还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
对象的解构赋值的解构和数组的差不多,只是[]换为了{},嵌套对象多了个:,还有对象不在乎属性的顺序,所以对象的不完全解构是不必要像数组那样的,想要哪个属性直接写属性名就行了,同时还多了个别名的设置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
|
设置别名
ES6 有一个扩展语法,允许你在给本地变量赋值时使用一个不同的名称。
1 2 3 4 5 6 7 |
|
字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
1 2 3 4 5 6 |
|
类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
1 2 |
|
数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
1 2 3 4 5 6 7 8 |
|
函数参数的解构赋值
函数的参数也可以使用解构赋值。
1 2 3 4 5 |
|
上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y。
函数参数的解构也可以使用默认值。
1 2 3 4 5 6 7 8 |
|
上面代码中,函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值。当 JS 的函数接收大量可选参数时,一个常用模式是创建一个 options 对象,其中包含了附加的参数。
1 2 3 4 5 6 7 8 |
|
js会先把实参传进形参的右值,代替左值,如果没传,默认用形参的右值。
undefined就会触发函数参数的默认值。
1 2 |
|
用途
交换变量的值
1 2 3 4 |
|
取出从函数返回的值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
函数无次序参数的传入
解构赋值可以方便地将一组参数与变量名对应起来。
1 2 3 |
|
提取 JSON 数据
1 2 3 4 5 6 7 8 9 10 |
|
函数参数的默认值
1 2 3 4 5 6 7 8 9 10 11 |
|
指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
遍历 Map 结构
任何部署了 Iterator 接口的对象,都可以用for...of循环遍历。Map 结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。
1 2 3 4 5 6 7 8 9 |
|
如果只想获取键名,或者只想获取键值,可以写成下面这样。
1 2 3 4 5 6 7 8 9 |
|
输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
1 |
|
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!