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 を使用して配列を走査することはできますが、次のような問題があります。

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

したがって、配列を走査するために 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 を使用すると非常に便利であることがわかります。使用することをお勧めします。

要約する

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

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

以下もご興味があるかもしれません: