１.Javascript基本文法

JavaScriptの基本文法

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

文言

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

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

var a = 1 + 3 

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

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

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

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

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

;;;

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

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

1 + 3 ;
'abc' ;

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

変数

コンセプト

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

var a = 1 ;

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

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

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

var a ;
a = 1 ;

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

var a ;
a // undefined 

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

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

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

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

x 
// ReferenceError: x is not defined 

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

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

var a, b 

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

var a = 1 ;
a = 'hello' ;

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

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

var x = 1 ;
var x ;
x // 1 

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

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

var x = 1 ;
var x = 2 ;

//に等しい 

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

変数アップ

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

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

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

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

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

識別子

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

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

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

最初の文字は、アルファベットや他の言語を含むUnicodeの任意の文字、ドル($)やアンダーライン(_)で表すことができます。

• 2番目以降の文字は、Unicode文字、ドル記号、アンダーラインのほか、数字0-9を使用することができます。

以下は正当な識別子

arg0 
_tmp 
$elem 
π 

以下は違法な識別子

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

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

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はHTMLコードの注釈と互換性があります<!——と-->も合法的な単行注釈とみなされます。

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

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

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

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

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

ブロック

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

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

{ 
var a = 1 ;
} 

a // 1 

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

条件文

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

if構成

if構造は、ある式のブール値を判断し、ブール値の真偽に応じて異なる文を実行します。ブール値とはJavaScriptの2つの特殊な値のことで、「true」は「真」を、「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 ;
var y = 2 ;
if (x = y){ 
console.log(x);
} 
"2" 

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

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

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

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

if …else構造

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

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

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

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

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

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

var m = 1;
var n = 2;

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

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

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

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

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

switchの仕組み

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

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

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

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構造から飛び出すことなく、ずっと実行されます。正しくは次のようになります。

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

「switch」文の部分と「case」文の部分では、どちらも式を使うことができます。

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

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

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

var x = 1;

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

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

三元演算子 ?: 。

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

条件 ?式1:式2 

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

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

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

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

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

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

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

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

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

ループ文

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

whileループ

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

while(条件 )
語句 ;

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

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

while(条件){ 
語句 ;
} 

以下は「while」文の一例 。

var i = 0 ;

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

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

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

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

forループ

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

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

//あるいは 

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

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

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

次は一例 。

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ループにすると、次のようになります。

var x = 3 ;
var i = 0 ;

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

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

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

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

ど… whileループ

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

do 
語句 
while(条件);

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

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

次は一例 。

var x = 3 ;
var i = 0 ;

do{ 
    console.log(i);
    i++ ;
while(i < x) ;

break文とcontinue文

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

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

var i = 0 ;

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

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

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

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

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

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

var i = 0;

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

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

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

タグ(label)

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

labelさん 
語句 

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

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

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」文の後にラベルが使われていなければ、内側のループから出て次の外側のループに入るしかありません。

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

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

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

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

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)