Maison > interface Web > js tutoriel > le corps du texte

Pourquoi la déstructuration de ma baie ES6 a-t-elle entraîné un comportement inattendu ?

Susan Sarandon
Libérer: 2024-10-24 06:39:30
original
584 Les gens l'ont consulté

Why Did My ES6 Array Destructuring Lead to Unexpected Behavior?

Déstructuration de tableau ES6 : Comprendre le comportement inattendu

Dans ES6, la déstructuration de tableau nous permet d'extraire des éléments spécifiques d'un tableau et de les attribuer à variables. Toutefois, un comportement inattendu peut se produire lorsque certaines règles de syntaxe sont ignorées. 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>
Copier après la connexion

Résultat attendu :

  • a = A
  • b = BB
  • c = C

Résultat réel :

  • a = BB
  • b = C
  • c = undefined

Explication :

Comme indiqué dans la question, l'absence de points-virgules entre les lignes conduit à ce comportement inattendu. Sans points-virgules explicites, le code est interprété 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>
Copier après la connexion

Cette répartition explique le résultat inhabituel :

  • [a, b] = ([' A', 'B'] définit a sur indéfini et b sur B.
  • [(b, c)] = ['BB', 'C'] enveloppe le affectation du tableau à b et c à l'intérieur d'une expression d'affectation, l'amenant à être évalué comme le tableau.
  • 'A', 'B' est une référence de propriété sur le littéral du tableau.
  • (b, c) utilise l'opérateur virgule, qui a pour effet d'évaluer c (qui n'est pas défini).

Pour éviter ces conséquences involontaires, il est essentiel d'ajouter explicitement des points-virgules après les instructions commençant par des parenthèses, des crochets, l'opérateur de division, l'opérateur d'addition, l'opérateur de soustraction ou des backticks (pour les modèles balisés). empêchant une évaluation inattendue et des résultats incorrects.

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!