JavaScript for…in vs for

for ... inとforループに大きな違いがあると思いますか？どのような種類の「for」を使用するのが好きですか、またその理由は何ですか。

連想配列の配列があるとしましょう：

var myArray = [{'key': 'value'}, {'key': 'value1'}];

だから私たちは反復することができます：

for (var i = 0; i < myArray.length; i++)

そして：

for (var i in myArray)

大きな違いはありません。パフォーマンスの問題はありますか？

選択は、どのイディオムが最もよく理解されているかに基づく必要があります。

配列は以下を使用して反復されます：

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

連想配列として使用されているオブジェクトは、以下を使用して反復されます。

for (var key in o)
  //do stuff with o[key]

地球を粉砕する理由がない限り、確立された使用パターンに固執してください。

Douglas Crockfordは、このステートメントの使用を避けるために、JavaScript：良い部分（24ページ）で推奨していますfor in。

を使用for inしてオブジェクトのプロパティ名をループする場合、結果は順序付けされません。さらに悪いことに、予期しない結果が生じる可能性があります。これには、プロトタイプチェーンから継承されたメンバーとメソッドの名前が含まれます。

プロパティ以外はすべて、を使用して除外できます.hasOwnProperty。このコードサンプルは、おそらく最初に必要なことを実行します。

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI-jQueryユーザー

jQueryのeach(callback)メソッドはfor( ; ; )デフォルトでループを使用し、長さがの場合にfor( in ) のみ使用しますundefined。

したがって、この関数を使用する場合、正しい順序を想定しても安全だと思います。

例：

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

これを使用することの欠点は、UI以外のロジックを実行している場合、関数が他のフレームワークに移植できなくなることです。このeach()関数は、おそらくjQueryセレクターで使用するために予約してfor( ; ; )おくとよいでしょう。

使用するループの種類やブラウザによってパフォーマンスに違いがあります。

例えば：

for (var i = myArray.length-1; i >= 0; i--)

一部のブラウザでは、次の2倍の速度です。

for (var i = 0; i < myArray.length; i++)

ただし、配列が巨大であったり、ループしたりしない限り、すべてが十分に高速です。配列のループがあなたのプロジェクト（または他のすべてのプロジェクト）のボトルネックであることを私は真剣に疑っています

ネイティブのArray.forEachメソッドが広くサポートされるようになったことに注意してください。

すべての主要ブラウザの2012年現在のバージョンの回答を更新 -Chrome、Firefox、IE9、Safari、OperaはES5のネイティブarray.forEachをサポートしています。

IE8をネイティブでサポートする何らかの理由がない限り（適切なJS環境を提供するES5-shimまたはChromeフレームをこれらのユーザーに提供できることに注意してください）、言語の適切な構文を使用するほうが簡単です。

myArray.forEach(function(item, index) {
    console.log(item, index);
});

array.forEach（）の完全なドキュメントはMDNにあります。

配列がスパースの場合、2つは同じではありません。

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

forEachを使用してプロトタイプチェーンをスキップする

上記の @nailer の回答の簡単な補足として、Object.keysでforEachを使用すると、hasOwnPropertyを使用せずにプロトタイプチェーンの反復を回避できます。

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

必要に応じて反復法を選択するべきだと私は思います。実際には、構造を持つネイティブをループしないでください。これは非常に遅く、 Chase Seibertが前に指摘したように、Prototypeフレームワークと互換性がありません。Arrayfor in

JavaScriptを使用する場合は絶対に確認する必要がある、さまざまなループスタイルに関する優れたベンチマークがあります。初期の最適化は行わないでください。ただし、頭の後ろのどこかにそれを保持する必要があります。

for inオブジェクトのすべてのプロパティを取得するために使用します。これは、スクリプトをデバッグするときに特に役立ちます。たとえば、なじみのないオブジェクトを探索するときは、この行を手元に置いておきます。

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

