KnowHub

JavaScriptの基本構文

声明

JavaScript プログラムの実行単位は行、つまり 1 行ずつ実行されます。通常、各行はステートメントです。

ステートメントは、特定のタスクを完了するために実行される操作です。たとえば、次の行は代入ステートメントです。

var a = 1 + 3;

このステートメントは、まず var コマンドを使用して変数 a を宣言し、次に 1 + 3 の演算結果を変数 a に代入します。

「1 + 3」は式と呼ばれ、戻り値を求めるための計算式を指します。ステートメントと式の違いは、前者は主に特定の操作を実行するために使用され、通常は値を返す必要がないのに対し、後者は戻り値を取得するために使用され、必ず値を返します。式は、値が予期される JavaScript 言語のどこでも使用できます。たとえば、代入ステートメントの等号の右側は値であることが想定されるため、さまざまな式を配置できます。

ステートメントはセミコロンで終わり、セミコロンはステートメントの終わりを示します。複数のステートメントを 1 行に記述することができます。

var a = 1 + 3; var b = 'abc';

セミコロンの前には何も置くことができず、JavaScript エンジンはそれを空のステートメントとして扱います。

;;;

上記のコードは 3 つの空のステートメントを表します。

式はセミコロンで終わる必要はありません。式の後にセミコロンを追加すると、JavaScript エンジンは式をステートメントとして処理するため、意味のないステートメントが作成されます。

1 + 3;
'abc';

上記の 2 行のステートメントは値を生成するだけであり、実際の意味はありません。

変数

コンセプト

変数は、「値」への名前付き参照です。変数とは「値」に名前を付けるもので、その名前を参照することは値を参照することと同じです。変数の名前は変数名です。

変数 a = 1;

上記のコードは、まず変数 a を宣言し、次に変数 a と値 1 の間に参照関係を確立します。これを、変数 a に値 1 を「代入する」といいます。これ以降、変数名「a」を参照すると値 1 が得られます。最初の var は変数宣言コマンドです。これは、変数 a が作成されることを解釈エンジンに通知することを示します。

JavaScript の変数名では大文字と小文字が区別され、「A」と「a」は 2 つの異なる変数であることに注意してください。

変数の宣言と代入は 2 つの別々のステップであり、上記のコードはそれらを組み合わせたものです。

変数a;
a = 1;

値を割り当てずに変数を宣言しただけの場合、変数の値は「未定義」になります。 unknown は、「未定義」を意味する特別な値です。

変数a;
// 未定義

このステートメントは、変数を割り当てるときに var コマンドを書き忘れた場合にも有効です。

変数 a = 1;
//基本的に同等
a = 1;

ただし、var を書かないと意思表示ができず、知らないうちにグローバル変数が作成されやすいため、変数の宣言には必ず var コマンドを使用することをお勧めします。

変数を宣言せずに使用すると、JavaScript はエラーを報告し、変数が未定義であることを通知します。

×
// 参照エラー: x が定義されていません

上記のコードが変数 x を直接使用している場合、システムはエラーを報告し、変数 x が宣言されていないことを通知します。

複数の変数を同じ var コマンドで宣言できます。

変数a、b;

JavaScript は動的に型指定される言語です。つまり、変数の型に制限がなく、変数はいつでも型を変更できます。

変数 a = 1;
a = 'こんにちは';

上記のコードでは、変数 a に最初に値が割り当てられ、次に文字列が再割り当てされます。 2 回目に値を代入する場合、変数 a はすでに存在するため、var コマンドを使用する必要はありません。

var を使用して既存の変数を再宣言する場合、それは無効です。

var x = 1;
変数x;
× // 1

上記のコードでは、変数 x が 2 回宣言されており、2 回目の宣言は無効です。

ただし、2 回目の宣言中に値が割り当てられた場合、前の値は上書きされます。

var x = 1;
var x = 2;

// と同等

var x = 1;
変数x;
x = 2;

変動プロモーション

JavaScript エンジンの動作方法は、コードを解析し、宣言された変数をすべて取得して、それを 1 行ずつ実行することです。この結果、すべての変数宣言ステートメントがコードの先頭にホイストされます。これは変数ホイスティングと呼ばれます。

コンソール.ログ(a);
変数 a = 1;

