先週学んだこと: JavaScript 条件

6126 ワード
javascript テキストリンク

すぐに、のどが渇いたときにどのような行動を取りますか?お腹がすいた?眠いです?ゲータレードを飲んだり、ハンバーガーを食べたり、寝たりするかもしれません.以下の pseudocode を頭の片隅に置いておいてください.これを基に作成していきます.

if thirsty => drink water.
else => don't drink water.

if hungry => eat tamal.
else => don't eat tamal.

if sleepy => sleep
else => write code.

Conditional statements は、さまざまな条件に基づいてさまざまなアクションを実行するために使用されます.これは、コンピューターがスクリプト内のステートメントを実行する順序である control flow とも呼ばれます. JavaScript では、条件ベースの制御フロー構造を実装する方法がいくつかあります.

if...else statement 、
switch statement、

まず、if...else は、指定された条件が true である if ステートメントを実行します.条件が偽の場合、別のステートメントを実行できます.これは、2 つのオペランドが等しいかどうかをチェックし、ブール値の結果を返す Strict equality (===) 演算子で実現できます.

let thirsty = true; // The let statement declares a block-scoped local variable, optionally initializing it to a value.
if (thirsty === true) { // You should prefer Strict Equality Operator for comparisons.
console.log('I need H20'); // displays message on console.
}

上記の条件は truthy 値を返すため、コードが実行されます.いいですね!

注: JavaScript では、真の値とは、ブール コンテキストで検出されたときに真と見なされる値です.偽として定義されていない限り、すべての値は true です (つまり、false、0、-0、0n、""、null、undefined、および NaN を除く). falsy (falsey と表記されることもあります) 値は、ブール値のコンテキストで検出された場合に false と見なされる値です.

次に、ステートメントに else を追加しました.

let thirsty = false;

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log('I/'m not thirsty');
}

// What do you think is going to be displayed in the console? Copy and paste the above code into your browsers console to see the answer.

上記で thirsty 変数を作成し、その中に false を格納しました. false は boolean であり、その値は偽であることを思い出してください.次に、「H20 が必要」または「のどが渇いていない」をコンソールに記録する何らかのロジックを作成します.この例では、条件の値に応じてコンソールにステートメントを表示します.コンソールに何が表示されるか理解できましたか?

//=>喉が渇いていない

^^解決策^^

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log("I'm not thirsty");
}

繰り返しになりますが、if...else ステートメントは、指定された条件が true の場合にステートメントを実行します.条件が偽の場合、別のステートメントを実行できます.コンソールに I'm not thirsty が表示される理由は、条件の 2 つのオペランドが NOT 等しくないためです.

let thirsty = false;

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log("I'm not thirsty");
}

// => I'm not thirsty

基本的な if...else ステートメントについて簡単に説明したので、次に進みましょう.

次に、switch statement は式を評価し、式の値を case 句に一致させ、そのケースに関連付けられたステートメントと、一致するケースに続くケースのステートメントを実行します.

switch (expression) {
    case value1:
        // Statements
        break;
    case value2:
        // Statements
        break;
    default:
        // Statements
        break;
}

わかりましたが、それはどういう意味ですか?それを壊しましょう down .

<オール>
  • expression の値は、最初のケースの値 (つまり、value1)、次に 2 番目のケース (value2) などと厳密に等しいかどうかがチェックされます.
  • 一致が見つかった場合、switch は対応するケースからコードの実行を開始し、最も近いブレークまで (または switch の最後まで)
  • 一致するケースがない場合は、デフォルト コードが実行されます (存在する場合). 
    • switch (expression) {
    case value1:
        // Statements
        break;
    case value2:
        // Statements
        break;
    default:
        // Statements
        break;
}

    Switch ステートメントの例:

    const mood = 'thirsty';

switch (mood) {
    case 'thirsty':
        drink = 'water';
        console.log(`I'm thirsty so I'm going to drink ${drink}.`);
        break;
    case 'hungry':
        food = 'burger';
        console.log(`I'm hungry so I'm going to eat a ${food}.`);
        break;
    case 'sleepy':
        action = 'sleep';
        console.log(`I'm sleepy so I'm going to ${action}.`);
        break;
}

// => I'm thirsty so I'm going to drink water.
    Vite vue ts tailwind テンプレート: スタイルを TailwindCSS クラスおよび構成に変換する (パート 1)
    vite vue ts テンプレートの作成: editorconfig のセットアップ