• 翻訳

• I. 実配列の反復処理
• forEach メソッドと関連メソッド
• for ループ
• for...in ループの適切な使用
• for...of ループ (イテレータの暗黙的な使用)
• イテレータの明示的な使用
• メソッドを使用して実配列を反復処理する
• 実数配列に変換する
• ランタイムオブジェクトに関する注意事項

I. 実数配列の反復 現時点では、実数配列の要素を反復するには 3 つの方法があります。

メソッド Array.prototype.forEach ;

古典的な for ループ

「正しく」構築された for...in ループ。

さらに、新しい ECMAScript 6 (ES 6) 標準の登場により、さらに 2 つのメソッドが間もなく登場すると予想されています。

for...of ループ (イテレータの暗黙的な使用)。

イテレータの明示的な使用。

1. forEach メソッドと関連メソッド プロジェクトが ECMAScript 5 (ES5) 標準の機能をサポートするように設計されている場合は、その革新的なメソッドの 1 つである forEach メソッドを使用できます。

使用例：
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
一般に、forEach を使用するには、このメソッドをネイティブにサポートしていないブラウザの es5-shim エミュレーション ライブラリを接続する必要があります。 これらには、一部の場所でまだ使用されている IE 8 以前が含まれます。

forEach の利点は、現在の配列要素のインデックスと値を格納するローカル変数を宣言する必要がないことです。ローカル変数は引数として自動的にコールバック関数に渡されるためです。

各要素でコールバックを呼び出すことで発生する可能性のあるコストが心配な場合でも、心配しないでこれをお読みください。

ForEach は、配列のすべての要素を反復処理するように設計されていますが、それに加えて、ES5 では、すべてまたは一部の要素を反復処理し、要素に対していくつかのアクションを実行するためのさらに便利なメソッドがいくつか提供されています。

• each - 配列の各要素に対してコールバックが true に変換できる値を返す場合、 true を返します。
• some - 配列の少なくとも 1 つの要素に対してコールバックが true に変換できる値を返す場合、true を返します。
• filter - コールバックが true を返す元の配列の要素を含む新しい配列を作成します。
• map - コールバックによって返された値で構成される新しい配列を作成します。
• reduce - 配列を単一の値に減らし、最初の要素から順に各配列要素にコールバックを適用します (配列要素の合計や他の集計関数を計算するのに役立ちます)。
• ReduceRight - Reduce と同様に機能しますが、要素を逆の順序で繰り返します。

2.forループ ルールに関しては古き良き:

変数 a = ["a", "b", "c"]; 変数インデックス。 for (インデックス = 0; インデックス< a.length; ++index) { console.log(a); }
配列の長さがループ全体で一定で、ループ自体がコードのパフォーマンスが重要なセクションに属している場合 (その可能性は低いですが)、配列の長さを格納する for の「より最適な」バージョンを使用できます。 :

変数 a = ["a", "b", "c"]; var インデックス、len; for (インデックス = 0, len = a.length; インデックス< len; ++index) { console.log(a); }
理論的には、このコードは前のコードよりも少し速く実行されるはずです。

要素の順序が重要でない場合は、最適化をさらに進めて、配列の長さを格納する変数を削除し、検索順序を逆に変更することができます。

変数 a = ["a", "b", "c"]; 変数インデックス。 for (インデックス = a.length - 1; インデックス >= 0; --index) ( console.log(a); )
ただし、最新の JavaScript エンジンでは、このような最適化ゲームは通常、何の意味も持ちません。

3. for...in ループの適切な使用 for...in ループの使用を勧められた場合は、配列の反復処理が本来の目的ではないことに注意してください。 よくある誤解とは異なり、for...in ループは配列インデックスを反復処理するのではなく、オブジェクトの列挙可能なプロパティを反復処理します。

ただし、スパース配列の反復処理など、場合によっては、次の例に示すように、予防策を講じていれば for...in が役立つことがあります。

