jQueryで配列をループする方法は?


234

配列をループしようとしています。私は次のコードを持っています:

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

配列からすべてのデータを取得しようとしています。誰かが私を正しい道に導くことができますか?

回答:


516

(更新:ここでの私のもう1つの答えは、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)の二番目の引数として渡すforEachので、コールバック時のforEachようthisに設定するか、C)ES2015 + 矢印関数を使用して終了しthisます。これらのいずれかを行わない場合、コールバックthisundefined(ストリクトモードの場合)またはwindowルーズモードのグローバルオブジェクト()になります。以前forEachは普遍的にサポートされていなかった2番目の欠点がありましたが、ここ2018年に実行するのforEachはIE8 だけであるブラウザーです(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")では、矢印関数:

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

してはいけないこと:

for..inこれに使用しないでください(使用する場合は、適切な保護手段を使用してください)。あなたは人々が言っ​​ているのを見るでしょう(実際、簡単にそれがここにあるという答えがここにありました)が、for..in多くの人々がそれをすることを考えていることをしません(それはさらにもっと便利なことをします!)。具体的には、for..in(配列のインデックスではなく)オブジェクトの列挙可能なプロパティ名をループします。配列はオブジェクトであり、デフォルトではそれらの列挙可能なプロパティのみがインデックスであるため、ほとんどの場合、穏やかな展開での作業のように見えます。しかし、それをそのまま使用できるというのは安全な前提ではありません。これが探索です:http : //jsbin.com/exohi/3

上記の「いけない」を和らげる必要があります。スパース配列を処理している場合(たとえば、配列には合計15の要素がありますが、それらのインデックスは、何らかの理由で0から150,000の範囲に散らばっているため、length150,001です)、および適切なセーフガードを使用hasOwnPropertyして、プロパティ名は実際には数値(上記のリンクを参照)であり、for..in設定されたインデックスのみが列挙されるため、多くの不要なループを回避するための完全に妥当な方法です。


.each()or for...inを使用して配列をループすることは、一般に悪い考えです。それは、forやを使用するよりも年齢が遅いようなものwhileです。ループする前にプロパティfor loopをキャッシュしておくのも良い考えlengthです。for (var i = 0, len = substr.length; i < len; ...
jAndy

@jAndy:最初のスピードの利点はスピードだと言ったと思います。長さをキャッシュする再、それがなければならないであろう本当に大きな価値がオーバーヘッドすべき配列が、フェア「途切れます。
TJクロウダー

1
@MikePurcell:またはアロー関数。またはFunction#bind。:-)良い点が追加されました。
TJクラウダー2016年

1
hmmmm ++ iまたはi ++
user889030

1
@DougS:いいえ、唯一の違いi++とは、++i上記の例で使用されないという式の結果です。for更新式の結果は何のために使用されていないステップ2に1の初期化、2。試験(falseの場合は終了)、3体、4。更新、5.戻る:ループはこのように動作します。
TJクラウダー2017年

75

jQuery.each()

jQuery.each()

jQuery.each(array, callback)

配列反復

jQuery.each(array, function(Integer index, Object value){});

オブジェクトの反復

jQuery.each(object, function(string propertyName, object propertyValue){});

var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) { 
  console.log(index, val)
});

var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
  console.log(propName, propVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

配列のJavaScriptループ

forループ

for (initialExpression; condition; incrementExpression)
  statement

var substr = [1, 2, 3, 4];

//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
  console.log("loop", substr[i])
}

//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
  console.log("reverse", substr[i])
}

//step loop
for(var i = 0; i < substr.length; i+=2) {
  console.log("step", substr[i])
}

のために

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
    console.log(substr[i]) //note i returns index
}

for(var i of subs) {
    //can use break;
    console.log(i); //note i returns value
}

forEach

substr.forEach(function(v, i, a){
    //cannot use break;
    console.log(v, i, a);
})

資源

MDNループとイテレーター


21

ここではjqueryは必要ありません。forループが機能するだけです。

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}

18

オプション1:従来のforループ

基礎

従来のforループには3つのコンポーネントがあります。

  1. 初期化: Lookブロックが最初に実行される前に実行されます
  2. 条件:ループブロックが実行される前に毎回条件をチェックし、falseの場合はループを終了します
  3. 後回し:ループブロックが実行された後に毎回実行されます

