JavaScript の 3 種類の条件文とは何ですか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScript の 3 種類の条件文とは何ですか?

青灯夜游

Jan 26, 2022 pm 05:02 PM

javascript条件文

JavaScript の 3 種類の条件ステートメント: 1. 「if else」ステートメント、構文「if (条件) {...}else{...}」; 2. 「switch...case」ステートメント ;3. 三項演算ステートメント、構文「条件式? 式 1:式 2;」。

JavaScript の 3 種類の条件文とは何ですか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

条件判定ステートメントは、プログラム開発中に頻繁に使用されるステートメント形式です。ほとんどのプログラミング言語と同様、JavaScript にも条件判定ステートメントがあります。いわゆる条件判定とは、年齢に基づいて異なる内容を表示したり、true または false のブール値に基づいて操作の成功または失敗を判断したりするなど、異なる条件に基づいて異なる操作を実行するプログラムを指します。

1. if-else ステートメント

1. 文法

if-else の構文は 3 つのタイプに分かれています:

( 1) if ステートメント;

if(条件){ 条件为true时执行代码 }

(2) if else ステートメント;

if(条件){ 条件为true时执行的代码 } else { 条件为false时执行的代码 }

(3) if else if else ステートメント;

if(条件1){ 条件1为true时执行的代码 } esle if (条件2){ 条件1false条件2true } else { 都false }

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IfElse</title>
</head>
<body>

<script type="text/javascript">
     var myage = 10;
    //第一种语法
    if (myage > 5){
        document.writeln("你的年龄大于5岁");
    }
    //第二种语法
    if (myage > 15){
        document.writeln("你的年龄大于15岁");
    }
    else {
        document.writeln("你的年龄小于15岁");
    }
    //第三种语法
    if (myage > 5){
        document.writeln("你的年龄大于5岁");
     }
    else if(myage < 15 ){
         document.writeln("你的年龄大于15小于5岁");
     }
    else {
        document.writeln("你的年龄大于等于15岁")
    }
</script>

</body>
</html>

出力結果は

JavaScript の 3 種類の条件文とは何ですか?

2. switch...case ステートメント

1、構文

switch( 表达式 n ){
case 1 : 执行代码块 1; break;
case 2 : 执行代码块 2 ; break;
default: 与 case 1 和 case 2 不同时执行的代码
}

2. 動作原理

最初に式 n (通常は変数) を設定します。次に、式の値が構造内の各ケースの値と比較されます。一致する場合、そのケースに関連付けられたコードブロックが実行されます。 コードが次のケースに自動的に実行されないようにするには、break を使用してください。

#例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Switch</title>
</head>
<body>

<script type="text/javascript">
    var flag = 2;
    switch (flag) {
        case 1:document.write("纷纷扰扰这个世界，所有的了解。");break;
        case 2:document.write("只要让我留在你身边。");break;
        default:break;
    }
</script>

</body>
</html>

出力結果は次のとおりです

JavaScript の 3 種類の条件文とは何ですか?

##Three、三項演算子

三項演算子 (条件演算子とも呼ばれます) は、疑問符とコロンで構成されます。構文は次のとおりです:

b ? x : y

b オペランドはブール式である必要があります。Formula、x および yは任意の型の値です。

オペランド b の戻り値が true の場合、オペランド x が実行され、式の値が返されます。
オペランド b の戻り値が false の場合、オペランド y が実行され、式の値が返されます。

例:

変数 a を定義し、変数 a に値が割り当てられているかどうかを検出します。値が割り当てられている場合は、その値を使用します。それ以外の場合は、デフォルト値を設定します。

var a = null;  //定义变量a
typeof a != "undefined" ? a = a : a = 0;  //检测变量a是否赋值，否则设置默认值
console.log(a);  //显示变量a的值，返回null

条件演算子は条件構造に変換できます:

if(typeof a != "undefined"){  //赋值
    a = a;
}else{  //没有赋值
    a = 0;
}
console.log(a);

は論理式にも変換できます:

(typeof a != "undefined") && (a =a) || (a = 0);  //逻辑表达式
console.log(a);

上記の式では、 a が割り当てられた後、(a = a) 式を実行します。実行後、論理 OR 演算子の後の (a = 0) 式は実行されなくなります。a に値が割り当てられていない場合は、(a = a) 式が実行されます。論理 AND 演算子は実行されなくなり、代わりに論理 OR 演算子 (a = 0) に続く式が実行されます。

注:

実際の戦闘では、誤った値の干渉を考慮する必要があります。 typeof a != "unknown" を検出に使用すると、変数に false、null、""、NaN などの偽の値が割り当てられている場合に、値が割り当てられていないと誤解されるのを避けることができます。