// a - スパース配列 var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key 0; ) if(mas.every(isPositiv)) ( document. write("配列には正の数値のみが含まれています"); ) else( document.write("配列には少なくとも 1 つの負の数値が含まれています "); ) if(mas.some(isPositiv)) ( document.write("配列には次の数値が含まれています少なくとも 1 つの正の数が存在します"); ) else ( document.write("配列内に正の数がありません"); )

例を考えてみましょう。正の数値と負の数値を含む配列があり、少なくとも 1 つの負の数値が存在するかどうかをチェックする必要があります。 これを行うには、every メソッドと some メソッドを使用します。 正の数を返す関数を作成し、それをeveryメソッドに渡しますが、このメソッドは論理的な結果を返すため、条件文で使用されます。 この例の each メソッドは、配列内に負の数があるため false を返しますが、some メソッドは、配列内に少なくとも 1 つの正の数があるため、true を返します。

減らす/減らす右

配列を反復処理する必要がある場合は、forEach、for、または for..of を使用できます。

配列を反復処理して各要素のデータを返す必要がある場合は、map を使用します。

arr.reduce メソッドと arr.reduceRight メソッドは上記のメソッドに似ていますが、少し複雑です。 これらは、配列全体に基づいて単一の値を計算するために使用されます。

構文：

