Javascript の基礎: 演算子とフロー制御の詳細な説明

Javascript の基礎: 演算子とフロー制御の詳細な説明

1. オペレーター

演算子は、代入、比較、算術演算などの機能を実行するために使用される記号です。よく使われる演算子は次のように分類されます

  • 算術演算子
  • インクリメント演算子とデクリメント演算子
  • 比較演算子
  • 論理演算子
  • 代入演算子

1.1 算術演算子

オペレーター説明する場合
+追加10+20=30
-減らす10-20=-10
*取る10×20=200
/取り除く10/20=0.5
%モジュロ9%2=1の割り算の余りを返します
  //アラート(1 + 1);
        console.log(1 + 1); // 演算子の両側にスペースを入力してください //alert(1 - 1); //0
        //アラート(1 * 1); //1
        //アラート(1 / 1); //1

1. % 剰余(剰余)

//アラート(4%2); //0
 //アラート(5%3); //2
//alert(3 % 5); //3 注意! ! ! ! ! ! ! ! ! !

2. 浮動小数点演算に問題が生じる

  var result = 0.1 + 0.2; // 結果は 0.3 ではなく、0.300000000000000004 です
  console.log(0.07 * 100); // 結果は 7 ではなく、7.0000000000000001 です

浮動小数点値の最大精度は小数点以下 17 桁ですが、算術演算を実行する場合の精度は整数の精度よりもはるかに低いため、2 つの浮動小数点数が等しいかどうかを直接判断しないでください。

3. 浮動小数点数の等価性を直接比較することはできない

 var 数値 = 0.1 + 0.2;
 alert(num == 0.3); //false バイナリに変換すると、精度に誤差が生じます
  • 式と戻り値
    • 式: 数値、演算子、変数で構成される数式。
    • 戻り値: 各式が計算された後、式の戻り値と呼ばれる最終結果が生成されます。
  // 数値、演算子、変数などで構成される式を式と呼びます 1+1 // alert(1 + 1); //2 は戻り値です // 記述方法 //1 + 1=2 // このプログラムでは、2 = 1 + 1 は右側の式を計算し、左側に値を返します var num = 1 + 1; // alert(num); //2

1.2 インクリメント演算子とデクリメント演算子

数値変数に繰り返し 1 を加算または減算する必要がある場合は、増分 ( ++ ) 演算子と減分 ( - - ) 演算子を使用してこれを実現できます。

JavaScript では、増分 ( ++ ) 演算子と減分 ( - - ) 演算子を変数の前または後に配置できます。変数の前に置く場合は前置増分(減分)演算子と呼ばれ、変数の後に置く場合は後置増分(減分)演算子と呼ばれます。

注意: 増分演算子と減分演算子は変数で使用する必要があります。

プレフィックスインクリメント演算子の使用法: 最初に自分自身に加算し、次に値を返します

 <スクリプト>
        //1. 変数に 1 を加算したい num=num+1 ですが、これは面倒です var num = 1;
        数値 = 数値 + 1; // ++数値
        数値 = 数値 + 1;
        //アラート(数値); //3
        //2. 変数 var age = 20 の前に増分演算子 ++ を付加します。
        ++age; // age = age + 1 と同様
        //アラート(年齢); //21
        // 3. 最初に 1 を加算し、値を返します。var p = 10;
        アラート(++p + 10); //21
    </スクリプト>

プレフィックスインクリメント演算子の使用法: 最初に元の値を返し、次に1を加算します。

 <スクリプト>
        var 数値 = 10;
        num++; // num = num + 1 ++num
        // アラート(数値); //11
        //1. プレインクリメントとポストインクリメントを別々に使用した場合、効果は同じです //2. ポストインクリメント式: 最初に元の値を返し、次に 1 を加算します
        var 年齢 = 10;
        //アラート(年齢++ + 10); //20
        //アラート(年齢); //11
        //アラート(年齢 + 10); //21
    </スクリプト>

