Anomalie de déstructuration du tableau ES6 : pourquoi les points-virgules sont-ils importants ?

Anomalie de déstructuration de tableau ES6

Dans ES6, la déstructuration de tableau permet une affectation pratique des éléments du tableau à des variables. Cependant, un comportement inattendu se produit lors d'une déstructuration sans utilisation appropriée des points-virgules.

Considérez 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 attendue :

• a=A b =BB c=C

Sortie réelle :

• a=BB b=C c=undefined

Explication

Le comportement inattendu résulte de l'absence de points-virgules entre les deux instructions déstructurantes. Dans ES6, les points-virgules ne sont pas automatiquement insérés. Par conséquent, le code est analysé comme une seule grande 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>

Dans cette instruction, l'opérateur virgule évalue la dernière expression entre parenthèses, qui est l'affectation du tableau ['BB', 'C '] sur le côté gauche (b, c). En conséquence, b reçoit 'BB' et c reçoit 'C'.

Cependant, la deuxième affectation de déstructuration est incorrectement attribuée au littéral de tableau vide ([]) au lieu du tableau ['BB', ' C']. En effet, le littéral du tableau est placé entre parenthèses sans point-virgule au début de la ligne.

Pour résoudre ce problème, utilisez des points-virgules pour séparer les affectations individuelles :

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

Avec le en utilisant correctement les points-virgules, le résultat attendu est obtenu.

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!