ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

論理演算子

著者：Eve Cole 更新時間：2025-01-09 14:03:05

JavaScript には 4 つの論理演算子があります。 || (OR)、 && (AND) ! （ない）、 ?? (ヌリッシュ合体)。ここでは最初の 3 つ、 ??について説明します。オペレーターは次の記事で説明します。

これらは「論理的」と呼ばれていますが、ブール値だけでなく、あらゆるタイプの値に適用できます。結果は任意のタイプにすることもできます。

詳細を見てみましょう。

|| （または）

「OR」演算子は 2 本の縦線の記号で表されます。

結果 = a || b;

従来のプログラミングでは、論理 OR はブール値のみを操作することを目的としています。引数のいずれかがtrueの場合はtrueを返し、それ以外の場合はfalseを返します。

JavaScript では、演算子は少し複雑で強力です。まず、ブール値で何が起こるかを見てみましょう。

可能な論理的な組み合わせは 4 つあります。

アラート( true || true );   // 真実
アラート( false || true );  // 真実
アラート( true || false );  // 真実
アラート( false || false ); // 間違い

ご覧のとおり、両方のオペランドがfalse場合を除いて、結果は常にtrueなります。

オペランドがブール値ではない場合、評価のためにブール値に変換されます。

たとえば、数値1はtrueとして扱われ、数値0はfalseとして扱われます。

 if (1 || 0) { // if( true || false ) と同じように動作します
  アラート( '真実!' );
}

ほとんどの場合、OR ||は、指定された条件のいずれかがtrueであるかどうかをテストするためにifステートメントで使用されます。

例えば：

時 = 9 とします。

if (時間 < 10 || 時間 > 18) {
  alert( 'オフィスは閉まっています。' );
}

さらに多くの条件を渡すことができます。

時 = 12 とします。
週末 = true にしましょう。

if (時間 < 10 || 時間 > 18 || isWeekend) {
  alert( 'オフィスは閉まっています。' ); // 週末です
}

または「||」最初の真の値を見つけます

上記のロジックはやや古典的です。ここで、JavaScript の「追加」機能を導入しましょう。

拡張アルゴリズムは次のように動作します。

複数の OR 値を指定すると、次のようになります。

結果 = 値 1 ||値2 ||値3;

OR ||オペレーターは次のことを行います。

  • オペランドを左から右に評価します。

  • 各オペランドについて、それをブール値に変換します。結果がtrueの場合は停止し、そのオペランドの元の値を返します。

  • すべてのオペランドが評価された場合 (つまり、すべてfalseであった場合)、最後のオペランドを返します。

値は変換されず、元の形式で返されます。

つまり、OR ||の連鎖です。最初の真実の値を返すか、真実の値が見つからない場合は最後の値を返します。

例えば：

アラート( 1 || 0 ); // 1 (1 が真実です)

アラート( null || 1 ); // 1 (1 は最初の真の値)
アラート( null || 0 || 1 ); // 1 (最初の真の値)

アラート(未定義 || null || 0 ); // 0 (すべて偽、最後の値を返す)

これにより、「純粋で古典的なブール値のみの OR」と比較して、興味深い使用法が得られます。

  1. 変数または式のリストから最初の真の値を取得します。

    たとえば、 firstName 、 lastName 、およびnickName変数があり、すべてオプションです (つまり、未定義または偽の値を持つことができます)。

    OR を使用しましょう||データを持つものを選択して表示します (何も設定されていない場合は"Anonymous" ):

     firstName = ""; とします。
lastName = ""; とします。
ニックネーム = "SuperCoder" にします。

alert( 名 || 姓 || ニックネーム || "匿名"); // スーパーコーダー

    すべての変数が false の場合、 "Anonymous"が表示されます。

  2. 短絡評価。

    OR のもう 1 つの機能||演算子は、いわゆる「ショートサーキット」評価です。

    それはつまり||最初の真の値に到達するまで引数を処理し、その後、他の引数に触れることなく、その値がすぐに返されます。

    この機能の重要性は、オペランドが単なる値ではなく、変数の代入や関数呼び出しなどの副作用のある式である場合に明らかになります。

    以下の例では、2 番目のメッセージのみが出力されます。

    本当 || alert("印刷されません");
偽 ||アラート("印刷済み");

    最初の行の OR ||演算子はtrue確認するとすぐに評価を停止するため、 alert実行されません。

    場合によっては、左側の部分の条件が偽の場合にのみこの機能を使用してコマンドを実行することがあります。

＆＆ （そして）

AND 演算子は 2 つのアンパサンド&&で表されます。

