目次
1. 判断する(if文)
2. 2 つのうちの 1 つを選択します (if.​​..else ステートメント)
3. 複数の判定(if..else if..ネスト文)
4. 複数の選択肢 (Switch..case ステートメント)
5. 繰り返し (for ループ)
6. 繰り返し (while ループ)
7. 前後 (Do...while ループ)
8.for...in ステートメント: オブジェクトのプロパティをループします
9.for...of语句: 循环遍历对象的属性
10.退出循环break
11.跳过本次循环continue
ホームページ ウェブフロントエンド jsチュートリアル JavaScript フロー制御のステートメントとは何ですか?

JavaScript フロー制御のステートメントとは何ですか?

Oct 09, 2021 pm 04:16 PM
javascript プロセス制御

フロー制御ステートメントには、1. if ステートメント、2. "if...else" ステートメント、3. "if..else if.." ネストされたステートメント、4. "Switch..case" ステートメントが含まれます。 ; 5. for ステートメント; 6. while ステートメント; 7. "do...while" ステートメント; 8. "for..in" など。

JavaScript フロー制御のステートメントとは何ですか?

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

1. 判断する(if文)

if文は、成立した条件に基づいて該当するコードを実行する文です。

文法:

if(条件)
{
 条件成立时执行代码
}
ログイン後にコピー

注: 小文字と大文字 (IF) を使用するとエラーが発生します。

あなたが Web フロントエンド技術開発職に応募したとします。HTML 技術の知識があり、面接に合格した場合は、歓迎されます。コードは次のように表されます:

<script type="text/javascript">
  var mycarrer = "HTML";
  if (mycarrer == "HTML")
  {
    document.write("你面试成功,欢迎加入公司。");
  }
</script>
ログイン後にコピー

2. 2 つのうちの 1 つを選択します (if.​​..else ステートメント)

if...else ステートメントは、指定された条件が満たされたときにコードを実行します。条件が true で、条件が true でない場合は else を実行してからコードを記述します。

文法:

if(条件)
{ 条件成立时执行的代码}
else
{条件不成立时执行的代码}
ログイン後にコピー

Web フロントエンド テクノロジ開発のポジションに応募するとします。HTML テクノロジの知識があり、面接に合格したとします。 , あなたは入社することを歓迎します. そうしないと、面接は不合格となり、入社することができません。

コードは次のように表現されます:

<script type="text/javascript">
  var mycarrer = "HTML"; //mycarrer变量存储技能
  if (mycarrer == "HTML")
    { document.write("你面试成功,欢迎加入公司。");  }
  else  //否则,技能不是HTML
    { document.write("你面试不成功,不能加入公司。");}
</script>
ログイン後にコピー

3. 複数の判定(if..else if..ネスト文)

実行するステートメントの複数のグループのうち 1 つのグループを選択するには、if..else if..ネストされたステートメントを使用します。

文法:

if(条件1)
{ 条件1成立时执行的代码}
else  if(条件2)
{ 条件2成立时执行的代码}
...
else  if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}
ログイン後にコピー

4. 複数の選択肢 (Switch..case ステートメント)

選択肢が多い場合switch を使用すると、他の場合よりも switch の方が便利です。

文法:

switch(表达式){case值1:
  执行代码块 1  break;case值2:
  执行代码块 2  break;...case值n:
  执行代码块 n  break;default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}
ログイン後にコピー

文法の説明:

Switch には初期値を割り当てる必要があり、その値は各ケースの値が一致するのと同じです。
ケースの実行後にすべてのステートメントを満たし、break ステートメントを使用して次のケースが実行されないようにします。
すべての case 値が一致しない場合は、デフォルトの後にステートメントを実行します。

生徒のテストの得点は10点満点で評価されることを前提として、各学年に応じて採点し、得点の段階に応じて異なる評価を行います。

注: ケースによって実行されるステートメントの後に、必ず Break ステートメントを追加してください。それ以外の場合は、次の場合にステートメントの実行を続行します。次のコードを見てください:

5. 繰り返し (for ループ)

多くのことは一度だけ実行されるのではなく、繰り返し行われます。たとえば、テスト用紙を 1 枚ずつ 10 部印刷し、印刷が完了するまでこの操作を繰り返します。これらを実現するには、ループ ステートメントを使用します。ループ ステートメントとは、コードを繰り返し実行することです。

forステートメント構造:

for(初始化变量;循环条件;循环迭代)
{     
    循环语句 
 }
ログイン後にコピー

ボックスの中にボールが 6 個ある場合、一度に 1 個ずつボールを取り出し、繰り返し取り出します。ボックスボールからすべてのボールが取られるまで。

<script type="text/javascript">
var num=1;
for (num=1;num<=6;num++)  //初始化值;循环条件;循环后条件值更新
{   document.write("取出第"+num+"个球<br />");
}
</script>
ログイン後にコピー

