セミコロンがある場合とない場合のJavaScriptコードの違い

javascript列は、セミコロンがある場合とない場合のコードの違いを紹介します

推奨(無料):javascript(ビデオ)

この問題は多くの記事で議論されています。ESlint仕様では、セミコロンを追加するか追加しないかによって2つのキャンプに分けられます。重要なのはセミコロンがJavaScriptに与える影響を理解することです。最初に次のインタビューの質問を見ることができます。 :

このコードは正常に実行できますか?

var a = 1

(function() {
    
    

  console.log(2)

})()

このコードを実行すると、次のエラーが表示されます。

Uncaught TypeError: 1 is not a function

なんてこったい!1は関数ではありませんか?番号1を実行するつもりはありませんでした。なぜ、番号1は関数ではないと言われているのですか。この種のエラーは、多くの場合、間違ったコード行で原因を見つけるのが困難です。このエラーは、上記のコードが実行時に同じ行と見なされる必要があります。概念は次のとおりです。

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

したがって、即値関数の()は、関数を呼び出すための構文である1に追加されるため、1のエラーは関数では生成されません。このエラーを回避するには、セミコロンを使用する必要があります。

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 与分号的关系

別の例を見てみましょう。次のコードは、戻り後の空白行の後に返される値を書き込みます。操作の結果はどうなりますか?

function fn() {
    
    

  return

  '小明'

}

console.log(fn())

ASIの修正により、このプログラムコードではリターンの末尾にセミコロンが追加されるため、リターンは期待されるリターン値から分離されます。その結果、リターンの内容は空になり、最終結果は未定義になります。 。

function fn() {
    
    

  return;

  '小明';

}

console.log(fn()); // undefined

セミコロンの扱い方

もともと、ASIはセミコロンを追加しないコードスニペットを修正するために親切に使用されましたが、一部の場所(この記事の冒頭で紹介した即時関数など)ではその役割を果たさなかったため、コードにエラーが発生しました。コードは失敗しませんが、コードの実行結果と期待どおりになります。

ASIの問題を解決する方法は次のとおりです。

いずれの場合も、セミコロンを追加する必要があり、コード分割を決定するのはあなた次第です。
セミコロンは自動的に追加されないというルールを覚えておいてください。セミコロンが自動的に挿入されない場合は、手動で追加
します。ルールは追加しません。セミコロンに自動的に追加されます。

次のルールでは、セミコロンは自動的に追加されません。

コードの新しい行は(、[、/文字で始まります。このような場合、通常、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

新しい行は、またはで始まります。この使用法は、主にコードの分離が長すぎるのを避けるためによく表示されます。この状況は操作に影響を与えず、適切に使用するとコードが読みやすくなります。

var a = 2

var b = a

  .toString()

console.log(typeof b)

  

var a = 1

,b = 2 // b 同样会被 var 声明

ステートメントの最後にセミコロンを追加するだけでなく、セミコロンを追加する必要がある状況が発生した場合は、「セミコロンは自動的に追加されません」の前にセミコロンを追加することもできます。たとえば、()それ自体は自動的にセミコロンを追加しません。そのような要件がある場合は、先頭に;を追加できます(ESLint標準JS仕様では、エラーを回避するためにこの方法を使用しています)。

// 运行错误

(function() {
    
     })()

(function() {
    
     })()

  

// 正确

;(function() {
    
     })()

;(function() {
    
     })()

総括する

セミコロンを追加しないとコードがすっきりと簡潔に見えると考える人もいます。ほとんどの場合、エラーは発生しないため、コードを入力するときにセミコロンを追加しない人も少なくありません。

しかし、おそらく私はバックエンドからフロントエンドへの切り替えに慣れているため、より厳密な仕様を好みます。選び方は、操作の制約を理解していれば、どんなスタイルでもいいので、好きなだけ。
この記事はPHP中国語WebサイトのJavaScriptセクションからのものです:https//www.php.cn/course/list/17.html

おすすめ

転載: blog.csdn.net/Anna_xuan/article/details/112191054