序文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 の違い:
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 を使用すると非常に便利であることがわかります。使用することをお勧めします。 要約する
これで、JavaScript の 3 つの for ループ ステートメントの使用に関するこの記事は終了です。JS の for ループ ステートメントの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: UbuntuからMySQLを削除して再インストールする方法
>>: Ubuntu インストール時にブラックスクリーンが表示される場合の解決策 (3 種類)
1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...
この記事では、Webサイトを作ったことがある人にとっては馴染みのあるテーブルについて主に説明します。...
リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...
MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...
ネットワーク セキュリティは非常に重要なトピックであり、サーバーはネットワーク セキュリティにおける...
この記事では、JavaScriptでシンプルな時計を実装するための具体的なコードを参考までに紹介しま...
FTP と比較すると、SSH ベースの sftp サービスは、セキュリティが優れており (非プレーン...
効果画像(境界線の色が薄すぎるので、{} で囲みます): { }参考リンク Pure CSS バブル...
目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...
目次1. NanoIDがUUIDに取って代わる理由2. jsを生成する方法3. ナノID方式序文:ユ...
1. Flexレイアウトの紹介Flex は Flexible Box の略で、「柔軟なレイアウト」を...
目次0. モジュールとは何か1.モジュールの読み込み1.1 方法1 1.2 方法2 2. 輸出と輸入...
目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...
YSlow は、Yahoo USA が開発したページ スコアリング プラグインです。非常に優れていま...
目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...