１.Javascript基本文法

JavaScriptの基本文法 

> 警告: 記事は機械翻訳があるため、学習メモとして保存、学習参考用のみ

## 文言 

JavaScriptのプログラムは行(line)単位で、1行ずつ実行されます。普通は1行が1文 。

ステートメント(statement)とは、あるタスクを達成するために行う作業のことで、例えば次のような代入文の一行 。

```javascript 
var a = 1 + 3 
``` 

この文はまず`var`の命令で変数`a`を宣言して、それから`1 + 3`の演算結果を変数`a`に値を与えます。

`1 + 3`は式(expression)と呼ばれ、戻り値を得るための計算式を指します。文と式の違いは、前者は主に何らかの操作を行うためのもので、一般的には値を返す必要がないこと 。後者は戻り値を得るために必ず一つの値を返します。JavaScriptでは値が予想されるところでは式を使うことができます。例えば、代入文のイコールの右側は、1つの値が期待されるので、様々な式を配置することができます。

文はセミコロンで終わりますセミコロンは文の終わりを表します複数の文を1行に書くことができます。

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

セミコロンの前には何も書かれていなくてもよく、JavaScriptエンジンでは空文として扱われます。

```javascript 
;;;
``` 

コードは3つの空文を表しています

式にセミコロンの終わりは必要ありません。式の後にセミコロンを追加すると、JavaScriptエンジンは式を文として扱い、意味のない文を生成します。

```javascript 
1 + 3 ;
'abc' ;
``` 

上の2行の文は単に1つの値を生成しているだけで、実際の意味はありません。

変数 

### コンセプト 

変数とは、「値」に対する具体的な参照 。変数には「値」という名前がついていて、その名前を引用することは、その値を引用することと同じ 。変数の名前は変数名 。

```javascript 
var a = 1 ;
``` 

先に変数`a`を宣言し、次に変数`a`と数値1の間に参照関系を結びます。これを変数`a`に数値1を「付値」すると言います。以後、変数名`a`を参照すると1になります。最初の`var`は、変数宣言コマンド 。これは変数`a`を作成する通知解釈エンジンを表します

JavaScriptでは変数名が大文字と小文字に分かれており、`A`と`A`は別の変数 。

変数の宣言と代入は別々の2つのステップで、上のコードはそれらを合わせて、実際のステップは次のようになります。

```javascript 
var a ;
a = 1 ;
``` 

変数が宣言されていて代入されていない場合、変数の値は「undefined」 。「undefined」は「無定義」を表す特別な値 。

```javascript 
var a ;
a // undefined 
``` 

もし変数の代入の時、var命令を書き忘れたなら、この文も有効 。

```javascript 
var a = 1 ;
//ほぼ同等 
a = 1 ;
``` 

ただし、「var」を書かないのは、意図を伝えにくいし、知らず知らずのうちにグローバル変数を作ってしまいがちなので、常に「var」コマンドで変数を宣言することをお勧めします。

変数を宣言せずに使うと、JavaScriptは変数が未定義であるとエラーを返します。

```javascript 
x 
// ReferenceError: x is not defined 
``` 

上のコードは直接変数`x`を使用して、システムは間違いを返して、あなたに変数`x`が宣言していないことを教えます。

同じ`var`コマンド内で復数の変数を宣言することができます。

```javascript 
var a, b 
``` 

JavaScriptは動的型付け言語 。つまり、変数の型に制限はなく、変数はいつでも型を変更できます。

```javascript 
var a = 1 ;
a = 'hello' ;
``` 

上記のコードでは、変数`a`が最初に数値として割り当てられ、後に文字列として割り当てられています。2回目の代入の場合、変数`a`はすでに存在しているので、varコマンドは必要ありません。

「var」を使って既に存在する変数を宣言し直すのは無効 。

```javascript 
var x = 1 ;
var x ;
x // 1 
``` 

上のコードでは変数`x`が2回宣言されていて2回目の宣言は無効 

ただし、2回目の宣言でも付値をしていれば、前の値は上書きされてしまいます。

```javascript 
var x = 1 ;
var x = 2 ;

//に等しい 

var x = 1 ;
var x ;
x = 2 ;
``` 

### 変数アップ 

JavaScriptエンジンは、コードを構文解析して宣言された変数をすべて取得し、一行ずつ実行していきます。その結果、すべての変数の宣言文がコードの先頭に引き上げられます。これを変数引き上げ(hoisting)といいます。

```javascript 
console.log(a) ;
var a = 1 ;
``` 

上のコードはまず「console.log」という手法を使い、操作卓に変数`a`の値を表示します。この時点では変数`a`は宣言されていないので、これは間違っていますが、実際には間違ってはいません。変数の上昇があるので次のコードが実行されます

```javascript 
var a ;
console.log(a) ;
a = 1 
``` 

その結果、「undefined」が表示され、変数「a」は宣言されていますが、まだ値が割り当てられていません。

## 識別子 

識別子(identifier)とは、様々な値を識別するための正当な名称 。最も一般的な識別子は変数名と、後述する関数名 。JavaScript言語の識別子は大文字と小文字に敏感なので`a`と`a`は別の識別子 

識別子には命名規則があり、それに従わないものが不正識別子となります。JavaScriptエンジンは不正な識別子に遭遇するとエラーを返します。

簡単に言うと、識別子の命名ルールは次のようになります。

最初の文字は、アルファベットや他の言語を含むUnicodeの任意の文字、ドル(`$`)やアンダーライン(`_`)で表すことができます。
- 2番目以降の文字は、Unicode文字、ドル記号、アンダーラインのほか、数字`0-9`を使用することができます。

以下は正当な識別子 

```javascript 
arg0 
_tmp 
$elem 
π 
``` 

以下は違法な識別子 

```javascript 
1a //最初の文字は数字ではいけません
23 //同上 
*** //識別子にアスタリスクを含めることはできません。
a+b //識別子にプラス記号を含めることはできません。
-d //識別子はマイナスや接続詞を含んではいけません。
``` 

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

```javascript 
var 暫定変数 = 1 ;
``` 

> JavaScriptには識別子として使用できない予約ワードがあります:arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、f 。or、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、sup er、switch、this、throw、true、try、typeof、var、void、while、with、yield 。

## 注釈 

JavaScriptエンジンが無視しているソースコードは注釈と呼ばれ、コードを解釈する役割を果たします。JavaScriptでは2種類の注釈の書き方ができます。1つは単行の注釈で始まり`//`で始まるもの。もう一つは`/*`と`*/`の間に置かれた複数行の注釈 

```javascript 
//これは単行注釈 

/* 。
これは 
複数行 
注釈 
* /
``` 

また、歴史的にJavaScriptはHTMLコードの注釈と互換性があります`<!——`と`-->`も合法的な単行注釈とみなされます。

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



上のコードのうち、`x = 1`だけが実行され、他の部分は注釈されていません。

注意しなければならないのは、`-->`は行の先頭でのみ、単行の注釈と見なされ、そうでなければ通常の演算と見なされます。

```javascript 
function countdown(n) {
  while (n --> 0) console.log(n);
}
countdown(3)
// 2
// 1
// 0
``` 

上のコードでは`n-- > 0`は実際には`n——> 0`となるので、2、1、0を出力します。

## ブロック 

JavaScriptでは、関連する複数の文を括弧で括って「ブロック」と呼びます。

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

```javascript 
{ 
var a = 1 ;
} 

a // 1 
``` 

上のコードはブロックの内部で、varコマンドを使用して宣言して変数a`を与えて、それからブロックの外部で、変数a`は依然として有効で、ブロックはvarコマンドに対して単独のスコープを構成しないで、ブロックを使用しない場合と何の区別もありません。JavaScript言語では、ブロックを単独で使用することは一般的ではなく、` for`、`if`、`while`、`function`などの他の複雑な構文を構成するのに使われます。