オブジェクト全体（メソッド本体と一緒に）の内容をFirebugログにダンプします。とても便利です。

これが私がしたことです。

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

これはあなたがそれをどのように使用するかであり、
これは配列とオブジェクト（HTML要素のリストなど）で動作します

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

私はこれを作ったので、提案を受け入れます:)

アイテムの参照方法に基づいて、さまざまな方法を使用します。

現在のアイテムだけが必要な場合は、foreachを使用します。

相対比較を行うためにインデクサーが必要な場合に使用します。（つまり、これは前/次のアイテムとどのように比較されますか？）

パフォーマンスの違いに気づいたことはありません。パフォーマンスの問題が発生するまで、心配する必要はありません。

と （MyArrayというにおけるVAR i）に対する、あなたがオブジェクトをループあまりにも、することができます私は、キーの名前が含まれます、あなたは経由してプロパティにアクセスすることができます[i]はMyArrayという。さらに、オブジェクトに追加するすべてのメソッドもループに含まれます。つまり、jQueryやプロトタイプなどの外部フレームワークを使用する場合、またはオブジェクトのプロトタイプに直接メソッドを追加する場合、ある時点で私はポイントしますそれらのメソッド。

気を付けて！

たとえば、複数のスクリプトタグがあり、タグ属性の情報を検索している場合、.lengthプロパティはforループで使用する必要があります。これは、単純な配列ではなくHTMLCollectionオブジェクトだからです。

https://developer.mozilla.org/en/DOM/HTMLCollection

foreachステートメントfor（var i in yourList）を使用すると、ほとんどのブラウザーでHTMLCollectionのプロパティとメソッドが返されます。

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

getElementsByTagNameがNodeListを返す必要がある場合でも、ほとんどのブラウザはHTMLCollectionを返します：https ://developer.mozilla.org/en/DOM/document.getElementsByTagName

配列のforループはプロトタイプと互換性がありません。将来そのライブラリを使用する必要があると思われる場合は、forループを使用することは理にかなっています。

http://www.prototypejs.org/api/array

オブジェクトとプロトタイプと配列を使用した「for each」の問題を見てきました

私の理解は、それぞれがオブジェクトのプロパティのためであり、配列ではないということです

コードを高速化したい場合はどうでしょうか？

for( var i=0,j=null; j=array[i++]; foo(j) );

これは、forステートメント内にwhileロジックがあるようなもので、冗長性は低くなります。また、firefoxにはArray.forEachとArray.filterがあります。

jsperfによるより短くて最良のコードは

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Array（）。forEachループを使用して並列処理を利用する

for（;;）は配列用です：[20,55,33]

for..inはオブジェクト用です：{x：20、y：55：z：33}

注意してください！！！Mac OSでChrome 22.0を使用していますが、for each構文に問題があります。

これがブラウザの問題なのか、JavaScriptの問題なのか、コードのエラーなのかはわかりませんが、非常に奇妙です。オブジェクトの外では完全に機能します。

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

両者の間には重要な違いがあります。for-inはオブジェクトのプロパティを反復処理するので、ケースが配列の場合は、その要素だけでなく、その「削除」関数も反復処理されます。

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

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

と一緒にfor-inを使用できますif(myArray.hasOwnProperty(i))。それでも、配列を反復するときは常にこれを避けてfor（;;）ステートメントを使用することを常に好みます。

どちらも非常に似ていますが、わずかな違いがあります。

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

この場合の出力は次のとおりです。

ループの標準：

ARRAY [0] = A

ARRAY [1] = B

ARRAY [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

この場合の出力は次のとおりです。

FOR-IN LOOP：

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

for inステートメントを使用すると、オブジェクトのすべてのプロパティの名前をループできます。残念ながら、プロトタイプチェーンを通じて継承されたすべてのメンバーもループします。これは、データメンバーに関心がある場合にメソッド関数を提供するという悪い副作用があります。