例:

 <スクリプト>
        var a = 10;
        ++a; //++a = 11 a=11 ++a は式です var b = ++a + 2; // a=12 a++ = 12 プレフィックス: 最初にそれ自体を追加し、次に値を返します //alert(b); //14  
        var c = 10;
        c++; //c++ = 11 c = 11
        var d = c++ + 2; //c++ = 11 c = 12 後置詞: 最初に元の値を返してから追加します //alert(d); //13
        var e = 10;
        var f = e++ + ++e; // e++ =10 e=11 ++e=12
        コンソールログ(f); //22
        // 後置増分式は元の値を返し、その後変数を 1 ずつ増分します
        // 最初に前置増分、次に演算 // 単独で使用した場合、実行結果は同じです // 開発時には、ほとんどの人が後置増分/減分を使用し、コードは 1 行を占めます。例: num++; または num--
 </スクリプト>

1.3 比較演算子

比較演算子は、2 つのデータを比較するために使用される演算子です。比較演算子は、比較演算の結果としてブール値 (true/false) を返します。

オペレーター説明する場合
+追加10+20=30
-減らす10-20=-10
*取る10×20=200
/取り除く10/20=0.5
%モジュロ9%2=1の割り算の余りを返します
<スクリプト>
        // アラート(3 >= 5); // 偽
        // アラート(2 <= 5); // 真
        //1. プログラマーの等号は == です。デフォルトの変換データ型は、文字列データを数値型に変換します。 // 相対値である必要があるのは値のみです。 //alert(3 == 5); //false
        //alert('ピンクの先生' == 'アンディ・ラウ'); //false 
        //アラート(18 == 18); //true
        //アラート(18 == '18'); //true
        //alert(18 != 18); //false != not equal //2. プログラマーの間では、両側の値がまったく同じであり、データ型がまったく同じでなければ真にならないという要件があります。
        //アラート(18 === 18); //true
        //アラート(18 === '18'); //偽 
</スクリプト> 
シンボル効果使用法
=割り当て左に右を譲る
==裁判官両辺の値が等しいかどうかを判定する(このとき暗黙の変換があることに注意)
===一致する両側の値とデータ型が完全に等しいかどうかを判定する

1.4 論理演算子

概念: 論理演算子はブール演算を実行するために使用される演算子であり、その戻り値もブール値です。後の発達において複数の状態を判断するためによく使用される。

 <スクリプト>
        // 1. 論理積 && (and) 両辺が真であれば結果は真。片側が偽であれば結果は偽。
        //アラート(3 > 5 && 3 > 2); //偽
        //アラート(3 < 5 && 3 > 2); //true
        // 2. 論理和 || (or) 両辺が偽の場合、結果は偽になります。片側が真である限り、結果は真になります。
        //アラート(3 > 5 || 3 > 2); //true
        //アラート(3 > 5 || 3 < 2); //偽
        //3. 論理否定! (not)
        アラート(!true); //false
    </スクリプト>

練習する:

   <スクリプト>
        var 数値 = 7;
        var str = "愛してるよ〜中国〜";
        アラート(num > 5 && str.length >= num); //true
        alert(num < 5 && str.length >= num); //false
        アラート(!(数値 < 10)); //偽
        アラート(!(num < 10 || str.length == num)); //false
    </スクリプト>

短絡動作(論理的中断): (js API)

複数の式(値)がある場合、左側の式の値で結果が決まる場合は、右側の式の値は計算されなくなります。

  3. 論理 AND 短絡演算 式 1 が真の場合、式 2 が返されます。式 1 が偽の場合、式 1 が返されます。
        alert(123 && 456); //456 0を除くすべての数値は真です alert(0 && 456); // 0
        アラート(0 && 1 + 2 && 456 * 56789); // 0
        アラート('' && 1 + 2 && 456 * 56789); // ''
        いずれかが空または否定の場合は偽、残りは真です: 0 '' null undefined NaN
 4. 論理演算または短絡演算 式 1 が真の場合、式 1 が返されます。式 1 が偽の場合、式 2 が返されます。
        アラート(123 || 456); // 123
        アラート(123 || 456 || 456 + 123); // 123
        アラート(0 || 456 || 456 + 123); // 456
論理的な中断は非常に重要で、プログラム var num = 0 の結果に影響します。
        //alert(123 || num++); //123 num++は実行されません //alert(num); // 0

1.5 代入演算子