これらの3つのコンポーネントは、;シンボルによって互いに分離されています。これら3つのコンポーネントそれぞれのコンテンツはオプションです。つまり、以下がfor可能な限り最小のループです。

for (;;) {
    // Do stuff
}

もちろん、ループを実行を停止するには、そのループ内にif(condition === true) { break; } またはを含める必要があります。if(condition === true) { return; }for

ただし、通常、初期化はインデックスを宣言するために使用され、条件はそのインデックスを最小値または最大値と比較するために使用され、後置はインデックスをインクリメントするために使用されます。

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

伝統的なforループを使用して配列をループする

配列をループする伝統的な方法はこれです:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

または、逆方向にループしたい場合は、次のようにします。

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

ただし、たとえば、次のような多くのバリエーションが可能です。これです :

for (var key = 0, value = myArray[key], var length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

...またはこれ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

...またはこれ:

var key = 0, value;
for (; value = myArray[key++];){ 
    console.log(value);
}

どちらが最適に機能するかは、主に個人的な好みと実装する特定のユースケースの両方の問題です。

注意 :

これらのバリエーションはすべて、古いバージョンを含むすべてのブラウザーでサポートされています。


オプション2:while-ループ

for-loopの代わりの1つはwhile-loopです。配列をループするには、次のようにします。

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}
注意 :

従来のfor-loops と同様に、while-loopsは最も古いブラウザーでもサポートされています。

また、すべてのwhileループはfor-loop として書き直すことができます。たとえば、while上記の-loopは、このfor-loop とまったく同じように動作します。

for(var key = 0;value = myArray[key++];){
    console.log(value);
}

オプション3:for...inおよびfor...of

JavaScriptでは、これを行うこともできます。

for (i in myArray) {
    console.log(myArray[i]);
}

ただし、これはforすべての場合において従来のループと同じように動作するわけではなく、考慮する必要のある潜在的な副作用があるため、注意して使用する必要があります。参照してください「のために...」なぜ使用している配列の繰り返しは悪い考えで?詳細については。

の代わりとして、for...inも使用できるようになりましたfor...of。次の例は、for...ofループとループの違いを示していfor...inます。

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}
注意 :

また、Internet Explorer のどのバージョンもサポートしておらずfor...ofEdge 12+はサポートしています)、for...in少なくともIE10 が必要であることを考慮する必要があります。


オプション4: Array.prototype.forEach()

For-loops の代替Array.prototype.forEach()はで、次の構文を使用します。

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});
注意 :

Array.prototype.forEach() すべての最新のブラウザとIE9 +でサポートされています。


オプション5: jQuery.each()

上記の他の4つのオプションに加えて、jQueryにも独自のforeachバリエーションがありました。

次の構文を使用します。

$.each(myArray, function(key, value) {
    console.log(value);
});

17

each()jQuery の機能を利用してください。

次に例を示します。

$.each(currnt_image_list.split(','), function(index, value) { 
  alert(index + ': ' + value); 
});

7

jQueryを使用しeach()ます。他の方法もありますが、それぞれがこの目的のために設計されています。

$.each(substr, function(index, value) { 
  alert(value); 
});

最後の数字の後にコンマを置かないでください。


とても良い解決策です!
ナイドン卿

3

for()ループを使用できます。

var things = currnt_image_list.split(','); 
for(var i = 0; i < things.length; i++) {
    //Do things with things[i]
}

3

アロー関数と補間を使用したES6構文:

var data=["a","b","c"];
$(data).each((index, element) => {
        console.log(`current index : ${index} element : ${element}`)
    });

2

これを試して:

$.grep(array, function(element) {

})

1
こんにちは!これによりOPの問題がどのように解決されるかについて説明を追加してください。コードや回答のみを投稿することは、OPや将来のビジターが回答を理解するのに役立たないため、通常はSOでは推奨されません。ありがとう!-レビューより。
d_kennetz

0

副作用のある配列/文字列を反復する別の方法

var str = '21,32,234,223';
var substr = str.split(',');

substr.reduce((a,x)=> console.log('reduce',x), 0)        // return undefined

substr.every(x=> { console.log('every',x); return true}) // return true

substr.some(x=> { console.log('some',x); return false})  // return false

substr.map(x=> console.log('map',x));                    // return array
 
str.replace(/(\d+)/g, x=> console.log('replace',x))      // return string

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.