条件文 

JavaScriptは「if」構造と「switch」構造を提供し、条件判定を行います。

if構成 

`if`構造は、ある式のブール値を判断し、ブール値の真偽に応じて異なる文を実行します。ブール値とはJavaScriptの2つの特殊な値のことで、「true」は「真」を、「false」は「偽」を表します。

```javascript 
if(ブール値) 
語句 ;

//あるいは 
if(ブール値) 語句 ;
``` 

上が`if`構造の基本形 。なお、「ブール値」は条件付きの式で表されることが多く、その式の値を求めることを括弧の中に入れなければなりません。式の評価結果が`true`であれば、その後に続く文を実行します。結果が「false」であれば、その後に続く文は飛ばします。

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

上記のコードは`m`が3に等しい場合のみ1を加算することを示しています。

この書き方では、条件式の後に1つの文を付けなければなりません。複数の文を実行するには、`if`の条件判断の後に、コードブロック(複数の文をまとめて1つの文にすること)を示す括弧をつけなければなりません。

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

常に`if`文の中に括弧を入れることをお勧めします。それは、文を挿入しやすいから 。

なお、`if`の後の式は、代入式(`=`)と厳密な等価演算子(`==`)と等価演算子(`==`)を混同しないようにします。特に付値式は比較になりません。

```javascript 
var x = 1 ;
var y = 2 ;
if (x = y){ 
console.log(x);
} 
"2" 
``` 

上記のコードの本来の意味は、`x`が`y`に等しいときに関連文を実行するということ 。ところが、厳密な等価演算子を代入式にしてしまうと、変数`x`にy`を代入して、変数`x`の値(2に等しい)のブール値を判定してしまうことになってしまいました(結果は`true`)。

このエラーは正常にブール値を生成するので、エラーは発生しません。これを避けるため、開発者の中には定数を演算子の左側に書く人もいます。そうすると、誤って等価演算子を賦値演算子に書くと、定数が賦値されないためエラーが発生します。

```javascript 
if (x = 2){//誤りなし
if (2 = x){//エラー 
``` 

なぜ「等価演算子」(`==`)ではなく「厳密な等価演算子」(`===`)を優先するのかについては「演算子」の項を参照されたいと思います。

if …else構造 

`if`コードブロックの後に、もう一つ`else`コードブロックが付いていて、条件を満たさない場合に実行するコードを表します。

```javascript 
if (m === 3){ 
//条件を満たした場合に実行される文 。
} else 
//条件を満たしていない場合に実行される文 。
} 
``` 

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

同じ変数を何度も判断するときは、複数の`if…else`文は一緒に書くことができます。

```javascript 
if (m === 0){ 
//… 
} else if (m === 1) {
//… 
} else if (m === 2) {
//… 
} else 
//… 
} 
``` 

`else`コードのブロックは常に自分に一番近い`if`文と対になっています。

```javascript 
var m = 1;
var n = 2;

if (m !== 1)
if (n === 2) console.log('hello');
else console.log('world');
``` 

上のコードは何の出力もありません。`else`コードのブロックは実行されません。最も近い`if`文が続くので、次のようになります。

```javascript 
if (m !== 1) {
  if (n === 2) {
    console.log('hello');
  } else {
    console.log('world');
  }
}
``` 

一番上の`if`文に`else`コードのブロックを付けるには、中括弧の位置を変えます。

```javascript 
if (m !== 1) {
  if (n === 2) {
    console.log('hello');
  }
} else {
  console.log('world');
}
// world
``` 

switchの仕組み 

複数の`if …else`をつなげて使う時は、より使いやすいswitch`構造に切り替えることができます。

```javascript 
switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}
``` 

上のコードは変数`fruit`の値によって、対応する`case`を選択して実行します。すべてのケースが該当しない場合は、最後のdefault部分を実行します。各`case`コードブロック内の`break`文が少なくないことに注意が必要 。そうでないと、次の`case`コードブロックが実行され、`switch`構造から飛び出すのではありません。

