JavaScript プログラムのループ構造の詳細な説明

JavaScript プログラムのループ構造の詳細な説明

構造を選択

単一分岐構造の場合

if(条件){
条件が満たされた後に実行されるコード}

中括弧内にステートメントが 1 つしかない場合は、中括弧を省略できますが、これは強くお勧めしません。

if(条件)
	console.log('ドット ドット ドット')

2分岐のif構造文

if (条件) {
条件が満たされた後に実行されるコード}
それ以外{
条件が満たされない場合に実行されるコード}

複数分岐の if 構造ステートメント

if(条件1){
コード 1
}
そうでない場合(条件2){
コード2
}
......
それ以外{
上記の条件のいずれも満たされず、コードが実行される}

スイッチ構造

var 今日=1
スイッチ(今日){
	ケース1:
		console.log('勤務日')
		壊す
	ケース2:
		console.log('勤務日')
		壊す
	ケース3:
	ケース4:
	ケース5:
		console.log('勤務日')
		壊す
	デフォルト
		console.log('休息日')
		壊す

switchとifの違い

  • スイッチは、次の場合にのみ等価判定を実行できます。
  • 連続区間の判定に制限はありません。

ループ構造

操作を繰り返し実行することをループと呼びます。

その間

// 10 回ループ var i=1
i<=10 の場合
コンソールログ('111111')
私は++
}
//例: 100 以内の整数の合計を計算する var i=1
var 合計 = 0
i<=100 の場合{
 合計+=i
 私は++
}
例: [1,200] の間のうち 7 で割り切れるが 4 で割り切れないすべての整数を出力し、その数を数えます。同時に、出力には各行に 5 つの var i=1 が表示される必要があります。
変数カウント = 0
i<=200 の場合
	if(i%7==0 && i%4!=0){
		document.write(i+"&nbsp;&nbsp;&nbsp;&nbsp;")
		count++; // 数を数える // 5 つの出力が新しい行に変更されるかどうかを判定する if (count%5==0){
		ドキュメント..write('<br>');
		}
	}
	私は++;
	document.write('<br>合計: '+count+'')

…しながら

まずコードを実行し、次に条件を判断する

var i = 1;
        する{
            console.log('一生懸命勉強して毎日進歩しましょう!')
            私は++;
        }while(i<=10)
  #Case#1~50 の倍数を計算する<script type="text/javascript">
        var i = 1;
        var 合計 = 0;
        する{
            if(i%6==0){
                合計+=i
            }
            私は++;
        }while(i<=50)
        コンソール.log(合計)
    </スクリプト>
#Case# ループしてユーザーに 5 つの数字を入力するよう促し、終了するには q を押してから、最大値と最小値を出力します。# ユーザーに 1 回入力するよう促し、その数字を最大値と最小値として使用します。var num = Number(prompt('特性を入力してください (終了するには q を押します):'))
 var max = 数値;
var min = 数値;
var flag = true // ループを続行するかどうかを示します var i = 1;
する{
var num=Number(promot('整数を入力してください!'))
#ユーザーがqを入力したかどうかを判定する
if(num=='q'){
flag=false //q を入力した場合は、フラグを false に変更してループが停止することを示します}else{
num=数値(num)
if(num>max){
	最大=数値;
}
(数値<最小値)の場合{
最小=数値
}
}while(フラグ)
コンソール.log(最大)
コンソール.log(分)

forループ

文法

for(初期化:条件:反復){
コードブロック}

ループの最初に初期化部分が実行され、初期化部分は一度だけ実行されます。

初期化が完了したら、条件が満たされているかどうかが判断され、満たされている場合はコード ブロックが実行され、その後反復部分が実行されます。

…のために…で

コレクションデータを横断する

ループの走査は、データ自体ではなく、コレクション内の走査されたデータのインデックス順序(0から始まる)です。

<script type="text/javascript">
        var str = 'abc'
        for(var index in str){
            console.log(インデックス,str[インデックス])
        }
    </スクリプト>

ここに画像の説明を挿入

…の…のために

コレクションデータを反復処理する

これは値を直接取得するためです

<script type="text/javascript">
        var str = 'abc'
        for(var strのインデックス){
            コンソール.log(インデックス)
        }
    </スクリプト>

ここに画像の説明を挿入

まとめ

  • ループ回数が決まっている場合は、通常forが使用される。
  • ループ回数が不明な場合は、whileとdo...whileが一般的に使用されます。
  • コレクションを反復処理するには、for...in と for...of を使用します。

ループの終了

壊す

breakはループ全体を抜け出し、ループの実行を終了します。

場合

// 1 から 20 までの整数を加算し、累積値が 66 を超えると加算を停止し、現在の整数と累積値を出力します。var sum = 0
(var i=1;i<=20;i++){
	合計+=1
	合計が66以上の場合
	壊す
}
}