上記のコードは、まず console.log メソッドを使用して、変数 a の値をコンソール (コンソール) に表示します。この時点では、変数 a は宣言されておらず、値も割り当てられていないため、これは間違ったアプローチですが、実際にはエラーは報告されません。変数昇格があるので、実際に実行するのは以下のコードです。

変数a;
コンソール.ログ(a);
a = 1;

最終的な結果は「undefine」です。これは、変数「a」は宣言されていますが、値が割り当てられていないことを意味します。

識別子

識別子は、さまざまな値を識別するために使用される正式な名前です。最も一般的な識別子は、変数名と後述する関数名です。 JavaScript 言語の識別子では大文字と小文字が区別されるため、「a」と「A」は 2 つの異なる識別子です。

識別子には一連の命名規則があり、その規則に従わないものは不正な識別子です。 JavaScript エンジンが不正な識別子を検出すると、エラーが報告されます。

簡単に言うと、識別子の命名規則は次のとおりです。

  • 最初の文字には、ドル記号 ($) およびアンダースコア (_) だけでなく、任意の Unicode 文字 (英語の文字および他の言語の文字を含む) を使用できます。
  • 2 文字目以降は、Unicode 文字、ドル記号、アンダースコアに加えて、数字 0-9 も使用できます。

以下は法的な識別子です。

引数0
_tmp
$elem
π

以下は不正な識別子です。

1a // 最初の文字を数字にすることはできません
23 // 上記と同じ
*** // 識別子にアスタリスクを含めることはできません
a+b // 識別子にプラス記号を含めることはできません
-d // 識別子にはマイナス記号やハイフン行を含めることはできません

中国語は法的な識別子であり、変数名として使用できます。

var 一時変数 = 1;

JavaScript には、識別子として使用できない予約語がいくつかあります: argument、break、case、catch、class、const、 continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for ,function,if,implements,import,in,instanceof,interface,let,new,null,package,private,protected,public,return,static,super,switch,this,throw,true,try,typeof,var,void 、しながら、と、降伏します。

コメント

JavaScript エンジンによって無視されるソース コードの部分はコメントと呼ばれ、その機能はコードを説明することです。 JavaScript ではコメントを記述する 2 つの方法が提供されています。1 つは // で始まる単一行のコメントで、もう 1 つは /* と */ の間に配置される複数行のコメントです。

// これは 1 行のコメントです

/*
 これは
 複数行
 コメント
*/

さらに、JavaScript は歴史的に HTML コード内のコメントと互換性があるため、<!-- および --> も正当な単一行コメントとみなされます。

x = 1; <!-- x = 2;
--> x = 3;

上記のコードでは x = 1 のみが実行され、他の部分はコメントアウトされています。

--> は行頭でのみ単一行コメントとして扱われ、それ以外の場合は通常の操作として扱われることに注意してください。

関数カウントダウン(n) {
  while (n --> 0) console.log(n);
}
カウントダウン(3)
// 2
// 1
// 0

上記のコードでは、「n --> 0」は実際には「n--> 0」として扱われるため、2、1、0 が出力されます。

ブロック

JavaScript は中括弧を使用して、「ブロック」と呼ばれる複数の関連するステートメントをグループ化します。

var コマンドの場合、JavaScript のブロックは個別のスコープを構成しません。

{
  変数 a = 1;
}

// 1

上記のコードは、ブロック内で var コマンドを使用して変数 a を宣言して代入していますが、ブロックの外では変数 a は引き続き有効です。ブロックは var コマンドの別個のスコープを構成しません。ブロックを使用する場合には違いはありません。 JavaScript 言語では、ブロックを単独で使用することは一般的ではありません。ブロックは、「for」、「if」、「while」、「function」など、他のより複雑な文法構造を形成するためによく使用されます。

条件文

JavaScript では条件判定を行うための「if」構造と「switch」構造を用意しており、あらかじめ設定した条件が満たされた場合にのみ、対応するステートメントが実行されます。

if 構造

「if」構造は、最初に式のブール値を決定し、次にブール値の真偽に基づいてさまざまなステートメントを実行します。いわゆるブール値は、JavaScript の 2 つの特別な値を指します。「true」は「true」を意味し、「false」は「false」を意味します。

if (ブール値)
  声明;

// または
if (ブール値) ステートメント;

上記は、「if」構造の基本的な形式です。 「ブール値」は条件式によって生成されることが多く、式の評価を示すために括弧内に置く必要があることに注意してください。式が「true」と評価された場合、その直後のステートメントが実行され、結果が「false」の場合、その直後のステートメントはスキップされます。