```javascript 
var x = 1;

switch (x) {
  case 1:
    console.log('x 等1');
  case 2:
    console.log('x 等2');
  default:
    console.log('x 等3');
}
// x等1
// x等2
// x等3
``` 

上のコードでは、`case`コードブロックの中に`break`文がないため、`switch`構造から飛び出すことなく、ずっと実行されます。正しくは次のようになります。

```javascript 
switch (x) {
  case 1:
    console.log('x 等1');
    break;
  case 2:
    console.log('x 等2');
    break;
  default:
    console.log('x 等');
}
``` 
「switch」文の部分と「case」文の部分では、どちらも式を使うことができます。

```javascript 
sswitch (1 + 3) {
  case 2 + 2:
    f();
    break;
  default:
    neverHappens();
}
``` 

上のコードの「default」部分は、永久に実行されません。

なお、`switch`文の後の式は、`case`文の後の式と実行結果を比較する際に、等価演算子(`==`)ではなく厳密な等価演算子(`==`)を使用しているため、比較時に型変換が発生しないことを意味します。

```javascript 
var x = 1;

switch (x) {
  case true:
    console.log('x 値タイプ変更した');
    break;
  default:
    console.log('x 値タイプ変更しなかった');
}
// x 値タイプ変更した
``` 

上記のコードでは変数`x`が型変換されないため`case true`が実行されない場合があります。これは`switch`文の内部に「厳密な等価演算子」が採用されていることを示していますが、詳しくは演算子の項を参照してください。

### 三元演算子 ?: 。

JavaScriptには3種類の演算子があります(3つの演算子が必要 )`?論理的な判断にも使えます。

```javascript 
条件 ?式1:式2 
``` 

上記のコードでは、"条件"が' true 'の場合は"式1 "の値を返し、そうでない場合は"式2 "の値を返します。

```javascript 
var even = (n % 2 == 0) ?true: false ;
``` 

上記のコードでは、`n`が2で割り切れば`even`は`true`、そうでなければ`false`に等しくなります。それは次のような形に等しいの 。

```javascript 
var even;
if (n % 2 === 0) {
  even = true;
} else {
  even = false;
}
``` 

この三項演算子は`if…と見ることができます。else… `の略字なので、いろいろな場面で使うことができます。

```javascript 
var myVar;
console.log(
  myVar ?
  'myVar has a value' :
  'myVar does not have a value'
)
// myVar does not have a value
``` 

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

```javascript 
var msg = '数字' + n + '是' + (n % 2 === 0 ? '偶数' : '奇数');
``` 

上記のコードは3つの演算子を使って文字列に異なる値を挿入します

## ループ文 

ループ文は、ある操作を繰り返し実行するためのもので、いくつかの形式があります。

### whileループ 

「while」文にはループ条件とコードブロックが含まれ、条件が真である限りループ実行されます。

```javascript 
while(条件 )
語句 ;

//あるいは 
while(条件)文 ;
``` 

' while '文の巡回条件は式で括弧の中に入れなければなりませんコードブロック部分は、1文しかない場合は中括弧を省略し、そうでない場合は中括弧を入れなければなりません。

```javascript 
while(条件){ 
語句 ;
} 
``` 

以下は「while」文の一例 。

```javascript 
var i = 0 ;

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

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

次の例は無限ループ ループ条件は常に真 から

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

### forループ 

`for`文はループコマンドの別の形で、ループの始点、終点、終了条件を指定します。そのフォーマットは以下の通り 。

```javascript 
for(初期化の式 ;条件 ;増分式 )
語句 

//あるいは 

for(初期化の式 ;条件 ;インクリメント式){ 
語句 
} 
``` 

`for`の括弧内には3つの式があります

-初期化式(initialize):ループ変数の初期値を決定します。
-条件付き表現(test):各ループの開始時にこの条件付き表現を実行します。
-インクリメント:各ループの最後の操作で、通常はループ変数をインクリメントします。

