Einführung in den Unterschied zwischen JavaScript-Code mit und ohne Semikolon

JavascriptDie Kolumne stellt vor, was der Unterschied zwischen Code mit und ohne Semikolons ist

Empfohlen (kostenlos): Javascript (Video)

Dieses Problem wurde in vielen Artikeln diskutiert, Die ESlint-Spezifikation ist auch in zwei Lager unterteilt, je nachdem, ob Semikolons hinzugefügt werden sollen oder nicht. Der Schlüssel liegt darin, die Auswirkungen von Semikolons auf JavaScript zu verstehen Folgende Interviewfrage:

Kann dieser Code normal laufen?

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

.

.

.

.

Wenn Sie diesen Code ausführen, wird der folgende Fehler angezeigt:

Uncaught TypeError: 1 is not a function

Was zum Teufel! 1 ist keine Funktion? Wir hatten nicht vor, die Nummer 1 auszuführen. Warum ist die Nummer 1 keine Funktion? Diese Art von Fehler ist schwer zu finden und kreist oft um die problematische Codezeile. Dieser Fehler muss darauf zurückzuführen sein, dass der obige Code zur Laufzeit als dieselbe Zeile betrachtet wird. Das Konzept ist wie folgt: 1 is not a function ？我们没有打算运行数字 1，为什么说数字 1 不是函数，这种错误是很难找到原因的，经常会在出问题的代码行上打转。这个错误必然是上吗的代码在运行时被看作是同一行，其概念如下：

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

因此立即函数的 () 被附加在 1 上，这是一个调用函数的语法，所以会产生 1 is not a function 的错误，想要避免这个错误就需要使用分号：

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

ASI 自动加入分号

ASI是 “Automatic Semicolon Insertion” 的缩写，在运行时会往有些折行的代码中自动插入分号，这个机制可以使部分代码在没有加入分号时也能正常运行，比如下面的例子：

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

由于代码中的 ++ 属于一元表达式，它只能在表达式的左边或右边放置变量，如果没有 ASI 的机制，代码会被转换为 var b = 1 ++ b 这样的错误语句。不过好在有 ASI，在实际运行时会自动被加入分号，也就不会出现上面的错误。

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

return 与分号的关系

再来看一个例子，下面的代码在 return 的后面空一行后再写要返回的值，那么问运行结果是什么呢？

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

这段程序代码因为 ASI 的修正，return 的后面会被加上一个分号，所以 return 与预期返回的值被分开了，结果 return 的内容为空值，最终的结果也只能是 undefined 。

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

到底应该怎样处理分号

本来 ASI 是出于一片好心，用来修正没有加入分号的代码片段，但偏偏在有的地方并没有发挥它的作用（例如本文一开始所介绍的立即函数），导致代码出现了错误；甚至有些代码不会出错，但会使你的代码执行结果和预期相差万里。

解决 ASI 问题的方式如下：

• 无论如何都要加上分号，完全由自己决定代码的分割
• 牢记不会自动加入分号的规则，当不会自动插入分号时，则手动加入

不会被自动加入分号的规则

下面时各种不会自动加入分号的规则：

