web-dev-qa-db-ja.com

JQueryで配列をループする方法

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

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

配列からすべてのデータを取り出そうとしています。誰かが私を正しい道に導いてくれませんか。

javascriptjqueryarraysloopsiteration
203
Rickstar

（更新：My 他の回答はこちら 非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]`
}

Advantages：簡単で、jQueryに依存せず、理解しやすく、ループの本文内でthisname__の意味を保持する問題がなく、関数呼び出しの不要なオーバーヘッドがありません（例：theoryより高速ですが、実際には他の問題が発生する可能性があるほど多くの要素が必要になります; details ）。

ES5のforEachname__：

ECMAScript5の時点で、配列にはforEachname__関数があり、配列を簡単にループ処理できます。

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

ドキュメントへのリンク

（注：forEachname__だけでなく、他にも多くの関数があります。詳細については 上記の回答 を参照してください。）

Advantages：宣言的で、ループ本体が複雑な場合は、イテレータに事前に作成された関数を使用できます。ループ内の関数呼び出しのスコープは便利な場合があり、包含にiname__変数は不要です範囲。

短所：含まれるコードでthisname__を使用しており、thisname__コールバック内でforEachname__を使用する場合は、A）関数内で使用できるように変数に固定する必要があります。 B）forEachname__の2番目の引数として渡すので、forEachname__はコールバック中にthisname__として設定します。またはC）ES2015 +arrow関数を使用し、thisname__を閉じます。これらのいずれかを行わない場合、コールバックでthisname__はundefinedname__（strictモード）またはグローバルオブジェクト（windowname__）がルーズモードになります。以前はforEachname__が普遍的にサポートされていなかったという2番目の欠点がありましたが、2018年に実行するブラウザはforEachname__を持たない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`
}

仕組みの詳細については、この回答の上部にリンクされている回答をご覧ください。

Advantages：シンプルで簡単です。配列からのエントリに包含スコープ変数（または上記の定数）を提供します。

短所：IEのどのバージョンでもサポートされていません。

jQuery.each：

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

（ ドキュメントへのリンク ）

Advantages：forEachname__と同じ利点に加えて、jQueryを使用しているのでそこにあることがわかります。

欠点：含まれるコードでthisname__を使用している場合、thisname__は関数内の他の何かを意味するため、関数内で使用できるように変数に固定する必要があります。

ただし、 $.proxy を使用することで、thisname__を回避できます。

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)
});

NOTすべきこと：

しないこれにはfor..inを使用します（または、使用する場合は、適切な安全対策を講じてください）。人々が言っ​​ているのを見るでしょう（実際、ここに簡単に答えがあります）が、for..inは多くの人々が思っていることをしません（もっと便利なことをします！）。具体的には、for..inは、オブジェクトの列挙可能なプロパティ名（配列のインデックスではない）をループします。配列はオブジェクトであり、デフォルトでは列挙可能なプロパティのみがインデックスであるため、ほとんどの場合、当たり障りのない展開での作業のように思えます。しかし、それだけで使用できるというのは安全な仮定ではありません。探索方法は次のとおりです。 http://jsbin.com/exohi/

上記の「しない」を和らげる必要があります。スパース配列を扱う場合（たとえば、配列には合計15個の要素がありますが、何らかの理由でインデックスが0から150,000の範囲に散らばっているので、lengthname__は150,001です）、and if hasOwnPropertyname__のような適切なセーフガードを使用し、プロパティ名が実際に数値であることを確認します（上記のリンクを参照）。for..inは、多数の不要なループを回避するための完全に合理的な方法です。

471
T.J. Crowder

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])
}

for

//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ループとイテレータ

69
skyfoot

ここではjqueryの必要はありませんforループだけが動作します。

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

JQueryの each() 関数を使用してください。

これが一例です。

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

それぞれJqueryを使用してください。他にも方法がありますが、それぞれ目的に合わせて設計されています。

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

最後の番号の後にコンマを付けないでください。

5
MItrajyoti Kusari

forループを使うことができます。

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

これを試して：

$.grep(array, function(element) {

})
2
olendon

矢印機能と内挿を含むes6構文：

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

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

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
0
Kamil Kiełczewski