次は一例 。

```javascript 
var x = 3 ;
for (var i = 0 ;i < x ;i++){ 
console.log(i);
} 
// 0 
// 1 
// 2 
``` 

上記のコードでは、初期化式は「var i = 0」 。変数`i`を初期化します。テスト式は`i < x` 。つまり、`i`が`x`より小さい場合、ループを実行します。インクリメント式は`i++`でループが終了するたびに`i`が1ずつ増加します

すべての`for`ループは、whileループに書き換えることができます。上記の例を`whileループにすると、次のようになります。

```javascript 
var x = 3 ;
var i = 0 ;

while (i < x) 
console.log(i);
i++ 。
} 
``` 

`for`文の3つの部分(initialize、test、increment)は、どれも省略してもいい し、全部省略してもいい 。

```javascript 
for ( ; ; ){
  console.log('Hello World');
}
``` 

上のコードは`for`文の3つの部分を省略しており無限ループになっています

### ど… whileループ 

`ど… whileループはwhileループと似ていますが、1回ループを回してからループ条件を判断するという違いがあります。

```javascript 
do 
語句 
while(条件);

//あるいは 
do{ 
語句 
} while(条件);
``` 

条件が真かどうかに関わらず,`do… この仕組みの最大の特徴は、whileループが最低1回は動くということ 。また、「while」の後のセミコロンは省略しないように注意します。

次は一例 。

```javascript 
var x = 3 ;
var i = 0 ;

do{ 
    console.log(i);
    i++ ;
while(i < x) ;
``` 
### break文とcontinue文 

「break」文と「continue」文にはジャンプ機能があり、コードが既存の順序で実行されないようにすることができます。

「break」文はコードブロックやループから飛び出すときに使われます。

```javascript 
var i = 0 ;

while(i < 100) 
console.log('iは現在:' + i );
i++ 。
if (i === 10) break; 。
} 
``` 

上のコードは10ループしか実行しません`i`が10になるとループから飛び出します

`for`ループは`break`文を使ってループから飛び出すこともできます。

```javascript 
for (var i = 0 ;i < 5 ;i++){ 
    console.log(i);
    if (i === 3 )
        break ;
} 
// 0 
// 1 
// 2 
// 3 
``` 

上のコードを`i`が3になるまで実行するとループから飛び出します。

`continue`文はループを直ちに終了させ、ループ構造の先頭に戻って次のループを開始します。

```javascript 
var i = 0;

while (i < 100){
  i++;
  if (i % 2 === 0) continue;
  console.log('i 当前为：' + i);
}
``` 

上のコードは`i`が奇数の場合のみ`i`の値を出力します。`i`が偶数の場合は、そのまま次のループに進みます。

複数のループが存在する場合、パラメータを持たない`break」文と`continue」文は、最も内側のループのみを対象とします。

### タグ(label) 

JavaScriptでは、文の前にロケータに相当するラベル(label)があり、以下のような形式でプログラムの任意の場所に飛ぶことができます。

```javascript 
labelさん 
語句 
``` 

ラベルは任意の識別子で構いませんが、予約語ではなく、文の部分は任意の文で構いません。

タグは通常、「break」文と「continue」文と一緒に使用され、特定のループから飛び出します。

```javascript 
top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      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」文の後にラベルが使われていなければ、内側のループから出て次の外側のループに入るしかありません。

タグはコードブロックから飛び出すときにも使えます。

```javascript 
foo:{ 
console.log(1);
break foo ;
console.log('当行は出力しません');
} 
console.log(2);
// 1 
// 2 
``` 

コードが「break foo」まで実行されるとブロックから飛び出します

「continue」文はタグと併用することもできます。

```javascript 
top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) continue top;
      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`文の後にラベルが使用されていない場合は、次の内部ループに進むしかありません。

##リンク参照 

−アクセルrauschmayer、[ベーシックjavascript for the impatient programmer] (https://2ality.com/2013/06/basic-javascript.html)