JavaScript
条件

前書き

構文

• if（ 条件 ） ステートメント 。
• if（ 条件 ） statement_1 、 statement_2 、 ... 、 statement_n ;
• if（ 条件 ）{
  ステートメント
  }
• if（ 条件 ）{
  statement_1 ;
  statement_2 ;
  ...
  statement_n ;
  }
• if（ 条件 ）{
  ステートメント
  } else {
  ステートメント
  }
• if（ 条件 ）{
  ステートメント
  } else if（ 条件 ）{
  ステートメント
  } else {
  ステートメント
  }
• スイッチ（ 式 ）{
  case value1 ：
  ステートメント
  [ブレーク;]
  ケース値2 ：
  ステートメント
  [ブレーク;]
  大文字小文字N ：
  ステートメント
  [ブレーク;]
  デフォルト：
  ステートメント
  [ブレーク;]
  }
• 条件 ？ value_for_true ： value_for_false ;

備考

If / Else If / Elseコントロール

最も簡単な形式では、 if条件は次のように使用できます。

var i = 0;

if (i < 1) {
    console.log("i is smaller than 1");
}

条件i < 1が評価され、それがtrueと評価されるtrue 、後続のブロックが実行される。 falseと評価されfalse場合、ブロックはスキップされます。

if条件は、 elseブロックで展開できます。条件は上記のように1回チェックされ、 falseと評価された場合は2次ブロックが実行されます（条件がtrueあればスキップされtrue ）。例：

if (i < 1) {
    console.log("i is smaller than 1");
} else {
    console.log("i was not smaller than 1");
}

仮にelseブロックは、他の何も含まれていないif （必要に応じてとブロックelseこのようなブロックを）：

if (i < 1) {
    console.log("i is smaller than 1");
} else {
    if (i < 2) {
        console.log("i is smaller than 2");
    } else {
        console.log("none of the previous conditions was true");
    }
}

次に、ネストを減らすためにこれを書く別の方法もあります。

if (i < 1) {
    console.log("i is smaller than 1");
} else if (i < 2) {
    console.log("i is smaller than 2");
} else {
    console.log("none of the previous conditions was true");
}

上記の例に関するいくつかの重要な脚注：

• いずれかの条件がtrueと評価されたtrue 、そのブロックのチェーン内の他の条件は評価されず、対応するすべてのブロック（ elseブロックを含む）は実行されません。

• else if部分の数は事実上無制限です。上記の最後の例には1つしか含まれていませんが、あなたが好きな数だけ持つことができます。

• if文の中の条件は 、ブール値に強制することができるものでifどれでもかまいません。詳細についてはブール論理に関するトピックを参照してください。

• if-else-ifラダーは、最初の成功時に終了します。つまり、上記の例では、 iの値が0.5の場合、最初の分岐が実行されます。条件が重複する場合は、実行フローで発生する最初の基準が実行されます。真である可能性のある他の条件は無視されます。

• 文が1つしかない場合は、その文の中かっこは技術的に任意です（例：

  if (i < 1) console.log("i is smaller than 1");
  

  そしてこれもうまくいくでしょう：

  if (i < 1) 
      console.log("i is smaller than 1");
  

  ifブロックの中で複数のステートメントを実行したい場合は、それらのまわりの中括弧は必須です。インデントを使用するだけでは不十分です。たとえば、次のコード：

  if (i < 1) 
      console.log("i is smaller than 1");
      console.log("this will run REGARDLESS of the condition"); // Warning, see text!
  

  次のものと同等です。

  if (i < 1) {
      console.log("i is smaller than 1");
  }
  console.log("this will run REGARDLESS of the condition");
  

スイッチ文

switch文は、式の値を1つ以上の値と比較し、その比較に基づいて異なるコードセクションを実行します。

var value = 1;
switch (value) {
  case 1:
    console.log('I will always run');
    break;
  case 2:
    console.log('I will never run');
    break;
}

breakステートメントはswitchステートメントから "壊れ"、switchステートメント内のコードがそれ以上実行されないようにします。これは、セクションがどのように定義され、ユーザーが「フォールスルー」ケースを作成するかを示します。

警告 ：各ケースごとにbreakまたはreturnステートメントがないことは、ケース基準が満たされていなくても、プログラムが次のケースを評価し続けることを意味します。

switch (value) {
  case 1:
    console.log('I will only run if value === 1');
    // Here, the code "falls through" and will run the code under case 2
  case 2:
    console.log('I will run if value === 1 or value === 2');
    break;
  case 3:
    console.log('I will only run if value === 3');
    break;
}

最後のケースはdefaultケースです。これは他のマッチがなかった場合に実行されます。

var animal = 'Lion';
switch (animal) {
  case 'Dog':
    console.log('I will not run since animal !== "Dog"');
    break;
  case 'Cat':
    console.log('I will not run since animal !== "Cat"');
    break;
  default:
    console.log('I will run since animal does not match any other case');
}

case式はどのような式でもよいことに注意してください。これは、比較、関数呼び出しなどを大文字と小文字の区別として使用できることを意味します。

function john() {
  return 'John';
}