オペレーター説明する場合
=直接割り当てvar ユーザー名 = 'ファン'
+= -=数値を加算または減算して値を割り当てるvar 年齢=5; 年齢+=5
*= /= %=乗算、除算、剰余、そして代入var 年齢=5; 年齢*=5
  <スクリプト>
        var 数値 = 10;
        // 数値 = 数値 + 1; // 数値++
        // 数値 = 数値 + 2 //数値+=2;
        var 数値 = 10;
        数値 += 5;
        // アラート(数値); //15
        var 数値 = 10;
        数値 -= 5;
        // アラート(数値); //5
        var 年齢 = 2;
        年齢 *= 3;
        // アラート(年齢); //6
        var 年齢 = 6;
        年齢 /= 3;
        // アラート(年齢); //2
        var 年齢 = 4;
        年齢%= 2;
        // アラート(年齢); //0
    </スクリプト>

1.6 演算子の優先順位

優先度オペレーター注文
1括弧()
2単項演算子!++--
3算術演算子* / % の後に + - が続く
4関係演算子> >= < <=
5等価演算子== != === !==
6論理演算子最初 && 後||
7代入演算子=
8カンマ演算子
  <スクリプト>
        // 単項演算子: ++num !num 二項演算子: 2 + 3
        // 演習 1
        console.log(4 >= 6 || '人' != 'アバター' && !(12 * 2 == 144) && true) //true
        var 数値 = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); //true
        コンソールログ('-------------------');
        // 演習 2
        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a); //偽
        var b = 3 <= 4 || 3 > 1 || 3 != 2;
        console.log(b); //true
        var c = 2 === "2";
        console.log(c); //偽
        var d = !c || b && a;
        console.log(d); //true
    </スクリプト>

2. プロセス制御

フロー制御」プログラムの実行中、各コードの実行順序はプログラムの結果に直接影響を及ぼします。多くの場合、完了したい機能を実現するために、コードの実行順序を制御する必要があります。プロセス制御には、3 種類のコードの実行順序を表す、シーケンシャル構造、分岐構造、ループ構造という 3 つの主要な構造があります。

分岐フロー制御:

2.1 ifの文法構造

        if (条件式) {
            //ステートメントを実行する}
        2. 実行のアイデア if 内の条件式の結果が true の場合、中括弧内の実行文が実行されます。if 条件式の結果が false の場合、中括弧内の文は実行されず、if 文の後のコードが実行されます。 3. 体験コード:
        (3 < 5)の場合{
            alert('砂漠のラクダ');
        }

例:

  <スクリプト>
        // プロンプト入力ボックスをポップアップし、ユーザーが年齢を入力すると、プログラムはこの値を取得して変数に保存します // if ステートメントを使用して年齢を決定します。年齢が 18 より大きい場合は、if 括弧内の出力ステートメントを実行します var age = prompt('年齢を入力してください');
        (年齢 >= 18)の場合{
            alert('インターネットカフェに入ることができます')
        }
    </スクリプト>

2.2 if else 二重分岐文

<スクリプト>
        // 1. 構文構造 if else // if (条件式) {
        // // ステートメント1を実行する
        // } それ以外 {
        // // ステートメント2を実行する 
        // }
        // 2. 実行アイデア 式の結果が真であれば文1を実行し、そうでない場合は文2を実行する
        // 3. コード検証 var age = prompt('年齢を入力してください:');
        (年齢 >= 18)の場合{
            alert('ヘッドフォンを盗むためにあなたをインターネットカフェに連れて行きたい');
        } それ以外 {
            alert('離れて宿題をやりなさい');
        }
        // 5. if のステートメント 1 と else のステートメント 2 のうち 1 つだけを実行できます。
        // 6. else の直後に中括弧が続く</script>

: うるう年

  // アルゴリズム: 閏年は 4 で割り切れるが 100 では割り切れない (例: 2004 年は閏年、1901 年は閏年ではない)、または閏年は 400 で割り切れる // プロンプト入力ボックスをポップアップし、ユーザーに年を入力させ、値を取得して変数に保存する // if 文を使用して、閏年かどうかを判定する。閏年の場合は、if 括弧内の出力文を実行し、それ以外の場合は else 括弧内の出力文を実行する // && と || の書き方に必ず注意し、割り切れるかどうかを判断する方法は、余りを 0 とすることであることにも注意してください
         var year = prompt("テストする年を入力してください:")
        if (年 % 4 == 0 && 年 % 100 != 0 || 年 % 400 == 0) {
            アラート(年 + 'うるう年')
        } それ以外 {
            アラート(年 + '通常の年です')
        }

2.3 if else if 文(複数選択 1)

<スクリプト>
        // 1. マルチブランチステートメントは、複数の条件を使用して異なるステートメントを選択し、実行して異なる結果を取得するプロセスです。 // 2. これはマルチブランチステートメントです // 3. 構文仕様 if else if ステートメント if (条件式 1) {
            //ステートメント 1;
        } else if (条件式2) {
            //ステートメント 2;
        } else if (条件式3) {
            //ステートメント3;
        } それ以外 {
            //最後のステートメント;
        }
        // 4. 実行のアイデア // 条件式 1 が満たされる場合は、文 1 を実行します。実行後、if 分岐文全体を終了します // 条件式 1 が満たされない場合は、条件式 2 が満たされるかどうかを判断して、文 2 を実行します。以下同様です // 上記の条件式がすべて真でない場合は、else 内の文を実行します // 5. 注意点 // (1) 複数の分岐文または複数の選択肢 1. 最後に実行できる文は 1 つだけです // (2) 理論的には、else if 内の条件はいくつでもかまいません // (3) else if の途中にスペースがあります</script>

