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 :

let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

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

Sortie réelle :
a=BB b=C c=indéfini

Explication :

Contraire 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 :

let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);

Répartition de la déclaration :

• [a, b] = (['A', 'B'] est une affectation de déstructuration, similaire à celle du code d'origine.
• [(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 élément non défini à la fois à a et à c, tandis que b reçoit correctement la valeur « C ». Pour éviter ce comportement, les programmeurs. doit explicitement utiliser des points-virgules ou commencer chaque ligne par un opérateur qui nécessite l'insertion automatique d'un point-virgule (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.