私はJavaScriptを初めて使用し、現在、いわゆるfor... in
ループについて学習しています。
JavaScriptでコーディングするときに実際にこれらのループを使用しますか?
他のすべてのタイプのループがどのように役立つかはわかりますが、これはわかりません。
誰かがこれに光を当てて、可能であれば実際の例を含めてください。
私はJavaScriptを初めて使用し、現在、いわゆるfor... in
ループについて学習しています。
JavaScriptでコーディングするときに実際にこれらのループを使用しますか?
他のすべてのタイプのループがどのように役立つかはわかりますが、これはわかりません。
誰かがこれに光を当てて、可能であれば実際の例を含めてください。
for(;;)
Javascriptでは、通常のループで反復できるのは配列オブジェクトのみです。はfor..in
、非配列オブジェクトの列挙に使用されます。
for (var i in obj) {
if (obj.hasOwnProperty(i)) { // if you don't want to access prototype properties
alert(i);
alert(obj[i]);
}
}
両方とも特定の目的を果たしますfor in
。for
いくつか見てみましょう。
オブジェクトがある場合
var obj = { one: 1, two: 2 };
for in
次に、ループを使用してそのプロパティを反復処理できます。
for( var i in obj ) console.log( obj[i] ); //use obj.hasOwnProperty(i) to exclude prototype properties
forループを介して反復しようとすると、obj
数値インデックスを使用してキーにアクセスし、未定義、つまり未定義になるため、機能しないことに注意してくださいobj[0]
。これは、オブジェクトの長さを取得することは、単に書くよりも複雑になるという事実は別としてobj.length
です。もちろん、数値プロパティがある場合は、for
ループを使用できますがfor in
、オブジェクトの反復により自然に適合します。
アレイがある場合
var array = [1,2]
技術的には両方を使用できますが、これにはforループを使用することをお勧めします。これが理由です
ポイント2を説明するために、Arrayを拡張してみましょう。
Array.prototype.print_array = function(){ console.log(this) };
Arrayに追加したばかりのこの関数は、すべてのArrayオブジェクトに継承されるため、for in
for( var i in array ) console.log( array[i] );
降伏します
1
2
function (){ console.log(this) } // the prototype property was iterated over also
そして、配列を反復処理しますfor
for( var i =0; i < array.length; i++) console.log( array[i] );
期待される結果が得られます。
1
2
したがって、オブジェクトの反復にはを使用しfor in
、配列の反復にはを使用します。for
これは通常、何かのコレクションをループするために使用されます。たとえば、すべてのJavaScriptオブジェクトはプロパティのコレクションとして扱うことができるため、この方法でプロパティを列挙できます。
//let's loop throug all properties of a "document"
//we don't know what these will be
var txtProps = "";
for (var prop in window.document) {
txtProps += prop + "\n";
}
alert(txtProps);//pops out a message showing a looong list of all properties
オブジェクトが単純な変数以上のものを保持できることを理解していれば、問題ないと思います。ポイントを説明するためにw3schools.comから変更されたこの例を考えてみましょう。
<script type="text/javascript">
//This is probably as you expect:
var person={fname:"John",lname:"Doe",age:25};
//This is probably unexpected and unwanted, but is valid and will be an output of the for...in loop:
person.f = function(){
alert("Hi");
};
//Use typeof() function to check that the data type is what you expect:
for (x in person){
document.write(typeof(person[x]) + " ");
}
</script>
これは印刷します:
文字列文字列番号関数
ループタイプ間の違いに関する特定の質問に答えるために、for()ループは、lengthプロパティを持つ配列タイプに対して適切に機能します。foreach()ループは、オブジェクトのコレクションを反復処理する場合に適切に機能しますが、foreach ... inループは、オブジェクトのキーに対して適切に機能します(これらがいずれかのループタイプの排他的使用であるとは主張していません)。
これを理解するには、まずJavaScriptのオブジェクトモデルを理解する必要があります。
お気づきのように、配列を操作する場合、ループはより簡単に機能するfor...in
ため、ループはそれほど有用ではありません。for (;;)
ただし、配列は数値プロパティを持つJavaScriptオブジェクトの一種であり、for (;;)
ループは数値プロパティのみを処理します。この表記の理由は、myArray[0]
この角括弧表記を任意のプロパティ名に使用できるためです。だからmyObject['myProperty']
と同じmyObject.myProperty
です。これがfor...in
便利になるところです:
for (var i in myObject) {
alert(myObject[i]);
}
したがって、設定する唯一のプロパティがmyProperty
、である場合、i
は等しく"myProperty"
なります(これは文字列であるため、単なる変数名よりも動的になります)。
しかし、ここには巨大なものがあります。オブジェクトにはプロトタイプと呼ばれるものがあり、これらのプロトタイプには独自のプロパティとメソッドがあります。私が次のことをした場合:
for (var i in myArray) {
alert(i + ': ' + myArray[i]);
}
...数値(1、2、3など)でアラートを受け取るだけでなく、などの配列のプロパティやlength
、などのメソッドでもアラートを受け取りますjoin
。これらのプロパティは実際にはArrayオブジェクトのプロトタイプに属しており、プロトタイプのプロパティは次のようにして除外できます。
for (var i in myArray) {
if (myArray.hasOwnProperty(i)) {
alert(i + ': ' + myArray[i]);
}
}
これで、再び数値でアラートが表示されます。これは、これが(ほぼ)まったく同じであることを意味しますfor (var i = 0;; i < myArray.length; i++)
。その表記を使用できるのに、なぜ私はあなたにこれを言うのですか?配列だけでなく、すべてのオブジェクトにプロトタイプがあるためです。そして、すべてのオブジェクトはオブジェクトの子孫Object
であるため、誰かが定義した場合、それはページの残りの部分で使用するループObject.prototype.myProperty = "some string value"
に常に表示されます。for...in
ありがたいことに、hasOwnProperty
メソッド自体はに属しているため、ループObject.prototype
で常に使用できます(使用する必要があります) 。for...in
本格的なfor...in
例を次に示します。
// This is just one way of defining an object. We could also use a constructor function, or `new Object()`
var myObject = {
aProperty : "my first property value",
anotherProperty : "second property value"
4 : "numeric property names work too, you know"
}
for (var i in myObject) {
if (myObject.hasOwnProperty(i)) {
document.write(i + ': ' + myObject[i] + '<br />\n');
}
}
出力:
aProperty: my first property value
anotherProperty: secondPropertyValue
4: numeric property names work too, you know
うまくいけば、これがすべてを説明します。