序文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 種類)
目次複雑なクエリとステップバイステップのクエリクエリステートメントを分割する共同クエリの分解問題のあ...
目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...
ここ数日ブログを更新していませんでした。簡単な HTML+CSS プロジェクトを終えたところです。数...
多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...
サブフォルダーの末尾にスラッシュがない場合、2 つの HTTP リクエストが生成され、効率に影響しま...
目次1. ノード、ツリー、仮想DOM 2. 仮想DOM 2.1 データオブジェクトの詳細2.2 制約...
この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...
目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...
その機能はグローバル スタイルを設定することです。その後の相対パスはこれに基づきます: <im...
序文:ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...
マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...
序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...
記述した Dockerfile の内容は次のとおりです。 Python:3.6.8 から pip i...
my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...
問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...