JavaScript の反復可能プロパティと列挙可能プロパティの違いを理解する

JavaScript を使用する場合、多くの場合、データのコレクションをループする必要があります。これを行うための 2 つの一般的な方法は、for-in ループと for-of ループです。ただし、これらのループはさまざまなコンテキストやさまざまな種類のコレクションで使用されます。これらのループを効果的に使用するには、反復可能プロパティと列挙可能プロパティの違いを理解することが重要です。

1. for-in ループ: すべての列挙可能なプロパティをループします

for-in ループは、オブジェクトの列挙可能なプロパティを反復処理するように設計されています。列挙可能なプロパティは、オブジェクトをループするとき、または Object.keys() などのメソッドを呼び出すときに表示されるプロパティです。

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

for (const key in obj) {
    console.log(key); // Outputs: name, age, isMarried
}

この例では、for-in ループは、動的に追加された isMarried プロパティを含む、obj オブジェクトの列挙可能なすべてのプロパティを反復処理します。

2. for-of ループ: すべての反復可能オブジェクトをループします。

一方、for-of ループは、反復可能なオブジェクトを反復するために使用されます。 iterable は、Symbol.iterator メソッドを持つオブジェクトです。反復可能なオブジェクトの一般的な例には、配列、文​​字列、マップ、セットなどがあります。

const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

ここで、for-of ループは配列 arr を反復し、anotherFruit プロパティは反復可能なシーケンスの一部ではないため無視します。

3. 配列は反復可能ですが、オブジェクトは反復可能ではありません

デフォルトでは、JavaScript の配列は Symbol.iterator メソッドが組み込まれているため反復可能です。ただし、プレーン オブジェクトにはこのメソッドがないため、反復可能ではありません。

const arr = ['apple', 'pear'];

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

const obj = {
    name: 'john',
    age: '24'
};

for (const key of obj) {
    console.log(key); // Throws TypeError: obj is not iterable
}

上記のコードでは、オブジェクトで for-of ループを使用しようとすると TypeError が発生します。これは、オブジェクトが Symbol.iterator メソッドを実装していないためです。

4. エラー説明: TypeError: obj は反復可能ではありません

反復不可能なオブジェクトに対して for-of ループを使用しようとすると、JavaScript は TypeError をスローします。このエラーは、for-of ループに必要な Symbol.iterator メソッドがオブジェクトにないために発生します。

const obj = {
    name: 'john',
    age: '24'
};

try {
    for (const key of obj) {
        console.log(key);
    }
} catch (e) {
    console.error(e); // Outputs: TypeError: obj is not iterable
}

コード例

以下は、for-in ループと for-of ループの違いを示す完全な例です。

const log = console.log;
const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

log('Using for-of loop:');
for (const fruit of arr) {
    log(fruit); // Outputs: apple, pear
}

log('Using for-in loop:');
for (const fruit in arr) {
    log(fruit); // Outputs: 0, 1, anotherFruit
}

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

log('Using for-in loop:');
for (const key in obj) {
    log(key); // Outputs: name, age, isMarried
}

log('Using for-of loop:');
try {
    for (const key of obj) {
        log(key);
    }
} catch (e) {
    log(e); // Outputs: TypeError: obj is not iterable
}

結論

JavaScript の for-in ループと for-of ループを効果的に使用するには、反復可能プロパティと列挙可能プロパティの違いを理解することが不可欠です。 for-in ループはオブジェクトの列挙可能なプロパティを反復するために使用され、for-of ループは配列などの反復可能なオブジェクトを反復するために設計されています。これらのループを誤って使用すると、反復不可能なオブジェクトに対して for-of ループを使用しようとしたときに発生する TypeError などのエラーが発生する可能性があります。これらの違いを理解することで、より堅牢でエラーのない JavaScript コードを作成できます。

以上がJavaScript の反復可能プロパティと列挙可能プロパティの違いを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。