JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)

JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)

序文

JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、for ループはトラバーサルに不可欠なツールの 1 つです。誰もが JavaScript の for ループ ステートメントにうんざりしていると思います。コード内の for ループ ステートメントを減らす方法についての記事は数多くありますが、for ループ ステートメントが本当に便利であることは認めざるを得ません。今日は、フロントエンド JavaScript における 3 つの for ループ文についてまとめます。

のために

これはおそらく最も広く使用されているループ文です。シンプルで実用的であり、そのパフォーマンスは今でもほとんどの場合オンラインです。唯一の欠点は、あまりにも普通で特徴がないため、今では多くの人が使用したくないということです。

定数配列 = [4, 7, 9, 2, 6];
for (let index = 0; index < array.length; index++) {
    const 要素 = 配列[インデックス];
    console.log(要素);
}
// 4、7、9、2、6

...のために

for...in ステートメントは、Symbol を除くオブジェクトの列挙可能なプロパティを任意の順序で反復処理できます。

const temp = {名前: "temp"};
関数Apple() {
    this.color = '赤';
}

Apple.prototype = temp;

const obj = new Apple();

(obj内のconstプロパティ) {
    console.log(`obj.${prop} = ${obj[prop]}`);
}

// obj.color = 赤
// obj.name = temp

オブジェクト自体のプロパティのみを気にし、そのプロトタイプは気にしない場合は、getOwnPropertyNames() を使用するか、hasOwnProperty() を実行して、プロパティがオブジェクト自体のプロパティであるかどうかを判断します。

const temp = {名前: "temp"};
関数Apple() {
    this.color = '赤';
}

Apple.prototype = temp;

const obj = new Apple();

(obj内のconstプロパティ) {
    obj.hasOwnProperty(prop) の場合 {
        console.log(`obj.${prop} = ${obj[prop]}`);
    }
}

// obj.color = 赤

もちろん、配列を走査するためにも使用できます。

定数arr = [1, 2, 3, 4, 5];
for (const キー in arr) {
    console.log(キー)
}
// 0,1,2,3,4

for...in を使用して配列を走査することはできますが、次のような問題があります。

  1. インデックス インデックスは文字列番号 (数値ではないことに注意) であり、幾何学的演算に直接使用することはできません。
  2. トラバース順序は、実際の配列の内部順序と一致しない場合があります (ランダムな順序になる場合があります)。

したがって、配列を走査するために for...in を使用することは一般的に推奨されません。

...のために

for...of ステートメントは、反復可能なオブジェクト (Array、Map、Set、String、TypedArray、arguments オブジェクトなどを含む) に対して反復ループを作成し、カスタム反復フックを呼び出して、異なるプロパティ値ごとにステートメントを実行します。

定数配列 = ['a', 'b', 'c'];
for (配列のconst要素) {
    console.log(要素);
}

// は
// ば
// は

for...of と for...in の違い:

  • for...in ステートメントは、オブジェクトの列挙可能なプロパティを任意の順序で反復処理します。
  • for...of ステートメントは、反復可能なオブジェクトを反復処理して、反復処理するデータを定義します。
Object.prototype.objCustom = function () { };
Array.prototype.arrCustom = function () { };

iterable を [3, 5, 7] とします。
iterable.foo = 'hello';

for (const キー in iterable) {
    console.log(key); // 0、1、2、"foo"、"arrCustom"、"objCustom" をログに記録します
}
// 0、1、2、「foo」、「arrCustom」、「objCustom」

for (反復可能オブジェクトの定数キー) {
    console.log(キー);
}
// 3、5、7

Map 構造を走査するには for...of を使用します。

ノードを新しい Map() にします。
ノードを設定します("node1", "t1")
    .set("ノード2", "t2")
    .set("node3", "t3");

for (const [ノード、ノードのコンテンツ]) {
    console.log(ノード、コンテンツ);
}
// ノード1 t1
// ノード2 t2
// ノード3 t3

Map 構造をトラバースするには for...of を使用すると非常に便利であることがわかります。使用することをお勧めします。

要約する

  1. 通常の for ループの使用に飽きた場合は、代わりに for...of を使用することをお勧めします。
  2. これら 3 種類のループはすべて、 break キーワードを使用してループを終了するか、 continue キーワードを使用して現在のループをスキップできます。
  3. for...of ループは適用範囲が最も広いです。

これで、JavaScript の 3 つの for ループ ステートメントの使用に関するこの記事は終了です。JS の for ループ ステートメントの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS における for、for...in、for...of、forEach の違いと使用例
  • JavaScript の for in と for of の違いを例を通して分析する
  • js で forEach、for in、for of ループを使用する例のまとめ
  • js トラバーサルの詳細な説明 (forEach、map、for、for...in、for...of)
  • Js での for...in と for...of の使い方の詳細な説明
  • JS における map、filter、some、every、forEach、for in、for of の使用法の簡単な分析
  • JavaScript のループ メソッドの包括的な分析: forEach、for-in、for-of
  • JavaScript の for/of、for/in の詳細な紹介

<<:  UbuntuからMySQLを削除して再インストールする方法

>>:  Ubuntu インストール時にブラックスクリーンが表示される場合の解決策 (3 種類)

推薦する

MySQLクエリ文を書き換える3つの戦略

目次複雑なクエリとステップバイステップのクエリクエリステートメントを分割する共同クエリの分解問題のあ...

React でカレンダー コンポーネントを構築するためのステップ バイ ステップ ガイド

目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...

HTML+CSSプロジェクト開発経験概要(推奨)

ここ数日ブログを更新していませんでした。簡単な HTML+CSS プロジェクトを終えたところです。数...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...

HTMLリンクを書くときは、HTTPリクエストを減らすためにサブフォルダに必ずスラッシュを追加してください。

サブフォルダーの末尾にスラッシュがない場合、2 つの HTTP リクエストが生成され、効率に影響しま...

VueのRender関数

目次1. ノード、ツリー、仮想DOM 2. 仮想DOM 2.1 データオブジェクトの詳細2.2 制約...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...

HTML ベース URL タグ

その機能はグローバル スタイルを設定することです。その後の相対パスはこれに基づきます: <im...

Alibaba Cloud で静的ウェブサイトを素早く構築する方法

序文:ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...

要素動的ルーティングブレッドクラムの実装例

マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...

JSは10進数を16進数に変換するサンプルコードを実装します

序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...

Dockerfile ビルド中に発生する「/bin/sh: pip: コマンドが見つかりません」という問題の解決方法

記述した Dockerfile の内容は次のとおりです。 Python:3.6.8 から pip i...

MySQL 5.7 で my.ini ファイルが見つからない場合の解決策

my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...

MySQLがlocalhost経由でデータベースに接続できない問題に対する完璧な解決策

問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...