Introduction à la différence entre le code JavaScript avec et sans points-virgules

javascriptLa colonne présente la différence entre le code avec et sans points-virgules

Recommandé (gratuit) : javascript (vidéo)

Ce problème a été abordé dans de nombreux articles et est également divisé en spécifications ESlint selon qu'il faut ajouter ou non un point-virgule . Entre les deux camps, quant à savoir s'il faut ajouter ou non des points-virgules, la clé est de comprendre l'impact des points-virgules sur JavaScript. Avant de commencer, vous pouvez jeter un œil à la question d'entretien suivante :

Est-ce possible. le code s'exécute normalement ?

var a = 1
(function() {
  console.log(2)
})()

.

.

.

.

Si vous exécutez ce code, l'erreur suivante apparaîtra :

Uncaught TypeError: 1 is not a function

C'est quoi ce bordel ! 1 is not a function ? Nous n'avions pas l'intention d'exécuter le chiffre 1. Pourquoi le chiffre 1 n'est-il pas une fonction ? Ce genre d'erreur est difficile à trouver et tourne souvent autour de la ligne de code problématique ? Cette erreur doit être due au fait que le code ci-dessus est considéré comme la même ligne au moment de l'exécution, et le concept est le suivant :

var a = 1(function() { /* */ })()

Par conséquent, le () de la fonction immédiate est ajouté à 1, qui est un syntaxe pour appeler une fonction, Par conséquent, une erreur de 1 is not a function se produira. Pour éviter cette erreur, vous devez utiliser un point-virgule :

var a = 1 // 随便把分号放在哪里，只要能隔开就行
;(function() {
  console.log(2)
})()

ASI ajoute automatiquement un point-virgule

.

ASI est "Automatic Semicolon Insertion" est l'abréviation de ". Lors de l'exécution, les points-virgules seront automatiquement insérés dans certaines lignes brisées de code . Ce mécanisme peut faire fonctionner certains codes normalement sans ajouter de points-virgules, comme comme l'exemple suivant :

var b = 1
++b
console.log('b', b)

Puisque le ++ dans le code est une expression unaire, il ne peut placer des variables que sur le côté gauche de l'expression ou sur le côté droit de . le mécanisme ASI, le code sera converti en var b = 1 ++ b Une telle déclaration d'erreur. Mais heureusement, avec ASI, des points-virgules seront automatiquement ajoutés lors du fonctionnement réel, donc l'erreur ci-dessus ne se produira pas.

var b = 1;
++b;
console.log('b', b); // 2

La relation entre return et point-virgule

Regardez un autre exemple dans le code suivant, écrivez la valeur à renvoyer après une ligne vide après return. Ensuite Quel est le résultat de l’opération ?

function fn() {
  return 
  '小明'
}
console.log(fn())

En raison de la correction de l'ASI dans ce code de programme, un point-virgule sera ajouté après return, donc return est séparé de la valeur de retour attendue et le contenu de return est vide. valeur, le résultat final ne peut être que undefined.

function fn() {
  return;
  '小明';
}
console.log(fn()); // undefined

Comment gérer les points-virgules ?

À l'origine, ASI était animé de bonnes intentions et était utilisé pour corriger des extraits de code qui n'incluaient pas de points-virgules, mais cela s'est produit dans à certains endroits, il ne joue pas son rôle (comme la fonction immédiate introduite au début de cet article), ce qui entraîne des erreurs dans le code, même certains codes ne feront pas d'erreurs, mais les résultats d'exécution de votre code seront des milliers ; à des kilomètres des attentes.

La manière de résoudre le problème ASI est la suivante :

• Dans tous les cas, ajoutez des points-virgules. C'est à vous de décider de la répartition du code
.
• N'oubliez pas que les points-virgules ne seront pas ajoutés automatiquement. Lorsque la règle du point-virgule ne sera pas automatiquement insérée, ajoutez manuellement

La règle selon laquelle le point-virgule ne sera pas automatiquement ajouté

est la suivante : n'ajoutera pas automatiquement les règles de point-virgule :

1. Le code de la nouvelle ligne commence à partir des caractères (, [, /. Ce type de situation Uncaught TypeError apparaît généralement directement, entraînant l'échec de l'exécution du code.

var a = 1
var b = a
(a + b).toString()

var a = 1
[1,2,3].forEach(bar)
 
(function() { })()
(function() { })()
 
var a = 1
var b = a
/test/.test(b)

1. Les nouvelles lignes commencent par +, -, *, ％ La plupart de ces situations affecteront les résultats de l'opération, elles doivent donc être fusionnées en une seule. doubler.

var a = 2
var b = a
+a

1. Les nouvelles lignes commencent par , ou . Cette utilisation se produit souvent, principalement parce que la séparation est ajoutée pour éviter que le code ne soit trop long. Cette situation n'affecte pas l'exécution. et rend le code plus facile à lire s'il est utilisé à bon escient.

var a = 2
var b = a
  .toString()
console.log(typeof b)
 
var a = 1
,b = 2 // b 同样会被 var 声明

Si vous rencontrez une situation où vous devez ajouter un point-virgule, en plus d'ajouter un point-virgule à la fin de l'instruction, vous pouvez également ajouter le point-virgule devant "ne sera pas automatiquement ajoutez un point-virgule", par exemple () lui-même n'ajoutera pas automatiquement un point-virgule. Si nécessaire, vous pouvez ajouter ; au début (la spécification ESLint Standard JS utilise cette méthode pour éviter les erreurs).

// 运行错误
(function() { })()
(function() { })()
 
// 正确
;(function() { })()
;(function() { })()

Résumé

Certaines personnes pensent que ne pas ajouter de points-virgules peut rendre le code plus propre et plus rationalisé, et dans la plupart des cas, il n'y aura pas d'erreurs. n'ajoutez pas de points-virgules lorsque vous tapez du code.

Cependant, je préfère des spécifications plus strictes, peut-être parce que je suis passé du back-end au front-end et que j'y suis habitué. Quant à savoir comment choisir, tant que vous comprenez les restrictions de fonctionnement, quel que soit le style qui vous convient, tant que vous l'aimez.

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!