6. 繰り返し (while ループ)

while ループは for ループと同じ機能を持ち、特定の条件が満たされなくなるまでコードを繰り返し実行します。

whileステートメントの構造:

while(判断条件){
    循环语句
 }
ログイン後にコピー

while ループを使用して、ボックスからボールを​​ 1 つずつ取り出すアクションを完了します。合計6球。

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //条件判断
{
  document.write("取出第"+num+"个球<br />");
  num=num+1;  //条件值更新
}
</script>
ログイン後にコピー

7. 前後 (Do...while ループ)

do while 構造の基本原理は基本的に while 構造と同じですが、ループ本体が少なくとも 1 回は実行されます。最初にコードを実行してから条件を判断するため、条件が true の場合はループが継続されます。

do...whileステートメント構造:

do{
    循环语句
 }while(判断条件)
ログイン後にコピー

5 つの数値を出力しようとします。

<script type="text/javascript">
   num= 1;
   do
   {
     document.write("数值为:" +  num+"<br />");
     num++; //更新条件
   }
   while (num<=5)
</script>
ログイン後にコピー

8.for...in ステートメント: オブジェクトのプロパティをループします

for in ループは特別なタイプのループであり、通常の for ループの変形であり、主に使用されます。オブジェクトを走査し、オブジェクト内の属性を順番に循環させるために使用できます。構文形式は次のとおりです:

for (variable in object) {
    // 要执行的代码
}
ログイン後にコピー

このうち、variable は変数であり、毎回異なる値が割り当てられます。これはループされています。次のことができます。{ } この変数を使用して、一連の操作を実行します。object は、トラバースされるオブジェクトです。各ループでは、オブジェクト object 内の属性のキーが、すべての属性が格納されるまで、変数 variable に割り当てられます。オブジェクトが通過されました。

JS for in 循环示例代码:

// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
    document.write("<p>" + prop + " = " + person[prop] + "</p>");
}
ログイン後にコピー

运行结果:

name = Clark
surname = Kent
age = 36
ログイン後にコピー

9.for...of语句: 循环遍历对象的属性

for of 循环是 ECMAScript6 中新添加的一个循环方式,与 for in 循环类似,也是普通 for 循环的一种变体。使用 for of 循环可以轻松的遍历数组或者其它可遍历的对象,例如字符串、对象等。

JS for of 循环的语法格式如下:

for (variable of iterable) {
    // 要执行的代码
}
ログイン後にコピー

其中,variable 为一个变量,每次循环时这个变量都会被赋予不同的值,我们可以在后面的{ }中使用这个变量来进行一系列操作;iterable 为要遍历的内容,在每次循环中,会将 iterable 中的一个值赋值给变量 variable,直到 iterable 中的所有值都遍历完。

示例代码如下:

// 定义一个数组
var arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;, &#39;f&#39;];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
    document.write(value + ", ");
}
document.write("<br>");
// 定义一个字符串
var str = "Hello World!";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {
    document.write(value + ", ");
}
document.write("<br>");
// 定义一个对象
var obj = {"name": "Clark", "surname": "Kent", "age": "36"};
// 使用 for of 循环遍历对象中的所有属性
for(var value in obj) {
    document.write(value + ", ");
}
ログイン後にコピー

运行结果:

a, b, c, d, e, f,
H, e, l, l, o, , W, o, r, l, d, !,
name, surname, age,
ログイン後にコピー

10.退出循环break

在while、for、do...while、while循环中使用break语句退出当前循环,直接执行后面的代码。

格式如下:

for(初始条件;判断条件;循环后条件值更新)
{  if(特殊情况)
  {break;}
  循环代码
}
ログイン後にコピー

当遇到特殊情况的时候,循环就会立即结束。看看下面的例子,输出10个数,如果数值为5,就停止输出。

11.跳过本次循环continue

continue的作用是仅仅跳过本次循环,而整个循环体继续执行。

语句结构:

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  { continue; }
 循环代码
}
ログイン後にコピー

上面的循环中,当特殊情况发生的时候,本次循环将被跳过,而后续的循环则不会受到影响。

【推荐学习:javascript高级教程

以上がJavaScript フロー制御のステートメントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

Python の一般的なプロセス制御構造は何ですか? Python の一般的なプロセス制御構造は何ですか? Dec 12, 2023 pm 04:31 PM

Python には、シーケンス構造、選択構造、ループ構造という 3 つの一般的なプロセス制御構造があります。詳細な紹介: 1. シーケンシャル構造。プログラムの中で最も単純な構造です。コードの順序に従って、上から下に実行されます。2. 選択構造。この構造は、特定の条件に従って判断し、選択することができます。 Python のブロックは通常、選択構造を実装するために「if-elif-else」ステートメントを使用します; 3. 特定の条件が満たされたときに停止するまでコードの一部を繰り返し実行できるループ構造など。

See all articles