value = arr.reduce(function(previousValue, item,index, array) ( // ... ), ); とします。

この関数は配列のすべての要素に順番に適用され、その結果は次の呼び出しに「引き継がれ」ます。

引数:

• previousValue – この関数の前回の呼び出しの結果。最初の呼び出しの初期値と等しくなります (初期値が渡された場合)。
• item – 配列の次の要素、
• インデックス – そのインデックス、
• 配列 – 配列自体。

関数が呼び出されるとき、配列の前の要素に対する呼び出しの結果が最初の引数として渡されます。

これは複雑に聞こえますが、最初の引数が以前の関数呼び出しの結果を「蓄積する」ものであると考えると、より簡単になります。 終了するとreduceの結果となります。

この方法は、いつものように例を挙げて説明するのが最も簡単です。

ここでは、すべての配列要素の合計を 1 行で取得します。

arr = ; とします。 let result = arr.reduce((sum, current) => sum + current, 0); アラート(結果); // 15

ここでは、引数を 2 つだけ使用する、最も一般的な Reduce オプションを使用しました。

仕組みを詳しく見てみましょう。

最初の実行では、sum は初期値 (reduce の最後の引数) で 0、current は配列の最初の要素で 1 です。したがって、関数の結果は 1 になります。

2 回目に sum = 1 を実行すると、配列の 2 番目の要素 (2) がそれに追加されます。

3 回目の実行では、sum = 3 となり、そこに次の要素が追加されます。以下同様です。

計算フローは次のようになります。

表の形式で、各行は配列の次の要素に対する関数呼び出しです。

合計電流結果

最初の電話		1	1
二度目の電話	1	2	3
3回目の挑戦	3	3	6
4回目の挑戦	6	4	10
5回目の挑戦	10	5	15

ここでは、前の呼び出しの結果が次の呼び出しの最初の引数にどのように渡されるのかが明確にわかります。

初期値を省略することもできます。

arr = ; とします。 // 初期値は削除されます (最後に 0 はありません) let result = arr.reduce((sum, current) => sum + current); アラート(結果); // 15

結果は全く同じです！ これは、initial がない場合、配列の最初の要素が 1 番目の値とみなされ、2 番目の要素から検索が開始されるためです。

計算表は最初の行を除いたものと同じになります。

ただし、そのような使用には細心の注意が必要です。 配列が空の場合、初期値を指定せずにreduceを呼び出すとエラーがスローされます。

以下に例を示します。

arr = ; とします。 // エラー: 初期値のない空の配列の Reduce // 初期値がある場合、reduce は空の配列に対してそれを返します。 arr.reduce((合計, 現在) => 合計 + 現在);

結果

要約すると、ループ内で配列を操作するためのさまざまなメソッドを検討しましたが、これらのメソッドにはすべて、引数として関数を渡す必要があるという共通点があります。

• forEach – 配列をループするための。
• filter – 配列をフィルタリングします。 新しいフィルタリングされた配列を返します
• Every/some – 配列に個々の要素が存在するかどうかを確認します。
• map - 配列を配列に変換します。 変換された元の配列を返します。
• reduce/reduceRight - 配列全体から 1 つの値を計算し、各要素で関数を呼び出し、呼び出しの間に中間結果を渡します。 配列要素の合計を計算するために使用できます。

タスク 新しい配列を取得する

配列 var mas = ["HTML", "CSS", "JavaScript", "Pascal"] を指定すると、map メソッドを使用して、元の配列の各要素の長さを含む新しい配列を取得する必要があります。 。

配列をフィルタリングする

配列 var mas があります = 正の数のみを含む配列を取得するには、filter メソッドを使用する必要があります。

配列をチェックする

配列 var mas = があるので、配列内に負の数値があるかどうかを確認し、結果を画面に表示する必要があります。

さて、結論として、配列をループする方法に関する短いビデオです。

それはこのように動作します：

// ECMASCRIPT 2015 以降が必要です var s, myStringArray = ["Hello", "World"]; for (myStringArray の s) ( // ... s で何かを行う ... )

さらに良いことに、ECMAScript 2015 では let と const を使用したブロック スコープの変数も提供されます。

// ECMASCRIPT 2015 以降が必要 const myStringArray = ["Hello", "World"]; for (const s of myStringArray) ( // ... s で何かを行う ... ) // s はここでは定義されていません

スパース配列に関する注意: JavaScript の配列には、実際にはその長さで指定されたほど多くの要素が格納されない場合があります。 この報告される数値は、値が格納されている最大のインデックスより 1 大きいだけです。 配列に含まれる要素がその長さよりも少ない場合、その配列はスパースであると言われます。 たとえば、インデックス 3、12、および 247 にのみ要素を含む配列を持つことは完全に合法です。 このような配列の長さは 248 と指定されますが、実際には 3 つの値しか格納されません。 他のインデックスの要素にアクセスしようとすると、配列の値は未定義になります。 したがって、配列を「反復」したい場合は、答えなければならない質問があります。配列の長さで指定された範囲全体を反復し、欠落している要素について未定義の処理を行いたいのか、それとも配列のみを処理したいのかということです。要素は実際に存在しますか？ どちらのアプローチにも多くの応用例があります。 それは配列を何に使用するかによって異なります。

for .. of を使用して配列を反復処理する場合、ループの本体は長さによって実行され、実際には配列内にない要素についてはループ制御変数が未定義に設定されます。 「何かをする」コードの詳細によっては、この動作が希望どおりになる場合もありますが、それが希望どおりでない場合は、別のアプローチを使用する必要があります。

もちろん、開発者の中には、何らかの理由で ... でまだサポートされていないバージョンの JavaScript をターゲットにしているため、別のアプローチを使用する以外に選択肢がない人もいます。

JavaScript 実装が ECMAScript 仕様の以前のバージョン (たとえば、Internet Explorer 9 より前のバージョンを除く) と互換性がある限り、ループの代わりに Array#forEach イテレータ メソッドを使用できます。 この場合、配列内の各要素に対して呼び出される関数を渡します。

Var myStringArray = [ "Hello", "World" ]; myStringArray.forEach(function(s) ( // ... s で何かを行う ... ));

for ... of とは異なり、 .forEach は実際に値を含む要素に対してのみ関数を呼び出します。 要素が 3 つで長さが 248 の仮想配列を渡すと、関数は 248 回ではなく 3 回しか呼び出されません。 また、欠落している要素と実際に unknown に設定されている要素も区別します。 後者の場合でも、未定義の値を引数として渡して関数を呼び出します。 これがスパース配列を処理する方法である場合、たとえ翻訳者が for ... of をサポートしていても、 .forEach が適しているかもしれません。

最後のオプションは、JavaScript のすべてのバージョンで機能し、明示的なカウント ループです。 単純に 0 から長さより 1 つ少ない数までカウントし、カウンターをインデックスとして使用します。 メインループは次のようになります。

( for(var a = 0, l = arr.length; a< l; ++a) var b = arr[a] + 1; }] , ["for-loop++", () =>( for(var a = 0, l = arr.length; a< l; a++) var b = arr[a] + 1; }] , ["for-loop - arr.length", () =>( for(var a = 0; a< arr.length; ++a) var b = arr[a] + 1; }] , ["reverse for-loop", () =>( for(var a = arr.length - 1; a >= 0; --a) var b = arr[a] + 1; )] ,["while-loop", () => ( var a = 0 , l = arr.length; while(a< l) { var b = arr[a] + 1; ++a; } }] , ["reverse-do-while-loop", () =>( var a = arr.length - 1; // 注意してください do ( var b = arr[a] + 1; ) while(a--); )] , ["forEach", () => ( arr.forEach( a => ( var b = a + 1; )); )], ["for..in (3.3% のみ)", () => ( var ar = arr.slice(0,arr.length/33) ; for(const a in ar) ( var b = a + 1; ) )] , ["ダフデバイス", () => ( var i = 0; var r = arr.length % 8; var n = (arr .length - r) / 8; if (r > 0) do ( var b = arr + 1; ) while (--r); if (n > 0) do ( var b = arr[i] + 1; var c = arr + 1; var d = arr + 1; var e = arr + 1; var f = arr + 1; var g = arr + 1; var h = arr + 1; var k = arr + 1; i = --n >>> 3; ) while (n); )] , ["Duff device negative", () => ( var r = arr.length % 8; var n = (arr.length-r) / 8 ; ///Math.floor(arr.length / 8); var i = arr.length ; // -1; while(r)( var b = arr[--i] + 1; --r; ) while (n)( var b = arr[i] + 1; var c = arr + 1; var d = arr + 1; var e = arr + 1; var f = arr + 1; var g = arr + 1; var h = arr + 1; var j = arr + 1; i = --n >>> 3; ) )]]; function bench(title, f) ( var t0 = Performance.now(); var res = f(); return Performance.now() - t0; // console.log("$(title) は $(t1-t0 かかりました) ) msec"); ) var globalVarTime = bench("for-loop without "var"", () => ( // ここで "var" を入れるのを忘れた場合、変数はグローバルになります for(a = 0, l =arr.length;a< l; ++a) var b = arr[a] + 1; }); var times = benches.map(function(a) { arr = new Array(11111111).fill(255); return }).sort((a,b) =>a-b); var max = 回; 回 = 回.map(a => (a = (a/max)*100; return a; )); var template = (title, time, n) => "" + "$(title) " + " $(Number(time.toFixed(3)))msec" + ""; var strRes = time.map(t => template(...t)).join("\n") + "

"var" のない for ループ $(globalVarTime) msec."; var $container = document.getElementById("container"); $container.innerHTML = strRes; body ( color:#fff; background:#333; font-family :helvetica; ) body > div > div ( clear:both ) body > div > div > span ( float:left; width:43%; margin:3px 0; text-align:right; ) body > div > div > span :nth-child(2) ( text-align:left; background:darkorange; anime:showup .37s .111s; -webkit-animation:showup .37s .111s; ) @keyframes showup ( from ( width:0; ) ) @-webkit-keyframes 表示 (from ( width:0; ) )

2014年 少し前

論理的に考えてください。

これを見てください

For(var インデックス = 0 , 長さ = array.length ; インデックス< length ; index++) { //do stuff }

• 少なくとも 2 つの変数 (インデックス、長さ) を作成する必要があります。
• 長さインジケーターが以下かどうかを確認する必要があります
• インデックスを増やす必要がある
• for ループには 3 つのパラメータがあります

では、なぜこれが以下よりも速いのか教えてください。

変数の長さ = 配列.長さ; while(--length) ( //または length-- // 何かを行う )

• 1 つの変数
• チェックなし
• インデックスが減少します (マシンはこれを好みます)
• While パラメータは 1 つだけです

Chrome 28 で for ループが時間よりも速いことが示されたとき、私は完全に混乱しました。 それは次のようなものであるはずです

「そうですね、誰でも for ループを使用します。Chrome の場合はそれに焦点を当てましょう。」

しかし 2014 年の今、while ループが Chrome に戻りつつあります。 2 倍高速ですが、他のブラウザや古いブラウザでは常に高速でした。

最近、新しいテストをいくつか行いました。 実際の環境では、これらのショートコードは無価値であり、jsperf は array.length を再作成する必要があるため、実際には while ループを正しく実行できませんが、これにも時間がかかります。

jsperf の while ループの実際の速度を取得できません。

独自の関数を作成し、window.performance.now() を使用してそれを確認する必要があります。

そしてそうです...while ループを高速化する方法はありません。

本当の問題は、実際の操作/再生時間/描画時間など、あなたが呼びたいものであれば何でも構いません。

たとえば、座標と衝突を計算する必要があるキャンバス シーンがあります。これは 10 ～ 200 マイクロ秒 (ミリ秒ではありません) で実行されます。 実際には、すべての処理に数ミリ秒かかります。 DOM と同じです。

場合によっては、ループを使用する別の非常に効率的な方法があります...たとえば、配列のコピー/クローン作成など

For(var i = array.length; i > 0; arrayCopy[ --i ] = array[ i ] // 処理中);

パラメータ設定に注意してください。

• while ループと同じです。 変数を 1 つだけ使用します
• インデックスが 0 より大きいかどうかを確認する必要があります。
• ご覧のとおり、このアプローチは誰もが使用する通常のループとは異なります。3 番目のパラメーター内で処理を実行し、配列内で直接デクリメントするからです。

などの機械が存在することを裏付けると言われています。

もう少し短くして無駄なものを削除しようと思い、同じスタイルでこれを書いたと書きました。

For(var i = array.length ; i-- ; arrayCopy[ i ] = array[ i ] // 処理中);

たとえ短くても、もう一度 i を使用するとすべてが遅くなるように思えます。 これは、前の for および while ループより 1/5 遅くなります。

注記： ; () なしの for looo の後は非常に重要です

jsperf はスクリプトをテストする最良の方法ではないと言ったとしてもです。 ここにループを 2 つ追加しました。

そして、これはJavaScriptのパフォーマンスに関する別の答えです

この回答には、JavaScript の効率的な記述方法が示されています。 したがって、これを読めない場合は、質問すると答えが得られるか、JavaScript に関する本を読んでください http://www.ecma-international.org/ecma-262/5.1/

私が (古いものを再利用して) 用意したテストの最新リビジョンでは、1 つのことがわかります。

キャッシュの長さはそれほど重要ではありませんが、問題にはなりません。

私の 64 ビット Debian Squeeze 上の Chrome、Opera、Firefox では、上にリンクされたテスト (新しく開いたタブ) を最初に実行するたびに、最後の 4 つのフラグメント (グラフの 3 位、5 位、7 位、10 位) で最良の結果が得られます。私のデスクトップハードウェア）。 後続の実行では、まったく異なる結果が得られます。

パフォーマンスに関する結論は単純です。

• for ループ (前方) に入り、代わりに !== でチェックします。< .
• 後で配列を再利用する必要がない場合は、長さを短縮したループと破壊的な配列 shif() -ing も効果的です。

現在 (2011.10) では、以下のテンプレートが最も速いようです。

For (var i = 0, len = arr.length; i !== len; i++) ( ... )

ここでは arr.length のキャッシュは重要ではないので、 i !== arr.length をテストするだけで済みます。これによりパフォーマンスは低下しませんが、コードは短くなります。

PS：shift()を使用したフラグメントでは、0番目の要素にアクセスする代わりにその結果を使用できることは知っていますが、前のリビジョン（ループ中に間違った値があった）を再利用した後、どういうわけかそれを見落としました。すでに得られた結果を失うこと。

純粋なパフォーマンスにおける「最高」とは？ それともパフォーマンスと？

純粋に「最高の」パフォーマンスは、キャッシュと ++ 接頭辞演算子を使用したパフォーマンスです (私のデータ: http://jsperf.com/caching-array-length/189)

For (var i = 0, len = myArray.length; i< len; ++i) { // blah blah }

実行時間とプログラマの読み取り時間のバランスが最も良いのはキャッシュレス ループだと思います。 C/C++/Java を始めるすべてのプログラマは、これを読むのにミリ秒も費やさないでしょう。

For(var i=0; i< arr.length; i++){ // blah blah }

** 配列の長さをループ内でキャッシュすると、数秒の時間が失われます。 配列内の要素に依存します。配列内の要素が多い場合、Ms 時間* に関して大きな違いが生じます。

ああ、 //配列; for(var i = 0 ; i = 0) ( doSomething(array[i]); )

優先順位が重要な場合は、このアプローチを使用してください。

ii = array.length; とします。 i = 0 とします。 その間（私は< ii) { doSomething(array[i]); ++i; }

私はいつも最初のスタイルで書きます。

コンパイラが配列に対して最適化できるほど賢いとしても、ここで DOMNodeList や計算された長さの複雑なオブジェクトを使用しても、それでも賢いのでしょうか?

質問が配列に関するものであることは承知していますが、すべてのループを同じスタイルで記述することをお勧めします。

変数 arr = ; // 配列 var i = 0; その間（私は< arr.length) { // Do something with arr[i] i++; }

i++ は ++i、--i、および i - よりも高速です。

jQueryの各関数やメソッドの使用例を見てみる記事。

jQuery ライブラリには、それぞれ呼ばれる 2 つの異なるエンティティがあります。

1 つ目 (jQuery.each) は、配列またはオブジェクトの要素を反復処理するために使用できるユニバーサル jQuery 関数です。

2 番目 (each) は、一連の要素をループするために要素のセットに適用されるメソッドです。

各ループ (jQuery.each)。 使用例

各関数の構文:

// 配列またはオブジェクト - 要素またはプロパティを反復する必要がある配列またはオブジェクト // コールバック - 配列またはオブジェクトの各要素に対して実行される関数 プロパティ $.each(array or object,callback);

例を使用して各関数の操作を見てみましょう。

例その1。 その中で、配列のすべての要素を反復処理します。

// 3 行からなる配列 var arr = ["Car","Truck","Bus"]; // 配列を繰り返し処理しましょう arr $.each(arr,function(index,value)( // 配列の各要素に対して実行されるアクション // インデックスは配列要素の現在のインデックス (数値) // value は現在の配列要素の値です //配列のインデックスと値をコンソールに出力します console.log("Index: " +index + "; Value: " + value); )); /* 結果 (コンソール内): インデックス: 0; 値: 車インデックス: 1; 値: トラックインデックス: 2; 値: バス */

上記のコードでは、 each 関数を使用して配列を反復処理します。 この関数には 2 つの必須パラメータがあります。 最初のパラメータは、要素 (プロパティ) を反復する必要があるエンティティ (配列またはオブジェクト) です。 この場合、それは arr 配列です。 2 番目のパラメーターは、配列の各要素 (この場合) に対して実行されるコールバック関数です。 これには 2 つのパラメーターがあり、対応する変数を通じて内部でアクセスできます。 最初のパラメータは要素のシリアル番号 (0 から数えます) です。 2 番目のパラメーターは、現在の配列要素の値です。

例その2。 この例では、オブジェクトのすべてのプロパティを繰り返し処理します。

// 5 つのプロパティを持つスマートフォン オブジェクト var スマートフォン = ( "name": "LG G5 se", "year": "2016", "screen-size": "5.3", "screen-resolution": "2560 x 1440 " , "os" : "Android 6.0 (マシュマロ)" ); // スマートフォン オブジェクトを反復処理します $.each(smartphone, function(key, value) ( // オブジェクトの各プロパティに対して実行されるアクション // key - 配列プロパティの現在の名前 // value -オブジェクトの現在のプロパティの値 // プロパティの名前とその値をコンソールに表示します console.log("Property: " +key + "; Value: " + value); )); /* 結果 (コンソール内): プロパティ: 名前; 値: LG G5 se プロパティ: year; 値: 2016 プロパティ: 画面サイズ; 値: 5.3 プロパティ: 画面解像度; 値: 2560 x 1440 プロパティ: os; 値: Android 6.0 (マシュマロ) */

each 関数は、JavaScript オブジェクトを反復処理するために使用できます。 使用上の唯一の違いは、コールバック関数のパラメータの意味が異なることです。 最初のパラメータにはオブジェクトのプロパティの名前が格納され、2 番目のパラメータにはこのプロパティの値が格納されます。

例その3。 その中で、より複雑な構造を列挙します (ネストされた each の使用方法を見てみましょう)。

// 2 つのプロパティで構成されるオブジェクト。 このオブジェクトの各プロパティは値として配列を持ち、その要素もオブジェクトです。 vararticle = ( "Bootstrap": [ ("id":"1", "title":" Introduction"), ("id" :"2" , "title":"インストール方法"), ("id":"3", "title":"グリッド") ], "JavaScript": [ ("id":"4", " title":"基本 "), ("id":"5", "title":"要素の選択") ] ); $.each(articles,function(key,data) ( console.log("セクション: " + key); $.each(data, function(index,value) ( console.log("記事: id = " + 値 ["id"] + "; タイトル = "+ 値["タイトル"]); )); )); /* 結果: セクション: ブートストラップ記事: id = 1; タイトル = 紹介記事: id = 2; タイトル = インストール方法 記事: id = 3; タイトル = グリッド セクション: JavaScript 記事: id = 4; タイトル = 基本記事: id = 5; 名前 = 要素の選択 */

それぞれを中断する（ループを終了する）にはどうすればよいですか？

each ループの解除は return ステートメントを使用して行われ、 false を返す必要があります。

たとえば、arr 配列で数値 7 を見つけた後、 each ループの実行を中断してみましょう。

// 5 つの数値からなる配列 var arr = ; // 検索する番号 var find = 7; // 配列を繰り返し処理しましょう arr $.each(arr, function (index, value) ( // 必要な数値が見つかったら、.. if (value === find) ( // それを出力しますconsole console.log("万歳! 番号 " + find + " が見つかりました! この番号にはインデックスがあります: " +index); // ループを中断 return false; ) else ( // それ以外の場合は、現在の番号をコンソールに出力しますconsole.log("現在の番号: " + 値); ) )); /* 結果 (コンソール内): 現在の数: 5 現在の数: 4 万歳! 7番発見！ この数値にはインデックス 2 があります */

次の反復 (それぞれ継続) に進むにはどうすればよいですか?

それぞれの場合、現在の反復を中断して次の反復に移動するには、return ステートメントを使用します。このステートメントには false 以外の値を指定する必要があります。

// 数値からなる配列 var arr = ; // 偶数を除く配列 arr のすべての要素を含む配列 var newarr = ; // 配列を反復処理します arr $.each(arr, function (index, value) ( // 要素が偶数の場合はスキップします if (value % 2 === 0) ( // 現在の反復を中断します)次の項目に進みます return; ) // newarr 配列に値を追加します newarr.push(value); )); console.log("初期配列 (arr): " + arr.join()); console.log("結果の配列 (newarr): " + newarr.join()); /* 結果 (コンソール内): 初期配列 (arr): 3,5,4,9,17,19,30,35,40 結果の配列 (newarr): 3,5,9,17,19,35 */

現在の要素をループする (.each)

各メソッドの構文 (選択した要素にのみ適用されます):

.each(関数); // function - 現在のオブジェクトの各要素に対して実行される関数

次の例を使用して .each メソッドがどのように機能するかを見てみましょう (div 要素を反復処理してみましょう)。

// ページの DOM をロードした後、$(function())( // ページ上の div 要素を反復処理します $("div").each(function (index, element) ( //index (number) - 反復の現在のインデックス (サイクル) // この値は数値です // 0 からカウントを開始し、現在のセット内の要素の数から 1 を引いた値で終了します // 要素 - 現在の要素コンソールへの DOM 参照が含まれます。 log("Div 要素インデックス: " + インデックス + "; 要素 ID = " + $(element).attr("id")); )); )); // 結果: // div 要素のインデックス: 0; 要素 ID = id1 // div 要素インデックス: 1; 要素 ID = id2 // div 要素インデックス: 2; 要素ID = ID3

上記の例では、 each メソッドは現在のセット ($("div") セレクターで選択された要素) を使用します。 each メソッド ハンドラーは常に、現在のセットの各要素 (この場合は各 div 要素) に対して実行される関数です。 この関数には 2 つのオプションのパラメータがあります。 それらの 1 つ (インデックス) は現在の反復のシリアル番号で、2 つ目 (要素) は現在の要素への DOM リンクです。 さらに、 this キーワードは関数内で使用でき、2 番目のパラメーターと同様に、現在の要素への DOM 参照が含まれます。

たとえば、ページ上のすべての a 要素の href 属性の値をコンソールに出力してみましょう。

$("a").each(function() ( console.log($(this).attr("href")); ));

$("a").each(function() ( var link = $(this).attr("href"); if ((link.indexOf("http://") == 0) || (リンク.indexOf("https://") == 0)) ( console.log("href links = " + link); ) )); // 次のリンクがページ上にある場合: // Yandex // JavaScript はどのように動作しますか? // ブートストラップ // 次に、コンソールに次の結果が表示されます。 // https://www.yandex.ru/ // http://getbootstrap.com/

たとえば、クラスという名前を持つ DOM 要素に対して each ループを編成する方法を見てみましょう (同じクラスのすべての要素に対して反復処理を行いましょう)。

Raspberry pi シングルボード計算 Intel Galileo Gen2 $19 Pine A64 Plus // jQuery.each 関数 ($.each) を使用 $.each($(".name"),function(index,data) ( console.log( "Ordinal番号: " + インデックス + " ; 内容: " +$(data).text()); )); // jQuery メソッドを使用する .each $(".name").each(function(index,data) ( console.log("Ordinal: " +index + " ; Content: " +$(data).text( ) ); )); // 次の応答を受け取ります。 // シーケンス番号: 0 ; 内容: Raspberry pi // シーケンス番号: 1 ; 内容: Intel Galileo Gen2 // シーケンス番号: 2 ; 内容：パインA64プラス

たとえば、ページ上のすべての要素を反復処理する方法を見てみましょう。

$("*").each(function() ( console.log(this); ));

たとえば、ページ上のすべての入力要素の値を表示してみましょう。

$("input").each(function() ( console.log($(this).val()); ));

たとえば、id="myList" を持つ ul にあるすべての子要素 ​​(それぞれの子) を反復処理してみましょう。

• HTML
• JavaScript

$("ul#myList").children().each(function())( console.log($(this).text()); )); // 結果: // HTML // CSS // JavaScript

jQueryの各メソッドの最後のインデックス(項目)を求める方法を見てみましょう。

// 要素を選択します var myList = $("ul li"); // 選択範囲内の要素の数を決定します var total = myList.length; // 選択された要素を反復処理します myList.each(function(index) ( if (index === total - 1) ( // これは選択範囲内の最後の要素です ) ));