[関連する推奨事項:

JavaScript 学習チュートリアル]

以上がJavaScript の 3 種類の条件文とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLとReactの統合：実用的なガイドApr 21, 2025 am 12:16 AM

HTMLとReactは、JSXを介してシームレスに統合して、効率的なユーザーインターフェイスを構築できます。 1）JSXを使用してHTML要素を埋め込み、2）仮想DOMを使用してレンダリングパフォーマンスを最適化し、3）コンポーネントを通じてHTML構造を管理およびレンダリングします。この統合方法は直感的であるだけでなく、アプリケーションのパフォーマンスを向上させます。

ReactおよびHTML：レンダリングデータと取り扱いイベントApr 20, 2025 am 12:21 AM

React Reactは、状態および小道具を介してデータを効率的にレンダリングし、合成イベントシステムを介してユーザーイベントを処理します。 1）Counterの例など、UseStateを使用して状態を管理します。 2）イベント処理は、ボタンクリックなどのJSXに関数を追加することにより実装されます。 3）トドリストコンポーネントなどのリストをレンダリングするには、重要な属性が必要です。 4）フォーム処理の場合、FormコンポーネントなどのuseStateおよびe.preventdefault（）。

バックエンド接続：Reactがサーバーとどのように相互作用するかApr 20, 2025 am 12:19 AM

Reactは、HTTP要求を介してサーバーと対話し、データを取得、送信、更新、削除します。 1）ユーザー操作はイベントをトリガーします。2）HTTP要求を開始する、3）サーバーの応答をプロセス、4）コンポーネントのステータスと再レンダリングを更新します。

React：ユーザーインターフェイスに焦点を当てる（Frontend）Apr 20, 2025 am 12:18 AM

Reactは、コンポーネント開発と仮想DOMを通じて効率を向上させるユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1。コンポーネントとJSX：JSX構文を使用してコンポーネントを定義して、コードの直感性と品質を高めます。 2。仮想DOMおよびレンダリング：仮想DOMおよびDIFFアルゴリズムを介してレンダリングパフォーマンスを最適化します。 3。状態管理とフック：UseStateやUseefectなどのフックは、状態管理と副作用の取り扱いを簡素化します。 4。使用例：基本形式から高度なグローバルな州管理まで、Contextapiを使用します。 5.一般的なエラーとデバッグ：不適切な状態管理とコンポーネントの更新の問題を避け、ReactDevtoolsを使用してデバッグします。 6。パフォーマンスの最適化と最適性

Reactの役割：フロントエンドまたはバックエンド？区別を明確にしますApr 20, 2025 am 12:15 AM

ReactisaFrontendLibrary、focusedonbuildinguserinterfaces.itmanagesUistateandupdateSeSefiedlyusingingingingualdod、およびinteractswithbackendservicesviaapisfordatahandling、butdoesnotprocessorstoredatoredaitaits

HTMLで反応する：インタラクティブなユーザーインターフェイスを構築しますApr 20, 2025 am 12:05 AM

ReactをHTMLに組み込み、従来のHTMLページを強化または完全に書き換えることができます。 1）Reactを使用するための基本的な手順には、HTMLにルートDIVを追加し、ReactDom.Render（）を介してReactコンポーネントをレンダリングすることが含まれます。 2）より高度なアプリケーションには、UseStateを使用して状態を管理し、カウンターやTo Doリストなどの複雑なUI相互作用を実装することが含まれます。 3）最適化とベストプラクティスには、コードセグメンテーション、怠zyな読み込み、React.memoとusememoを使用してパフォーマンスを向上させることが含まれます。これらの方法を通じて、開発者はReactの力を活用して、動的で応答性の高いユーザーインターフェイスを構築できます。

React：現代のフロントエンド開発の基礎Apr 19, 2025 am 12:23 AM

Reactは、最新のフロントエンドアプリケーションを構築するためのJavaScriptライブラリです。 1.パフォーマンスを最適化するために、コンポーネントおよび仮想DOMを使用します。 2。コンポーネントJSXを使用して、データを管理するために定義、状態、および属性を定義します。 3.フックはライフサイクル管理を簡素化します。 4. Contextapiを使用して、グローバルステータスを管理します。 5.一般的なエラーには、デバッグステータスの更新とライフサイクルが必要です。 6。最適化手法には、メモ、コード分割、仮想スクロールが含まれます。

Reactの未来：Web開発におけるトレンドと革新Apr 19, 2025 am 12:22 AM

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

See all articles