検索
ホームページウェブフロントエンドフロントエンドQ&AJavaScript には for ループがありますか?

JavaScript には for ループがありますか?

Mar 01, 2022 am 11:41 AM
for ループjavascript

JavaScript には for ループがあります。 JavaScript言語のforループは、コードブロックを複数回実行するために使用されます。JSでよく使われるループツールで、ループ回数がわかっている場合に使用するのに適しています。構文「for(初期化式; 条件式; 変数更新)」 ) {条件式が true のときに実行されるコード}」。

JavaScript には for ループがありますか?

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

JavaScript には for ループがあります。

JavaScript 言語の for ループは、コード ブロックを複数回実行するために使用されます。JavaScript で最も一般的に使用されるループ ツールであり、配列トラバーサル ループなどにも使用できます。

なぜ for ループを使用するのでしょうか?たとえば、コンソールに 1 から 1000 までのすべての数値を出力させたい場合、出力ステートメントだけを記述すると 1000 行のコードを記述する必要がありますが、for ループを使用すれば、わずか数行で実現できます。コード行。つまり、for ループを使用すると、コードをより便利かつ迅速に作成できるようになります (もちろん、そうでなければ、なぜループが必要になるでしょうか)。

JS for ループの構文

JS for ループは、ループ数がわかっている場合の使用に適しています。構文形式は次のとおりです。

for(初始化表达式; 条件表达式; 变量更新) {
	// 条件表达式为true时执行的代码
}
  • 初期化式: 通常、カウンターの初期値、つまりループの開始時の値を宣言するために使用されます。

  • 条件式: ループ コード ブロックを実行するための条件を定義します。これは、ループ本体内のコードを実行するかどうかを制御するために使用されます。条件が FALSE の場合、ループは終了します。すぐに。

  • 変数更新: 各ループ コード ブロックの実行後に実行されます。ループが実行されるたびに、カウンター値がすぐに変更されます。

for ループ ステートメントの実行フローを次の図に示します。

JavaScript には for ループがありますか?

例 1:

たとえば、 HTML ファイルを作成します 次のコードは、1 から 100 までの合計の計算を実装します:

  var result = 0;
  for(var i = 1; i <= 100; i++) {
    result = result + i;
  }
  alert(result);

このファイルをブラウザで開くと、ポップアップ レイヤーが表示されます。 1 から 100 までの合計:


上記のコードでは、変数 result を宣言し、それに値 0 を割り当てます。これは、初期合計が 0 であることを示します。

次に、for ループ内の 3 つのステートメント:

  • 変数の初期化 i = 1、これは 1 から開始することを意味します。
  • 条件式 i は、<code>i が 100 以下である限り、ループが実行され続けることを意味します。 i が 100 より大きい場合、ループは続行され、停止します。
  • 変数更新
  • i 、演算子を学習したときに学習しました。これはインクリメント演算子 で、オペランドが 1 ずつ増加することを意味します。
この時点で、この

for ループをステップごとに確認できます:

第一次循环: result = 0 + 1   // 此时result值为0,  i的值为1
第二次循环: result = 1 + 2   // 此时result值为0+1,i的值为2
第三次循环: result = 3 + 3   // 此时result值为1+2,i的值为3
第四次循环: result = 6 + 4   // 此时result值为3+3,i的值为4
第五次循环: result = 10 + 5  // 此时result值为6+4,i的值为5
...

あとは

for での実行を理解するだけです。 ループ 原理としては、手動で合計を計算する必要がなく、コードを記述しておけば、コード実行後にコンピュータが 1 から 100 までの合計をすぐに教えてくれます。

上記のコード

result = result i では、result = i と書くこともできます。これは、以前に学習した加算代入演算子です。 。 覚えていますか?

例 2:

別の例を見てみましょう。たとえば、

for ループを使用して配列トラバーサルを実装できます。まず、 array lst:

var lst = ["a", "b", "c", "d", "e"];

for ループを作成するとき、最初に行うことは、括弧内の 3 つのステートメントを理解することです。配列内の要素の添字インデックス 要素の値、および配列のインデックスは 0 から始まるため、変数の初期化を i = 0 に設定できます。 2 番目の条件式は、配列内の最後のインデックスが lst.length - 1 であるため、それが lst.length - 1 以下である限り、ループが実行されます。実行を継続します。また、i は i と同等です。 3 番目の変数が更新され、ループがループするたびにインデックス値が 1 ずつ増加するため、i となります。

したがって、ループは次のように書くことができます:

for(i = 0; i<lst.length; i++){
    console.log(lst[i]);  // 输出数组中的元素值,从索引为0的值开始输出,每次加1,一直到lst.length-1
}

出力:

a
b
c
d
e

実際には、配列を走査するより良い方法があります。それは ## を使用することです。 #for... in

配列を走査するループ ステートメント。

for ループ内の 3 つの式JS for ループ内の括弧内の 3 つの式は省略できますが、セミコロンを使用します。次の例に示すように、3 つの式を区切るのは省略できません。

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

