回答:
(更新:ここでの私のもう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
、ループの本体内の意味を保持する問題がない、関数呼び出しの不要なオーバーヘッドがない(たとえば、理論的には高速ですが、実際には要素が多すぎるため、他の問題が発生する可能性があります。詳細)。
forEach
:ECMAScript5以降、配列にはforEach
関数があり、配列を簡単にループできます。
substr.forEach(function(item) {
// do something with `item`
});
(注:だけでなく、他にも多くの関数がありますforEach
。詳細については、上記の回答を参照してください。)
利点:宣言型。便利な場合は、イテレータに事前に作成された関数を使用できます。ループ本体が複雑な場合は、関数呼び出しのスコープが役立つ場合がありi
、包含スコープに変数が必要ありません。
短所は:あなたが使用している場合this
含むコードで使用したいthis
あなたの中にforEach
あなたが関数内で使用できるようにコールバック、あなたは変数でA)スティック、それのいずれかに持っている、B)の二番目の引数として渡すforEach
ので、コールバック時のforEach
ようthis
に設定するか、C)ES2015 + 矢印関数を使用して終了しthis
ます。これらのいずれかを行わない場合、コールバックthis
はundefined
(ストリクトモードの場合)またはwindow
ルーズモードのグローバルオブジェクト()になります。以前forEach
は普遍的にサポートされていなかった2番目の欠点がありましたが、ここ2018年に実行するのforEach
はIE8 だけであるブラウザーです(IE8は適切に動作しません) どちらかでポリフィルされます)。
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(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の範囲に散らばっているため、length
150,001です)、および適切なセーフガードを使用hasOwnProperty
して、プロパティ名は実際には数値(上記のリンクを参照)であり、for..in
設定されたインデックスのみが列挙されるため、多くの不要なループを回避するための完全に妥当な方法です。
Function#bind
。:-)良い点が追加されました。
i++
とは、++i
上記の例で使用されないという式の結果です。for
更新式の結果は何のために使用されていないステップ2に1の初期化、2。試験(falseの場合は終了)、3体、4。更新、5.戻る:ループはこのように動作します。
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>
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);
})
for
ループ従来のfor
ループには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);
}
どちらが最適に機能するかは、主に個人的な好みと実装する特定のユースケースの両方の問題です。
注意 :これらのバリエーションはすべて、古いバージョンを含むすべてのブラウザーでサポートされています。
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);
}
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...of
(Edge 12+はサポートしています)、for...in
少なくともIE10 が必要であることを考慮する必要があります。
Array.prototype.forEach()
For
-loops の代替Array.prototype.forEach()
はで、次の構文を使用します。
myArray.forEach(function(value, key, myArray) {
console.log(value);
});
注意 :
Array.prototype.forEach()
すべての最新のブラウザとIE9 +でサポートされています。
jQuery.each()
上記の他の4つのオプションに加えて、jQueryにも独自のforeach
バリエーションがありました。
次の構文を使用します。
$.each(myArray, function(key, value) {
console.log(value);
});
jQueryを使用しeach()
ます。他の方法もありますが、それぞれがこの目的のために設計されています。
$.each(substr, function(index, value) {
alert(value);
});
最後の数字の後にコンマを置かないでください。
これを試して:
$.grep(array, function(element) {
})
副作用のある配列/文字列を反復する別の方法
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
.each()
orfor...in
を使用して配列をループすることは、一般に悪い考えです。それは、for
やを使用するよりも年齢が遅いようなものwhile
です。ループする前にプロパティfor loop
をキャッシュしておくのも良い考えlength
です。for (var i = 0, len = substr.length; i < len; ...