JavaScript for…in ループ

概要：このチュートリアルでは、JavaScriptのfor...inループを使用して、オブジェクトの列挙可能なプロパティを反復処理する方法を学びます。

JavaScript for…in ループの概要

for...inループは、列挙可能なプロパティを、オブジェクトの文字列でキー付けされたプロパティに対して反復処理します。プロパティは文字列またはシンボルでキー付けできることに注意してください。

プロパティの内部enumerableフラグがtrueに設定されている場合、そのプロパティは列挙可能です。

enumerableフラグは、プロパティが単純な代入またはプロパティ初期化子によって作成された場合、デフォルトでtrueになります。

object.propertyName = value;

または

let obj = {
    propertyName: value,
    ...
};
Code language: JavaScript (javascript)

以下は、for...inループの構文を示しています。

for(const propertyName in object) {
    // ...
}
Code language: JavaScript (javascript)

for...in を使用すると、プロパティの特定の名前を知らなくても、オブジェクトの各プロパティと値にアクセスできます。例:

var person = {
    firstName: 'John',
    lastName: 'Doe',
    ssn: '299-24-2351'
};

for(var prop in person) {
    console.log(prop + ':' + person[prop]);
}
Code language: JavaScript (javascript)

出力

firstName:John
lastName:Doe
ssn:299-24-2351
Code language: CSS (css)

この例では、for...inループを使用して、personオブジェクトのプロパティを反復処理しました。次の構文を使用して、各プロパティの値にアクセスしました。

object[property];
Code language: CSS (css)

for...in ループと継承

別のオブジェクトから継承するオブジェクトのプロパティをループ処理すると、for...inステートメントはプロトタイプチェーンをたどり、継承されたプロパティを列挙します。次の例を考えてみましょう。

var decoration = {
    color: 'red'
};

var circle = Object.create(decoration);
circle.radius = 10;


for(const prop in circle) {
    console.log(prop);
}
Code language: JavaScript (javascript)

出力

radius
color

circleオブジェクトには、decorationオブジェクトを参照する独自のプロトタイプがあります。したがって、for...inループは、circleオブジェクトとそのプロトタイプのプロパティを表示します。

オブジェクトの自身のプロパティのみを列挙する場合は、hasOwnProperty()メソッドを使用します。

for(const prop in circle) {
    if(circle.hasOwnProperty(prop)) {
        console.log(prop);
    }
}
Code language: JavaScript (javascript)

出力

radius

for…in ループと配列

特に配列要素の順序が重要な場合は、配列を反復処理するためにfor...inを使用しないのが良い習慣です。

次の例は完璧に機能します。

const items = [10 , 20, 30];
let total = 0;

for(const item in items) {
    total += items[item];
}
console.log(total); Code language: JavaScript (javascript)

ただし、ライブラリ内の組み込みArray型のプロパティを次のように設定する場合があります。

Array.prototype.foo = 100;Code language: JavaScript (javascript)

したがって、for...inは正しく機能しません。例:

// somewhere else
Array.prototype.foo = 100;

const items = [10, 20, 30];
let total = 0;

for (var prop in items) {
  console.log({ prop, value: items[prop] });
  total += items[prop];
}
console.log(total);Code language: JavaScript (javascript)

出力

{ prop: '0', value: 10 }
{ prop: '1', value: 20 }
{ prop: '2', value: 30 }
{ prop: 'foo', value: 100 }
160Code language: CSS (css)

別の例

var arr = [];
// set the third element to 3, other elements are `undefined`
arr[2] = 3; 

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);    
}Code language: JavaScript (javascript)

出力には配列の3つの要素が表示されます。これは正しいです。

undefined
undefined
3Code language: JavaScript (javascript)

ただし、 for...in ループは最初の2つの要素を無視します。

for (const key in arr) {
    console.log(arr[key]);
}
Code language: JavaScript (javascript)

出力

3

出力には、最初の2つの要素ではなく、3番目の要素のみが表示されます。

概要

• for...inループは、オブジェクトの列挙可能なプロパティを反復処理します。また、プロトタイプチェーンまで上がり、継承されたプロパティを列挙します。
• 特にインデックスの順序が重要な場合は、配列の要素を反復処理するためにfor...inループを使用することは避けてください。