ケース:グレード

    <スクリプト>
        // 疑似コードは、大きいものから小さいものへと判断するという考えに従います // プロンプト入力ボックスをポップアップし、ユーザーにスコア (score) を入力させ、この値を変数に保存します // マルチブランチの if else if ステートメントを使用して、異なる値を判断して出力します var score = prompt('Please enter a score:');
        (スコア >= 90)の場合{
            アラート('A');
        } else if (score >= 80) { //以下を実行するために 90>score>=80 と書く必要はありません。90 未満である必要があります。alert('B');
        } そうでない場合 (スコア >= 70) {
            アラート('C');
        } そうでない場合 (スコア >= 60) {
            警告('D');
        } それ以外 {
            alert('E'); //引用符が必要です。引用符がない場合、変数と見なされ、宣言する必要があります。}
    </スクリプト>

2.4 三項式

<スクリプト>
        // 1. 三項演算子で構成される式は三項式と呼ばれます // 2. 単項演算子: ++num 二項演算子: 3 + 5 三項演算子: ? :
        // 3. 構文構造 // 条件式? 表現1: 表現2
        // 4. 実行のアイデア // 条件式が true の場合は、式 1 の値を返します。条件式が false の場合は、式 2 の値を返します。 // 5. コードの経験 var num = 10;
        var result = num > 8 ? 'Yes' : 'No' // 式には戻り値があることがわかっているので、それを result に代入します 
        console.log(result); //はい//以下と同等:
        var 数値 = 10;
        (数値>5)の場合
            アラート('はい');
        } それ以外 {
            アラート('いいえ');
        }
        // 三項式はif elseの簡略版です
    </スクリプト>

: 数字に0を加える

   <スクリプト>
        // ユーザーは 0 から 59 までの数字を入力します // 数字が 10 未満の場合、数字の前に 0 を追加します (連結の場合は 0 を追加します)。それ以外の場合は操作は実行されません // この戻り値と出力を受け取るには変数を使用します var num = prompt('0 から 59 までの数字を入力してください?')
            //三項式: 式? 式1: 式2;
        var result = num < 10 ? '0' + num : num; //文字タイプ0 戻り値を変数に代入する alert(result);
    </スクリプト>

2.5 スイッチブランチフロー制御

switch ステートメントもマルチブランチ ステートメントであり、さまざまな条件に基づいて異なるコードを実行するために使用されます。スイッチは、変数の一連のオプションを特定の値に設定する場合に使用されます。

    <スクリプト>
        //1. switch文もマルチブランチ文であり、複数選択を実装することもできます1
        // 2. 構文構造スイッチ変換、スイッチケースの小さな例またはオプションの意味break exit /* switch (式) {
                case value1: ステートメント1を実行します。break;
                case value2: ステートメント2を実行します。break;
                case value3: ステートメント3を実行し、break;
                デフォルト: 最後のステートメントを実行します。
            } */
        // 3. 実行アイデア: 式の値を使用して、case の後のオプション値を一致させます。一致した場合は、case のステートメントを実行します。一致しない場合は、default のステートメントを実行します。switch (2) {
            ケース 1: alert('This is 1'); break;
            ケース 2: alert('This is 2'); break; //This is 2
            ケース 3: alert('This is 3'); break;
            デフォルト: alert('一致する結果がありません');
        }
    </スクリプト>