for ループの入れ子どのループを入れ子にしても (つまり、ループ内に 1 つ以上のループが定義されています)ループのネストされた使用法を示すために for ループを例に挙げてみましょう:

for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        document.write(j + " x " + i + " = " + (i * j) + "&emsp;");
    }
    document.write("<br>");
}

実行結果:

扩展知识:for 循环变体--for…in 循环

for...in 循环主要用于遍历数组或对象属性,对数组或对象的属性进行循环操作。for...in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

语法如下:

for (变量 in 对象) {
	// 代码块
}

for 循环括号内的变量是用来指定变量,指定的可以是数组对象或者是对象属性。

示例:

使用 for...in 循环遍历我们定义好的 lst 数组:

var lst = ["a", "b", "c", "d", "e"];for(var l in lst){
    console.log(lst[l]);}

输出:

a
b
c
d
e

除了数组,for...in 循环还可以遍历对象,例如我们遍历 侠侠 的个人基本信息:

var object = {
    姓名:&#39;侠侠&#39;,
    年龄:&#39;22&#39;,
    性别:&#39;男&#39;,
    出生日期:&#39;1997-08-05&#39;,
    职业:&#39;程序员&#39;,
    特长:&#39;跳舞&#39;
}

for(var i in object) {
	console.log(i + ":" + object[i]);
}

输出:

姓名: 侠侠
年龄: 22
性别: 男
出生日期: 1997-08-05
职业:程序员
特长:跳舞

【相关推荐:javascript学习教程

以上がJavaScript には for ループがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
CSS IDS対クラス:アクセシビリティに適しているのはどれですか?CSS IDS対クラス:アクセシビリティに適しているのはどれですか?May 10, 2025 am 12:02 AM

classesarebetterforaccesibility inwebdevelopment.1)ClassscanbeappliedTomultipleements、sunsistentStylesandbehaviorsを保証します

CSS:クラスセレクターとIDセレクターの違いを理解するCSS:クラスセレクターとIDセレクターの違いを理解するMay 09, 2025 pm 06:13 PM

classSeLectorEreusableformultipleElements、whiledselectorectorsareuniqueandusedonceperpage.1)クラスは、byperiod(。)、areideal forstylingmultipleementslikebuttons.2)、ids(#)、aerpectforuniqueelementslikeanivigationmenu.3)idshsheaveavehe.3)を示します

CSSスタイリング:クラスセレクターとIDセレクターの選択CSSスタイリング:クラスセレクターとIDセレクターの選択May 09, 2025 pm 06:09 PM

CSSスタイルでは、プロジェクトの要件に従ってクラスセレクターまたはIDセレクターを選択する必要があります。1)クラスセレクターは再利用に適しており、同じスタイルの複数の要素に適しています。 2)IDセレクターは一意の要素に適しており、優先度が高いが、メンテナンスの困難を避けるためには注意して使用する必要があります。

HTML5:制限HTML5:制限May 09, 2025 pm 05:57 PM

html5hasseverallimitationsincludingluding foradvancedgraphics、basicformvalidation、cross-browsercompatibilityissues、performurympacts、andsecurityconcerns.1)forcomplexgraphics、html5'scanvasisisuffish、resiclirarielikelikelikeweblorthree.2)i

CSS:あるスタイルは別のスタイルよりも優先されますか?CSS:あるスタイルは別のスタイルよりも優先されますか?May 09, 2025 pm 05:33 PM

はい、ounestylecanhavemorepiritythananincssduetsificity andthecascade.1)dipitiesalityactsasascoringsystemwheremorepifictoreshavehigherpriolity.2)thecascadedededereminesstytyleapplication order、

HTML5仕様の重要な目標は何ですか?HTML5仕様の重要な目標は何ですか?May 09, 2025 pm 05:25 PM

theSignificAntgoalsofhtml5aretoenhancemultimediasupport、Humanreadability、維持、Andensurebackwardcompativecivity.1)html5improvesmultimediawithnativeelementslikeand.2)ituseSseSseSseSseSseSseSseSseSseSmanticeForementionforementionforementionforementionforementionforemention foremantemention

Reactの限界は何ですか?Reactの限界は何ですか?May 02, 2025 am 12:26 AM

raceslimitationsinclude:1)asteeplearningcurveduetoitsvastecosystem、2)seochallengeswithsclient-siderEndering、3)潜在的なパフォーマンスのinlargeapplications、4)complenstatemanagementasappsgrow、and5)suneedtokeepupwithovolution

Reactの学習曲線:新しい開発者にとっての課題Reactの学習曲線:新しい開発者にとっての課題May 02, 2025 am 12:24 AM

ReactisChallengingを使用して、SteepLearNdParadigMshiftOconpontenAchitecture.1)startisofficialdocumentation forasolidfoundation.2)relondingjsxandjavascriptwithinit.3)LearntousefunctionalcompotontiTateを理解してください

See all articles

ホット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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境