この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let index=0; index < someArray.length; index++) { const elem = someArray[インデックス]; // ··· } for-in ループ: for (constキーin someArray) { console.log(キー); } 配列メソッド .forEach(): someArray.forEach((要素, インデックス) => { console.log(要素、インデックス); }); for-of ループ: for (const 要素のsomeArray) { console.log(要素); } 通常は for-of が最善の選択です。理由を見てみましょう。 forループ [ES1]JavaScript の for ループは非常に古く、ECMAScript 1 の頃から存在しています。 for ループは、arr の各要素のインデックスと値を記録します。 定数 arr = ['a', 'b', 'c']; arr.prop = 'プロパティ値'; for (let index=0; index < arr.length; index++) { const elem = arr[インデックス]; console.log(インデックス、要素); } // 出力: // 0, 'a' // 1, 'b' // 2, 'c' for ループの利点と欠点は何ですか?
for-in ループ [ES1]for-in ループは for ループと同じくらい古く、ECMAScript 1 にも存在しています。次のコードでは、for-in ループを使用して arr のキーを出力します。 定数 arr = ['a', 'b', 'c']; arr.prop = 'プロパティ値'; for (const キー in arr) { console.log(キー); } // 出力: // '0' // '1' // '2' // 'プロップ' for-in は配列をループするのに良い方法ではありません。
継承されたプロパティに for-in でアクセスする実際の目的は、オブジェクトのすべての列挙可能なプロパティを反復処理することです。 配列メソッド .forEach() [ES5]for も for-in も配列のループには特に適していないため、ECMAScript 5 ではヘルパー メソッド Array.prototype.forEach() が導入されました。 定数 arr = ['a', 'b', 'c']; arr.prop = 'プロパティ値'; arr.forEach((要素, インデックス) => { console.log(要素、インデックス); }); // 出力: // 'a', 0 // 'b', 1 // 'c', 2 このアプローチは非常に便利です。多くの操作を実行しなくても、配列の要素とインデックスにアクセスできます。矢印関数 (ES6 で導入) を使用すると、構文がよりエレガントになります。 .forEach() の主な欠点は次のとおりです。
.forEach() ソリューションを中止する.forEach() のようなループを中止したい場合は、回避策があります。 .some() もすべての配列要素をループし、コールバックが true 値を返すと停止します。 const arr = ['赤', '緑', '青']; arr.some((要素, インデックス) => { (インデックス >= 2)の場合{ true を返す; // ループを終了する} console.log(要素); // このコールバックは暗黙的に `undefined` を返しますが、これは偽値です。 そしてサイクルは続きます。 }); // 出力: // '赤' // '緑' これは .some() の乱用とも言え、for-of や break と比較すると、このコードを理解するのは簡単ではありません。 for-of ループ [ES6]for-of ループは ECMAScript 6 でサポートされています。 定数 arr = ['a', 'b', 'c']; arr.prop = 'プロパティ値'; (arrのconst要素) { console.log(要素); } // 出力: // 'あ' // 'b' // 'c' for-of は配列をループするのに非常に効果的です。 配列要素を反復処理するために使用されます。 awaitを使うことができます
外部スコープでも break と continue を使用できます。 for-of と反復可能for-of は配列を走査できるだけでなく、Map などの反復可能なオブジェクトを反復処理することもできます。 const myMap = 新しい Map() .set(false, 'いいえ') .set(true, 'はい') ; for (const [キー, 値] of myMap) { console.log(キー、値); } // 出力: // 偽、'いいえ' // 真、'はい' myMap を反復処理すると、[キー、値] のペアが生成され、それぞれを分解することで直接アクセスできます。 for-of と配列のインデックス配列メソッド .entries() は、[インデックス、値] ペアの反復可能オブジェクトを返します。このメソッドで for-of と構造化分解を使用すると、配列のインデックスに簡単にアクセスできます。 const arr = ['チョコレート', 'バニラ', 'ストロベリー']; for (const [index, elem] of arr.entries()) { console.log(インデックス、要素); } // 出力: // 0, 'チョコレート' // 1, 'バニラ' // 2, 'イチゴ' 要約するfor-of ループの使いやすさは、for、for-in、.forEach() よりも優れています。 一般的に、4 つのループ メカニズム間のパフォーマンスの違いは重要ではありません。計算負荷の高い処理を実行する場合は、WebAssembly に切り替えることをお勧めします。 これで、JS で配列をループする 4 つの方法についての記事は終了です。JS で配列をループする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコード
CSS命名規則 ヘッダー: ヘッダーコンテンツ: コンテンツ/含むフッターナビゲーション: navサ...
メモ帳プログラムは、HTML + CSS + JavaScript の 3 つの主要なフロントエンド...
テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...
ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...
独自のWebプロジェクトをtomcatディレクトリの下のwebappsディレクトリに配置します。 R...
前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...
<br />言葉は、人間の思考や感情を伝えるために必然的に生み出されるものです。人類の文...
関連記事:初心者が学ぶ HTML タグ (3)導入された HTML タグは、必ずしも XHTML 仕...
この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...
1. CentOS8でのDockerのインストール カール https://download.doc...
ロケーションは「位置指定」を意味し、主にさまざまな位置指定のための URI に基づいています。これは...
導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...
日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...
1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...