目次
示例:
ホームページ ウェブフロントエンド フロントエンドQ&A JavaScript には 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 <= 100 は、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 <= lst.length - 1i と同等です。 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 までご連絡ください。

ホット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でinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

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

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

JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 Dec 17, 2023 am 08:41 AM

JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワーク プロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラ デバイスがあるとします。

See all articles