結果 = a && b;

古典的なプログラミングでは、AND は両方のオペランドが真の場合はtrueを返し、それ以外の場合はfalse返します。

アラート( true && true );   // 真実
アラート( false && true );  // 間違い
アラート( true && false );  // 間違い
アラート( false && false ); // 間違い

ifを使用した例:

時 = 12 とします。
分 = 30 とします。

if (時間 == 12 && 分 == 30) {
  alert( '時刻は 12 時 30 分です' );
}

OR と同様に、AND のオペランドとして任意の値を使用できます。

 if (1 && 0) { // true && false と評価される
  alert( "結果が間違っているため、機能しません" );
}

AND「&&」は最初の偽の値を見つけます

複数の AND 値を指定すると、次のようになります。

結果 = 値 1 && 値 2 && 値 3;

AND &&演算子は次のことを行います。

  • オペランドを左から右に評価します。

  • オペランドごとに、それをブール値に変換します。結果がfalse場合は停止し、そのオペランドの元の値を返します。

  • すべてのオペランドが評価された場合 (つまり、すべてが真実だった場合)、最後のオペランドを返します。

つまり、AND は最初の偽の値を返すか、何も見つからなかった場合は最後の値を返します。

上記のルールは OR に似ています。違いは、AND は最初の偽の値を返すのに対し、OR は最初の真実の値を返すことです。

例:

 // 最初のオペランドが true の場合、
// AND は 2 番目のオペランドを返します。
アラート( 1 && 0 ); // 0
アラート( 1 && 5 ); // 5

// 最初のオペランドが false の場合、
// AND で返します。 2 番目のオペランドは無視されます
アラート( null && 5 ); // null
alert( 0 && "何があっても" ); // 0

複数の値を続けて渡すこともできます。最初の偽のものがどのように返されるかを見てください。

アラート( 1 && 2 && null && 3 ); // null

すべての値が真の場合、最後の値が返されます。

アラート( 1 && 2 && 3 ); // 3、最後のもの

AND &&の優先順位は OR よりも高くなります||

AND &&演算子の優先順位は OR ||よりも高くなります。 。

したがって、コードa && b || c && d 、 &&式が括弧内にある場合と本質的に同じです: (a && b) || (c && d) 。

if ||に置き換えないでください。または&&

場合によっては、AND &&演算子を「 if記述する短い方法」として使用することがあります。

例えば：

 x = 1 とします。

(x > 0) &&alert( 'ゼロより大きい!' );

&&の右側の部分のアクションは、評価がそれに到達した場合にのみ実行されます。つまり、 (x > 0)が true の場合のみです。

したがって、基本的には次のような類似物があります。

 x = 1 とします。

if (x > 0) alter( 'ゼロより大きい!' );

ただし、 &&を使用したバリアントは短く見えますが、 if方が明白で、もう少し読みやすい傾向があります。したがって、すべての構造を目的に合わせて使用​​することをお勧めします。if が必要な場合はif if使用し、AND が必要な場合は&&使用します。

！ （ない）

ブール NOT 演算子は感嘆符 ! で表されます! 。

構文は非常に単純です。

結果 = !値;