続く

このループから抜け出して次のループを実行します。このループはまだ完了していません。

// 1~10 までのすべての偶数の合計を計算します var sum=0;
(var i=1;i<=10;i++){
	if(i%2!=0){
	続く
	}
	合計+=i
}

第2層サイクル

ループは別のループ内にネストされ、二重ループを形成します。さまざまなループを互いにネストできます。

外側のループ変数は1回変更され、内側のループは1回実行されます。

//ケース //あるプログラミングコンテストに、4人の生徒が参加する3つのクラスがあります。各クラスの各生徒のスコアを入力し、各クラスの平均スコアを計算します。for(var i=1;i<=3;i++){
	alert('+i+'番目のクラスの生徒情報を入力してください---')
	// 内部ループはクラスの生徒数を制御します var sum=0
	(var j=1;j<=4;j++){
	var score=Number(prompt('j+番目の生徒のスコアを入力してください:'))
	合計+=スコア;
}
	console.log('+i+'番目のクラスの平均スコアは: '+sum/4)
}
  <script type="text/javascript">
        (var i=1;i<=9;i++){
            (var j=1;j<=i;j++){
                document.write(j+'*'+i+'='+i*j+'&nbsp;&nbsp')
            }
            ドキュメント.write('<br>')
        }
    </スクリプト>

ここに画像の説明を挿入

要約する

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

以下もご興味があるかもしれません:
  • JS の基礎: 論理構造とループ操作の例
  • JavaScript データ構造における双方向リンクリストと双方向循環リンクリストの実装
  • JavaScript データ構造: 単方向リンクリストと循環リンクリスト
  • JavaScript データ構造の詳細な説明: 優先キューと循環キューの例
  • JavaScript の for 文のループ構造を簡単に学ぶ

<<:  ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

>>:  CSS3 を使用して左上または右上隅にリマインダー ドットを表示するサンプル コード

推薦する

MySQL のユニークインデックスと通常のインデックスのどちらを選択すればよいでしょうか?

ユーザー テーブルを設計するときに、各人の ID 番号が一意であり、検索する必要があるシナリオを想像...

MySQL データベースにおける高同時実行性の問題を解決する方法

序文スタートアップ企業が最初はモノリシック アプリケーションを主要なアーキテクチャとして使用し、通常...

Centos 7 sshd の変更 | ルートログインの禁止と sshd ポートスクリプトの定義

1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...

HTMLタグオーバーフロー処理アプリケーション

CSSを使用してスクロールバーを変更する1.コンテンツがオーバーフローした場合のオーバーフロー設定水...

LinuxでIPアドレスが表示されない問題の解決方法

目次序文解決:ステップ1ステップ2序文環境: VMware Workstation 上に Linux...

ウェブサイトの画像にグレー効果を加える3つの方法

私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...

コーディングスキルを向上させるためのJavaScriptのヒント

目次1. 一意の値をフィルタリングする2. 短絡評価2.1 シナリオ例3. ブール変換4. 文字列を...

Vue ミックスインの使い方の詳しい説明

目次Vue ミックスインの使用ミックスインでのデータアクセスミックスイン/index.jsホーム.v...

ユーザーエクスペリエンスの76の経験ポイントの要約

ウェブサイト体験の分類1. 感覚体験:快適性を重視した視聴覚体験をユーザーに提供します。 2. イン...

Linuxコマンドとファイル検索の詳しい説明

1. ファイル名検索を実行するwhich ('実行可能ファイル' を検索) //PA...

Vue の proto ファイルの関数呼び出しのグラフィカルな説明

1. protoをコンパイルするすべての .proto ファイルを保存するために、src フォルダー...

MySQL 8.0 のメモリ消費の詳細な分析

目次1. innodb_buffer_pool_size 2. innodb_log_buffer_...

海外の無料写真素材サイトベスト9

良い画像素材のウェブサイトを見つけるのは難しいです。特に無料です。良い写真には非常に目を引く視覚効果...

MySQL コマンドを使用してインデックスを作成、削除、およびクエリする方法の紹介

MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...