if (m === 3)
  m = m + 1;

上記のコードは、「m」が 3 に等しい場合にのみ、その値が 1 ずつ増加することを示しています。

この書き方では、条件式の後にステートメントを 1 つだけ指定する必要があります。複数のステートメントを実行する場合は、「if」の条件判定の後に中括弧を追加してコード ブロックを示す必要があります（複数のステートメントが 1 つのステートメントに結合されます）。

if (m === 3) {
  m += 1;
}

ステートメントの挿入が容易になるため、「if」ステートメント内では常に中括弧を使用することをお勧めします。

if の後の式では、代入式 (=)、厳密等価演算子 (===)、および等価演算子 (==) を混同しないように注意してください。特に、代入式には比較効果がありません。

var x = 1;
変数y = 2;
if (x = y) {
  コンソール.ログ(x);
}
//「2」

上記のコードの本来の目的は、「x」が「y」と等しい場合に、関連するステートメントが実行されることです。しかし、代入式として厳密等価演算子を誤って書いてしまい、結果は変数「x」に「y」を代入し、変数「x」の値（2に等しい）を判定するというブール値になってしまいました（結果は「true」です）。

この種のエラーでは通常はブール値が生成されるため、エラーは報告されません。この状況を避けるために、一部の開発者は演算子の左側に定数を記述することに慣れています。この場合、等価演算子を誤って代入演算子として記述すると、定数を代入できないためエラーが報告されます。