演算子は 1 つの引数を受け取り、次の処理を実行します。

  1. オペランドをブール型 ( true/falseに変換します。

  2. 逆数値を返します。

例えば：

アラート(!true); // 間違い
アラート(!0); // 真実

ダブルではありません!!値をブール型に変換するために使用されることがあります。

 alert( !!"空でない文字列" ); // 真実
アラート( !!null ); // 間違い

つまり、最初の NOT は値をブール値に変換してその逆を返し、2 番目の NOT はそれを再度反転します。最終的には、単純な値からブール値への変換が行われます。

同じことを行うためのもう少し冗長な方法があります。それは、組み込みのBoolean関数です。

 alert( Boolean("空でない文字列") ); // 真実
アラート( ブール値(null) ); // 間違い

NOT の優先順位!はすべての論理演算子の中で最も上位にあるため、常に&&または||前に最初に実行されます。 。

タスク

ORの結果はどうなるでしょうか?

重要度: 5

以下のコードは何を出力するのでしょうか?

アラート( null || 2 || 未定義 );

答えは2で、これが最初の真の値です。

アラート( null || 2 || 未定義 );

アラートの論理和の結果は何ですか?

重要性: 3

以下のコードは何を出力しますか?

アラート( アラート(1) || 2 || アラート(3) );

答えは、最初に1 、次に2 。

アラート( アラート(1) || 2 || アラート(3) );

alertへの呼び出しは値を返しません。または、言い換えれば、 undefinedを返します。

  1. 最初の OR ||左のオペランドalert(1)を評価します。これは、最初のメッセージを1で示しています。

  2. alert undefinedを返すため、OR は 2 番目のオペランドに進み、真の値を検索します。

  3. 2 番目のオペランド2 true であるため、実行は停止され、 2が返されて、外側のアラートによって表示されます。

評価はalert(3)に達しないため、 3ありません。

ANDの結果は何でしょうか?

重要度: 5

このコードは何を示すのでしょうか?

アラート( 1 && null && 2 );

答えは、 null 。これは、リストの最初の偽の値であるためです。

アラート(1 && null && 2);

アラートの AND 演算の結果はどうなりますか?

重要性: 3

このコードは何を示すのでしょうか?

アラート( アラート(1) && アラート(2) );

答えは、 1 、次にundefined 。

アラート( アラート(1) && アラート(2) );

alertへの呼び出しは、 undefinedを返します (メッセージを表示するだけなので、意味のある戻り値はありません)。

そのため、 &&左側のオペランドを評価し ( 1を出力)、 undefined偽の値であるため、すぐに停止します。そして&&偽の値を探してそれを返すので、これで完了です。

OR AND OR の結果

重要度: 5

結果はどうなるでしょうか？

アラート( null || 2 && 3 || 4 );

答え: 3 。

アラート( null || 2 && 3 || 4 );

AND &&の優先順位は||よりも高くなります。 , したがって、最初に実行されます。

2 && 3 = 3の結果、式は次のようになります。

ヌル || 3 || 4

結果は最初の真の値3になります。

間の範囲を確認してください

重要性: 3

ageが14から90までの範囲であることを確認するif条件を作成します。

「包括的に」とは、 age端の14または90に達する可能性があることを意味します。

if (年齢 >= 14 && 年齢 <= 90)

範囲外を確認してください

重要性: 3

ageが14から90までの範囲にないことを確認するif条件を作成します。

2 つのバリアントを作成します。最初のバリアントは NOT !を使用します。 、2番目のもの – それなし。

最初のバリエーション:

 if (!(年齢 >= 14 && 年齢 <= 90))

2 番目のバリエーション:

 if (年齢 < 14 || 年齢 > 90)

「もしも​​」についての質問

重要度: 5

これらのalertのうちどれが実行されますか?

if(...)内の式の結果はどうなるでしょうか?

 if (-1 || 0)alert( 'first' );
if (-1 && 0) アラート( '秒' );
if (null || -1 && 1)alert( 'third' );

答えは、1 番目と 3 番目が実行されるということです。

詳細：

 // 実行します。
// -1 の結果 || 0 = -1、真実
if (-1 || 0)alert( 'first' );

// 実行されない
// -1 && 0 = 0、偽
if (-1 && 0) アラート( '秒' );

// 実行します
// 演算子 && は || よりも優先されます。
// したがって、 -1 && 1 が最初に実行され、チェーンが得られます。
// null || -1 && 1 -> null || 1 -> 1
if (null || -1 && 1)alert( 'third' );

ログインを確認する

重要性: 3

promptでログインを要求するコードを作成します。

訪問者が"Admin"と入力すると、パスワードの入力をprompt 。入力が空行またはEscの場合は「Canceled」が表示され、別の文字列の場合は「I don't know you」が表示されます。

パスワードは次のようにチェックされます。

  • 「TheMaster」と等しい場合は、「ようこそ!」と表示されます。

  • 別の文字列 – 「間違ったパスワード」を表示します。

  • 空の文字列またはキャンセルされた入力の場合は、「キャンセル済み」と表示します。

スキーマ:

ネストされたifブロックを使用してください。コード全体の読みやすさに注意してください。

ヒント: 空の入力をプロンプトに渡すと、空の文字列''が返されます。プロンプト中にESC を押すと、 nullが返されます。

デモを実行する

let userName = プロンプト("誰がいますか?", '');

if (ユーザー名 === '管理者') {

  let pass = プロンプト('パスワード?', '');

  if (pass === 'TheMaster') {
    alert( 'ようこそ!' );
  } else if (pass === '' || pass === null) {
    アラート( 'キャンセル' );
  } それ以外 {
    alert( '間違ったパスワード' );
  }

} else if (userName === '' || userName === null) {
  アラート( 'キャンセル' );
} それ以外 {
  alert( "私はあなたのことを知りません" );
}

ifブロック内の垂直方向のインデントに注目してください。これらは技術的には必須ではありませんが、コードを読みやすくします。

関連記事