[解決済み] jQueryで配列を介してループする方法は？

質問

配列でループを回そうとしています。次のようなコードがあります。

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

配列からすべてのデータを取り出そうとしています。どなたか正しい道を教えていただけませんか？

解決方法は？

(更新：私の その他の回答はこちら は、jQuery以外のオプションについて、より詳細に説明しています。以下、3つ目のオプションです。 jQuery.each は入っていませんが（笑)。

4つの選択肢

汎用的なループ。

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

またはES2015+の場合。

for (let i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

メリット : 単純明快、jQueryに依存しない、理解しやすい、意味を保持する問題がない this ループの本体内で、関数呼び出しによる不要なオーバーヘッドがない（たとえば 理論 の方が速いのですが、実際には要素が多すぎて他の問題が発生する確率が高くなります。 詳細 ).

ES5の forEach :

ECMAScript5では、配列に forEach 関数を使用すると、配列の中を簡単にループすることができます。

substr.forEach(function(item) {
    // do something with `item`
});

ドキュメントへのリンク

(注意)この他にもたくさんの機能があります。 forEach 参照 上記で参照した回答 をご覧ください)。

メリット : 宣言的であること、イテレータにあらかじめ関数があればそれを使うことができること、ループのボディが複雑な場合は関数呼び出しのスコープが便利なことがあります。 i を含むスコープで使用します。

デメリット : もし、あなたが this を含むコードで this の中で forEach コールバックの場合、A) 関数内で使用できるように変数に格納する、B) 第2引数として forEach そこで forEach として設定します。 this をコールバック時に使用するか、C) ES2015+ の 矢印関数 の上に閉じる this . これらのいずれかを行わない場合、コールバックで this は次のようになります。 undefined (ストリクトモードの場合)またはグローバルオブジェクト( window )ルーズモードで使用することができます。以前は、2つ目の欠点として forEach が普遍的にサポートされているわけではありませんでしたが、ここ2018年では、唯一遭遇することになるブラウザが forEach はIE8（であるはずがない。 ちゃんと もポリフィルされます)。

ES2015+の for-of :

for (const s of substr) { // Or `let` if you want to modify it in the loop body
    // do something with `s`
}

その仕組みの詳細は、この回答の一番上にあるリンク先の回答をご覧ください。

メリット : シンプルでわかりやすく、配列のエントリに含まれるスコープ変数（上記では定数）を提供します。

デメリット : IEのすべてのバージョンでサポートされていません。

jQuery.each:

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

( ドキュメントへのリンク )

メリット : と同じ利点があります。 forEach さらに、jQueryを使用しているので、そこにあることを知ることができます。

デメリット : もし、あなたが this を含むコードでは、関数内で使用できるように変数に格納する必要があります。 this は、関数内で他のものを意味します。

を回避することができます。 this を使用することです。 $.proxy :

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

...または Function#bind :

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

...または、ES2015 ("ES6") では、arrow 関数。

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

何 NOT を行うことです。

Don't 使用 for..in に使用することができます（使用する場合は、適切な保護措置をとってください）。と言っている人を見かけますが（実際、一時期、ここでそう言っている回答がありました）、しかし for..in は、多くの人が思っているようなことはしません（もっと便利なことをします！）。具体的には for..in は、オブジェクトの列挙可能なプロパティ名（配列のインデックスではない）をループします。配列はオブジェクトであり、その唯一の列挙可能なプロパティは デフォルトで がインデックスであれば、大抵は当たり障りのないデプロイメントでなんとなく動くような気がします。ただ、それだけで使って大丈夫かというと、そうでもないようです。以下、探検です。 http://jsbin.com/exohi/3

上記の "don't" を和らげるべきですね。疎な配列（例えば、配列の要素は全部で15個だが、そのインデックスが何らかの理由で0から150,000の範囲に散らばっていて、そのため length は150,001となります）。 と のような適切なセーフガードを使用した場合 hasOwnProperty と、プロパティ名が本当に数値であることを確認します（上記リンク参照）。 for..in は、入力されたインデックスのみが列挙されるため、不要なループの多くを回避するための完全に合理的な方法となりえます。