注記:

        var 数値 = 1;
        スイッチ(数値){
            ケース1: console.log(1);break; //1
            ケース2: console.log(2);break;
            ケース3: console.log(3);break;
        }
        // 1. 式を開発するときは、変数として記述することがよくあります // 2. num の値が case の値と一致する場合、それらは同一です。値とデータ型は一致している必要があります。num === 1

現在のケースに break がない場合、switch は終了せず、次のケースが実行されます。

  var 数値 = 1;
        スイッチ(数値){
            ケース1: console.log(1);//1
            ケース2: console.log(2);//2
            ケース3: console.log(3);//3
        }

ケース: クエリフルーツケース

<スクリプト>
        // プロンプト入力ボックスをポップアップし、ユーザーに果物の名前を入力させ、その値を変数に保存します。
        // この変数をスイッチ括弧内の式として使用します。
        // case の後の値にいくつかの異なる果物の名前を記述します。完全に一致する必要があるため、引用符を追加する必要があることに注意してください。
        // 異なる価格をポップアップ表示するだけです。また、各ケースの後に break が追加され、switch ステートメントが終了することに注意してください。
        // デフォルトを「no such fruit」に設定します。
        var fruit = prompt('果物の名前を入力してください')
        スイッチ(フルーツ){
            'apple'の場合:
                alert('リンゴの値段は3.5斤です');
                壊す;
            ケース「ドリアン」:
                alert('ドリアンの値段は35斤です');
                壊す;
            デフォルト:
                alert('そのような果物はありません');
        }
    </スクリプト>

switch ステートメントと if else if の違い:

1. 一般的に、これら2つの文は互いに置き換えることができる。

2. switch...case文は通常、比較的確実な値の場合に使用されますが、if...else...文はより柔軟で、範囲判定(特定の範囲以上)によく使用されます。

3. switch文は条件判断を行った後、プログラムの条件文を直接実行するので、より効率的です。 if..else 文には複数の条件があり、条件の数だけ判定を行う必要があります。

4. 分岐が少ない場合、if...else 文の実行効率は switch 文の実行効率よりも高くなります。

5. 分岐が多い場合、switch ステートメントの方が実行効率が高く、構造が明確になります。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript フロー制御 (分岐)
  • ネイティブ js での演算子とプロセス制御の例の詳細な説明
  • Javascript 非同期プロセス制御シリアル実行の詳細な説明
  • js データ型変換とプロセス制御操作例の分析
  • JavaScript フロー制御 (ループ)

<<:  マークアップ言語 - フレーズ要素

>>:  Windows に mysql5.7.28 winx64 の解凍バージョンをインストールするための詳細なチュートリアル

推薦する

JavaScript の document.activeELement フォーカス要素の紹介

目次1. デフォルトの焦点はボディにあります2. テキストボックスのフォーカスを手動で取得する3. ...

ブログデザイン ウェブデザイン デビュー

私がデザインした最初の Web ページは次のとおりです。 私はこの業界に7年間在籍し、プログラミング...

Vue ユニットテストに推奨されるプラグインと使用例

目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...

VirtualBoxにOpenSuseをインストールする方法

仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...

ReactのEffectListの簡単な分析

目次EffectList コレクション最初のレンダリング時のEffectList EffectLis...

Dockerコンテナのタイムゾーン調整操作

Docker コンテナのタイムゾーンがホストマシンと一致しているかどうかを確認するにはどうすればよい...

Vue+Echart 棒グラフで疫病データ統計を実現

目次1. まずプロジェクトにechartsをインストールします2. echartsに縦棒グラフテンプ...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

一般的な nginx コマンドをシェル スクリプトに組み込む方法の詳細な説明

1. nginxシェルスクリプトを保存するフォルダを作成する /usr/local/タスク/ngin...

Canonical が Flutter で Linux デスクトップ アプリを有効化 (推奨)

Google の Flutter の目標は、どのプラットフォームを使用していても、ネイティブの速度...

スタイルをより標準化するための CSS の書き方に関する 5 つのヒント

1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...

VMware 仮想マシンの NAT モードを構成する方法

この記事では、VMware仮想マシンのNAT構成プロセスを詳しく説明します。具体的な内容は次のとおり...

フラッシュプラグインを使用してPCのカメラを呼び出し、TMLページに埋め込む方法

序文この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出し...

CSS の子要素を親要素と高い一貫性を持たせる方法

絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...