function jacob() {
  return 'Jacob';
}

switch (name) {
  case john(): // Compare name with the return value of john() (name == "John")
    console.log('I will run if name === "John"');
    break;
  case 'Ja' + 'ne': // Concatenate the strings together then compare (name == "Jane")
    console.log('I will run if name === "Jane"');
    break;
  case john() + ' ' + jacob() + ' Jingleheimer Schmidt':
    console.log('His name is equal to name too!');
    break;
}

ケースの複数の包括的な基準

ケースはbreakまたはreturnステートメントなしで "フォールスルー"するので、これを使用して複数の包括的な基準を作成できます。

var x = "c"
switch (x) {
   case "a":
   case "b":
   case "c":
      console.log("Either a, b, or c was selected.");
      break;
   case "d":
      console.log("Only d was selected.");
      break;
   default:
      console.log("No case was matched.");
      break;  // precautionary break if case order changes
}

三項演算子

if / else操作を短縮するために使用できます。これは、値をすばやく返すために（つまり、別の変数に代入するために）便利です。

例えば：

var animal = 'kitty';
var result = (animal === 'kitty') ? 'cute' : 'still nice';

この場合、animalの値は 'kitty'なので、 resultは 'cute'という値を取得します。動物が別の価値を持っていれば、結果は「まだ良い」価値を得るでしょう。

if/else条件でコードが望むものとこれを比較してください。

var animal = 'kitty';
var result = '';
if (animal === 'kitty') {
    result = 'cute';
} else {
    result = 'still nice';
}

ifやelseの条件は、いくつかの操作を有することができます。この場合、演算子は最後の式の結果を返します。

var a = 0;
var str = 'not a';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2);

aは0に等しいので1になり、 strは 'テストではありません'になりstr 。 strに関係する操作が最後であるため、 bは操作の結果を受け取ります。これはstrに含まれる値、つまり 'テストではない'です。

三項演算子は常に else条件を期待します。そうしないと、構文エラーが発生します。回避策として、elseブランチに似たゼロを返すことができます。戻り値を使用せず、操作を短くする（または短くしようとする）場合は、これは問題ではありません。

var a = 1;
a === 1 ? alert('Hey, it is 1!') : 0;

あなたが見るようにif (a === 1) alert('Hey, it is 1!');同じことをするだろう。それは義務的なelse条件を必要としないので、ちょうどcharより長くなります。 else条件が含まれていれば、三項法はもっときれいになります。

a === 1 ? alert('Hey, it is 1!') : alert('Weird, what could it be?');
if (a === 1) alert('Hey, it is 1!') else alert('Weird, what could it be?');

ターナリは、追加のロジックをカプセル化するために入れ子にすることができます。例えば

foo ? bar ? 1 : 2 : 3

// To be clear, this is evaluated left to right 
// and can be more explicitly expressed as:

foo ? (bar ? 1 : 2) : 3

これはif/elseと同じif/else

if (foo) {
  if (bar) {
    1
  } else {
    2
  }
} else {
  3
}

文法的には、これは短い変数名でのみ使用してください。複数行の三項では読みやすさが大幅に低下する可能性があります。

三項で使用できない唯一の文は制御文です。たとえば、3進数ではreturnまたはbreakを使用できません。次の式は無効になります。

var animal = 'kitty';
for (var i = 0; i < 5; ++i) {
    (animal === 'kitty') ? break:console.log(i);
}

returnステートメントの場合、以下も無効です。

var animal = 'kitty';
(animal === 'kitty') ? return 'meow' : return 'woof';

上記を適切に実行するには、次のように3項を返します。

var animal = 'kitty';
return (animal === 'kitty') ? 'meow' : 'woof';

戦略

多くの場合、Javascriptではswitch文を置き換えるためにstrategyパターンを使用することができます。条件の数が動的または非常に大きい場合に特に役立ちます。これにより、各条件のコードを独立してテスト可能にすることができます。

ストラテジオブジェクトは、複数の機能を持つオブジェクトであり、それぞれ別の条件を表す単純なオブジェクトです。例：

const AnimalSays = {
    dog () {
        return 'woof';
    },

    cat () {
        return 'meow';
    },

    lion () {
        return 'roar';
    },

    // ... other animals

    default () {
        return 'moo';
    }
};

上記目的は以下のように使用することができる。

function makeAnimalSpeak (animal) {
    // Match the animal by type
    const speak = AnimalSays[animal] || AnimalSays.default;
    console.log(animal + ' says ' + speak());
}

結果：

makeAnimalSpeak('dog') // => 'dog says woof'
makeAnimalSpeak('cat') // => 'cat says meow'
makeAnimalSpeak('lion') // => 'lion says roar'
makeAnimalSpeak('snake') // => 'snake says moo'

最後のケースでは、デフォルトの関数が不足している動物を処理します。

||を使う&&短絡

ブール演算子|| &&は「短絡」し、最初のパラメータがtrueまたはfalseの場合は2番目のパラメータを評価しません。これは以下のような短い条件文を書くために使うことができます：

var x = 10

x == 10 && alert("x is 10")
x == 10 || alert("x is not 10")