Déstructuration des baies ES6 : pourquoi cela ne fonctionne-t-il pas comme prévu ?

Déstructuration des tableaux ES6 : comportement imprévu

Dans ES6, l'affectation de déstructuration des tableaux peut conduire à des résultats inattendus, laissant les programmeurs perplexes. Un tel exemple est illustré par le code suivant :

<code class="js">let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)</code>

Sortie prévue :
a=A b=BB c=C

Réel Sortie :
a=BB b=C c=undefined

Explication :

Contrairement aux attentes, ce code ne donne pas le résultat souhaité. Au lieu de cela, il échange les valeurs de b et c, laissant c indéfini. Pour comprendre pourquoi cela se produit, nous devons examiner le code de près.

Analyse et évaluation :

En JavaScript, les points-virgules sont facultatifs pour délimiter les instructions. Sans points-virgules explicites, le code est analysé comme une seule instruction :

<code class="js">let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);</code>

Répartition de l'instruction :

• [a, b] = ([ 'A', 'B'] est une affectation déstructurante, similaire à celle du code original.
• [(b, c)] = ['BB', 'C'] est une expression d'affectation qui attribue le tableau ['BB', 'C'] à l'opérande de gauche. Cette expression est évaluée comme le même tableau.
• ['A', 'B'][…] est une référence de propriété sur. un littéral de tableau, qui est évalué comme indéfini.
• (b, c) utilise l'opérateur virgule, qui est évalué comme étant le dernier opérande (c), qui n'est pas défini.

Implications :

Par conséquent, le code attribue un caractère indéfini à la fois à a et à c, tandis que b reçoit correctement la valeur « C ». Pour éviter ce comportement, les programmeurs doivent explicitement utiliser des points-virgules ou commencer chaque ligne par un. opérateur qui nécessite qu'un point-virgule soit automatiquement inséré (par exemple, (, [, /, , - ou `).

Cette compréhension garantit que les affectations de déstructuration dans ES6 fonctionnent comme prévu, empêchant les échanges de valeurs inattendus et les affectations non définies .

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!