1. 新行的代码是从  (、[、/  字符开始的，这类情况一般会直接出现 Uncaught TypeError 从而导致代码无法运行。

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. 新行以 +，-，*，％ 开始，这类情况大多会影响运算结果，所以应该合并为一行。

var a = 2
var b = a
+a

1. 新行以 , 或 . 开始，这种用法经常会出现，主要是为了避免代码过长而加入的分隔，这种情况并不会影响运行，如果善用的话会使代码更容易阅读。

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

如果遇到需要加入分号的情况，除了可以在语句的末尾加入分号外，也可以把分号加在“不会自动加入分号”的最前方，例如 () 本身不会自动加入分号，在有这种需求时可以将 ;

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

Der () der unmittelbaren Funktion wird also an 1 angehängt, was a ist Aufruffunktionssyntax, sodass der Fehler 1 ist keine Funktion auftritt. Wenn Sie diesen Fehler vermeiden möchten, müssen Sie ein Semikolon verwenden:

rrreeeASI fügt automatisch ein Semikolon

ASI hinzu ist „Automatische Semikolon-Einfügung“. Die Abkürzung für

fügt während der Laufzeit automatisch Semikolons

in einige unterbrochene Codezeilen ein. Dieser Mechanismus ermöglicht die normale Ausführung einiger Codes ohne das Hinzufügen von Semikolons, wie zum Beispiel das folgende Beispiel: 🎜rrreee🎜Aufgrund des ++ ist ein unärer Ausdruck. Er kann Variablen nur auf der linken Seite 🎜 oder der rechten Seite von 🎜 platzieren. Wenn kein ASI-Mechanismus vorhanden ist, wird der Code in <code>var b = 1 + umgewandelt + b Solche Fehleranweisung. Aber glücklicherweise werden bei ASI Semikolons während des tatsächlichen Betriebs automatisch hinzugefügt, sodass der obige Fehler nicht auftritt. 🎜rrreee🎜🎜Die Beziehung zwischen Return und Semikolon🎜🎜🎜 Schauen wir uns im folgenden Code den Wert an, der nach einer Leerzeile nach return zurückgegeben werden soll die Operation? 🎜rrreee🎜Aufgrund der ASI-Korrektur in diesem Programmcode wird nach return ein Semikolon eingefügt, sodass return vom erwarteten Rückgabewert getrennt wird und das Ergebnis ist return ist ein Nullwert und das Endergebnis kann nur undefiniert sein. 🎜rrreee🎜🎜Wie sollen wir mit Semikolons umgehen?🎜🎜🎜Ursprünglich hatte ASI gute Absichten und wurde verwendet, um Codefragmente zu korrigieren, die keine Semikolons enthielten, aber an einigen Stellen spielte es nicht seine Rolle (z. B. das, was erwähnt wurde). am Anfang dieses Artikels) Sofortige Funktion eingeführt), was zu Fehlern im Code führt, auch wenn einige Codes keine Fehler verursachen, aber die Ausführungsergebnisse Ihres Codes werden Tausende von Kilometern von den Erwartungen entfernt sein. 🎜🎜Der Weg, das ASI-Problem zu lösen, ist wie folgt: 🎜

• Fügen Sie auf jeden Fall ein Semikolon hinzu, es liegt ganz bei Ihnen, zu entscheiden, wie Sie den Code aufteilen
• Denken Sie daran die Regel, dass Semikolons nicht automatisch hinzugefügt werden, wenn ein Semikolon nicht automatisch eingefügt wird, fügen Sie es manuell hinzu

🎜🎜Die Regeln, die ein Semikolon nicht automatisch hinzufügen🎜🎜🎜Die folgenden sind verschiedene 🎜wird nicht 🎜Regeln, die automatisch ein Semikolon hinzufügen:🎜

Der Code der neuen Zeile beginnt mit den Zeichen (, [, /. In diesem Fall wird normalerweise direkt >Uncaught TypeError angezeigt, was dazu führt, dass der Code nicht ausgeführt werden kann.

rrreee

1. Neue Zeilen beginnen mit + , -, <. code>*, %, die meisten dieser Situationen wirken sich auf die Operationsergebnisse aus und sollten daher zu einem zusammengefasst werden Zeile

rrreee

1. Neue Zeile. Beginnend mit , oder . kommt diese Verwendung häufig vor, hauptsächlich um die Trennung von zu vermeiden Wenn der Code zu lang ist, hat dies keinen Einfluss auf den Vorgang. Wenn er ordnungsgemäß ausgeführt wird, ist er leichter lesbar.

rrreee🎜Wenn Sie auf eine Situation stoßen, in der Sie ein Semikolon hinzufügen müssen Zusätzlich zum Hinzufügen eines Semikolons am Ende der Anweisung können Sie auch ein Semikolon nach „Es wird nicht automatisch ein Semikolon hinzufügen“ am Anfang hinzufügen, wie z. B. () selbst nicht automatisch Fügen Sie ein Semikolon hinzu. Wenn dies erforderlich ist, können Sie ; an der Vorderseite hinzufügen (ESLint Standard JS-Spezifikation Verwenden Sie diese Methode, um Fehler zu vermeiden) 🎜rrreee🎜🎜Zusammenfassung🎜🎜🎜Manche Leute denken, dass dies nicht der Fall ist Durch das Hinzufügen von Semikolons sieht der Code sauberer und schlanker aus, und in den meisten Fällen treten keine Fehler auf. Daher füge ich beim Eingeben von Code keine Semikolons hinzu 🎜🎜Aber ich bevorzuge strengere Spezifikationen, vielleicht weil ich daran gewöhnt bin weil ich vom Back-End zum Front-End gewechselt bin. Ich muss nur die Betriebseinschränkungen verstehen, egal welcher Stil gut ist, solange er Ihnen gefällt.

Das obige ist der detaillierte Inhalt vonEinführung in den Unterschied zwischen JavaScript-Code mit und ohne Semikolon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!