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 種類)

推薦する

Dockerを使用してMySQL 8.0をデプロイする方法の例

1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...

Bootstrap3.0 学習ノートテーブル関連

この記事では、Webサイトを作ったことがある人にとっては馴染みのあるテーブルについて主に説明します。...

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...

MySQL LOAD_FILE() 関数メソッドの概要

MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...

Linux および Unix サーバーのセキュリティを強化する方法

ネットワーク セキュリティは非常に重要なトピックであり、サーバーはネットワーク セキュリティにおける...

シンプルな時計を実装するJavaScript

この記事では、JavaScriptでシンプルな時計を実装するための具体的なコードを参考までに紹介しま...

Linux オペレーティング システムで ssh/sftp を構成して権限を設定する方法

FTP と比較すると、SSH ベースの sftp サービスは、セキュリティが優れており (非プレーン...

泡の小さな鋭角効果を実現するCSS

効果画像(境界線の色が薄すぎるので、{} で囲みます): { }参考リンク Pure CSS バブル...

WeChatアプレット仮想リストの応用例

目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...

JSはUUIDとNanoIDというユニークなIDメソッドを生成します

目次1. NanoIDがUUIDに取って代わる理由2. jsを生成する方法3. ナノID方式序文:ユ...

Flexレイアウトとスケーリング計算についての簡単な説明

1. Flexレイアウトの紹介Flex は Flexible Box の略で、「柔軟なレイアウト」を...

JavaScript ES6 モジュールの詳細な説明

目次0. モジュールとは何か1.モジュールの読み込み1.1 方法1 1.2 方法2 2. 輸出と輸入...

MySQL のテーブルリターンとインデックスカバレッジの例の詳細な説明

目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...

Yahooが開発したウェブページスコアリングプラグインYSlowのスコアリングルール

YSlow は、Yahoo USA が開発したページ スコアリング プラグインです。非常に優れていま...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...