if (x = 2) { // エラーは報告されませんでした
if (2 = x) { // エラー

「等価演算子」(==) よりも「厳密等価演算子」(===) が好まれる理由については、「演算子」の章を参照してください。

if...else 構造

「if」コード ブロックの後に、条件が満たされない場合に実行されるコードを示す「else」コード ブロックが存在することもあります。

if (m === 3) {
  // 条件が満たされた場合に実行されるステートメント
} それ以外 {
  //条件が満たされない場合に実行されるステートメント
}

上記のコードは、変数 m が 3 に等しいかどうかを判断します。等しい場合は if コード ブロックが実行され、そうでない場合は else コード ブロックが実行されます。

同じ変数に対して複数の判定を行う場合、複数の「if...else」文をまとめて書くことができます。

if (m === 0) {
  // ...
} else if (m === 1) {
  // ...
} else if (m === 2) {
  // ...
} それ以外 {
  // ...
}

else ブロックは常に、それに最も近い if ステートメントとペアになります。

変数m = 1;
var n = 2;

if (m !== 1)
if (n === 2) console.log('hello');
それ以外の場合は console.log('world');

上記のコードは出力を生成しません。また、「else」コード ブロックの後に最も近い「if」ステートメントが続くため、「else」コード ブロックは実行されません。これは次のコードと同等です。

if (m !== 1) {
  if (n === 2) {
    console.log('こんにちは');
  } それ以外 {
    console.log('世界');
  }
}

else ブロックを先頭の if ステートメントの後に配置したい場合は、中括弧の位置を変更する必要があります。

if (m !== 1) {
  if (n === 2) {
    console.log('こんにちは');
  }
} それ以外 {
  console.log('世界');
}
//世界

スイッチ構造

複数の if...else を一緒に使用する場合、より便利な switch 構造を使用できます。

スイッチ（フルーツ）{
  「バナナ」の場合：
    // ...
    壊す;
  「リンゴ」の場合:
    // ...
    壊す;
  デフォルト：
    // ...
}

上記のコードは、変数 fruit の値に基づいて、対応する case を選択して実行します。すべての case が満たされない場合、最後の default 部分が実行されます。各 case コード ブロック内に少なくとも break ステートメントが存在する必要があることに注意してください。そうでない場合、次の case コード ブロックが switch 構造から飛び出す代わりに実行されます。

var x = 1;

スイッチ (x) {
  ケース1:
    console.log('x は 1 に等しい');
  ケース 2:
    console.log('x は 2 に等しい');
  デフォルト：
    console.log('x は他の値と等しい');
}
// x は 1 に等しい
// x は 2 に等しい
// x は他の値と等しい

上記のコードでは、case コード ブロックに break ステートメントがないため、switch 構造から飛び出すことはなく、実行は継続されます。正しい書き方は以下の通りです。

スイッチ (x) {
  ケース1:
    console.log('x は 1 に等しい');
    壊す;
  ケース 2:
    console.log('x は 2 に等しい');
    壊す;
  デフォルト：
    console.log('x は他の値と等しい');
}

式は、switch ステートメント部分と case ステートメント部分の両方で使用できます。

スイッチ (1 + 3) {
  ケース 2 + 2:
    f();
    壊す;
  デフォルト：
    決して起こらない();
}

上記のコードの「default」部分は決して実行されません。

switch ステートメントの後の式と case ステートメントの後の式を比較する場合、等価演算子 ( ==) の代わりに厳密等価演算子 (===) が使用されることに注意してください。これは、比較時に型変換が行われないことを意味します。

var x = 1;

スイッチ (x) {
  真の場合:
    console.log('x 型変換が発生しました');
    壊す;
  デフォルト：
    console.log('x 型変換は発生しませんでした');
}
// x で型変換は行われませんでした

上記のコードでは、変数 x は型変換を受けないため、case true の状況は実行されません。これは、「厳密等価演算子」が switch ステートメントの内部で使用されていることを示しています。詳細については、「演算子」セクションを参照してください。

三項演算子 ?:

JavaScript には三項演算子 (つまり、演算子が 3 つ必要な演算子) ?: もあり、これも論理的な判断に使用できます。

(条件) 式1 : 式2

上記のコードでは、「条件」が「true」の場合は「式 1」の値が返され、それ以外の場合は「式 2」の値が返されます。

var 偶数 = (n % 2 === 0) true : false;

上記のコードでは、「n」が 2 で割り切れる場合、「even」は「true」に等しく、それ以外の場合は「false」に等しくなります。これは次の形式と同等です。

var 偶数。
if (n % 2 === 0) {
  偶数 = 真;
} それ以外 {
  偶数 = false;
}

この三項演算子は「if...else...」の短縮形と考えることができるため、さまざまな状況で使用できます。

var myVar;
コンソール.log(
  私の変数?
  'myVar には値があります' :
  「myVar には値がありません」
)
// myVar には値がありません

上記のコードは、三項演算子を使用して、対応するプロンプトを出力します。

var msg = '数値' + n + 'is' + (n % 2 === 0 ? '偶数' : '奇数');

上記のコードは、三項演算子を使用して文字列に異なる値を挿入します。

ループステートメント

ループ ステートメントは操作を繰り返し実行するために使用され、さまざまな形式があります。

while ループ

「while」ステートメントは、ループ条件とコード ブロックで構成されます。条件が true である限り、コード ブロックはループ内で実行されます。

その間（条件）
  声明;

// または
while (条件) ステートメント;

「while」ステートメントのループ条件は式なので、括弧で囲む必要があります。コード ブロック部分では、ステートメントが 1 つしかない場合は中括弧を省略できますが、そうでない場合は中括弧を追加する必要があります。

while (条件) {
  声明;
}

以下は「while」ステートメントの例です。

変数 i = 0;

while (i < 100) {
  console.log('i は現在: ' + i);
  i = i + 1;
}

上記のコードは、「i」が 100 になるまで 100 回ループします。

以下の例は、ループ条件が常に true であるため、無限ループになります。

while (true) {
  console.log('Hello, world');
}

for ループ

「for」ステートメントは、ループの開始点、終了点、および終了条件を指定できるループ コマンドの別の形式です。その形式は次のとおりです。

for (初期化式; 条件; インクリメント式)
  声明

// または

for (初期化式; 条件; インクリメント式) {
  声明
}

「for」ステートメントの後の括弧内には 3 つの式があります。

  • 初期化式 (initialize): ループ変数の初期値を決定し、ループの開始時に 1 回だけ実行されます。
  • 条件式 (テスト): ループの各ラウンドの開始時に、この条件式は値が true の場合にのみ実行され、ループは継続されます。
  • インクリメント式 (インクリメント): 各ループの最後の操作。通常、ループ変数をインクリメントするために使用されます。

以下に例を示します。

var x = 3;
for (var i = 0; i < x; i++) {
  コンソール.ログ(i);
}
// 0
// 1
// 2

上記のコードでは、初期化式は var i = 0、つまり変数 i が初期化されます。テスト式は i < x、つまり i が より小さい限りです。 x、ループが実行されます; インクリメント式 式は i++、つまり各ループが終了すると i が 1 ずつ増加します。

すべての「for」ループは「while」ループとして書き換えることができます。上記の例を while ループに変更したコードは次のようになります。

var x = 3;
変数 i = 0;

while (i < x) {
  コンソール.ログ(i);
  i++;
}

「for」ステートメントの 3 つの部分 (初期化、テスト、インクリメント) のいずれか 1 つまたはすべてを省略できます。

のために （ ; ; ）{
  console.log('Hello World');
}

上記のコードでは、「for」ステートメント式の 3 つの部分が省略されているため、無限ループが発生します。

do...while ループ

do...while ループは while ループと似ていますが、唯一の違いは、ループ本体が 1 回実行されてからループ条件が判断されることです。

する
  声明
while (条件);

// または
する {
  声明
while (条件);

条件が真であるか否かに関係なく、「do...while」ループが少なくとも 1 回実行されます。これがこの構造の最大の特徴です。また、while 文の後のセミコロンを省略しないように注意してください。

以下に例を示します。

var x = 3;
変数 i = 0;

する {
  コンソール.ログ(i);
  i++;
while(i < x);

Break ステートメントと continue ステートメント

「break」ステートメントと「Continue」ステートメントには両方ともジャンプ機能があり、既存の順序からコードを実行できます。

break ステートメントは、コード ブロックまたはループから抜け出すために使用されます。

変数 i = 0;

while(i < 100) {
  console.log('i は現在: ' + i);
  i++;
  if (i === 10) ブレーク;
}

上記のコードはループを 10 回のみ実行し、「i」が 10 に等しくなったらループから抜け出します。

「for」ループでは、「break」ステートメントを使用してループを抜け出すこともできます。

for (var i = 0; i < 5; i++) {
  コンソール.ログ(i);
  if (i === 3)
    壊す;
}
// 0
// 1
// 2
// 3

上記のコードは「i」が 3 になるまで実行され、ループが抜けます。

「Continue」ステートメントは、現在のサイクルを直ちに終了し、ループ構造の先頭に戻り、次のサイクルを開始するために使用されます。

変数 i = 0;

while (i < 100){
  i++;
  if (i % 2 === 0) 続行;
  console.log('i は現在: ' + i);
}

上記のコードは、「i」が奇数の場合にのみ「i」の値を出力します。 i が偶数の場合は、直接次のサイクルに入ります。

複数のループがある場合、パラメーターのない break ステートメントと continue ステートメントは最も内側のループのみを対象とします。

ラベル

JavaScript 言語では、ステートメントの前にラベルを付けることができます。ラベルはロケーターに相当し、プログラム内の任意の場所にジャンプするために使用されます。ラベルの形式は次のとおりです。

ラベル：
  声明

ラベルには任意の識別子を使用できますが、予約語は使用できません。また、ステートメント部分には任意のステートメントを使用できます。

ラベルは通常、特定のループから抜け出すために、break ステートメントおよび continue ステートメントと組み合わせて使用​​されます。

トップ：
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) ブレークトップ;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0、j=0
// i=0、j=1
// i=0、j=2
// i=1、j=0

上記のコードは、二重ループ ブロックです。break コマンドの後にtop タグが追加されています (top を引用符で囲む必要はないことに注意してください)。条件が満たされると、二重層ループがジャンプされます。直接出ます。 break ステートメントの後にラベルが使用されていない場合は、内側のループから抜け出して次の外側のループに入ることができるだけです。

タグは、コード ブロックから抜け出すためにも使用できます。

フー: {
  コンソール.ログ(1);
  ブレイクフー;
  console.log('この行は出力されません');
}
コンソール.ログ(2);
// 1
// 2

上記のコードを実行して「break foo」を実行すると、ブロックが飛び出します。

「Continue」ステートメントはラベルとともに使用することもできます。

トップ：
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) トップに進みます。
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0、j=0
// i=0、j=1
// i=0、j=2
// i=1、j=0
// i=2、j=0
// i=2、j=1
// i=2、j=2

上記のコードでは、「Continue」コマンドの後にラベル名があります。条件が満たされると、現在のループはスキップされ、次の外側のループに直接入ります。 「Continue」ステートメントの後にラベルが使用されていない場合は、内側のループの次のラウンドにのみ入ることができます。

参考リンク

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章