技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

イテレータの機能:

• 統合インターフェイス: 配列、文字列、カスタム オブジェクトのいずれであっても、デフォルトの反復子がある限り、for...of ループを使用して走査できます。
• 反復可能なオブジェクト: [Symbol.iterator] 属性を持つオブジェクトは反復可能とみなされます。 [Symbol.iterator]はイテレータを返すメソッドです。
• イテレータ オブジェクト: イテレータは、value プロパティと Done プロパティを含むオブジェクトを返す next() メソッドを持つオブジェクトです。 value は現在の反復の値、done は反復が完了したかどうかを示すブール値です。

for…of ループの特性:

• 簡潔な構文: 追加の反復ロジックを記述せずに、反復可能オブジェクト内の各要素を反復するには、for...of を使用します。
• 自動反復: for...of ループは、反復子の next() メソッドを自動的に呼び出して、次の値を取得します。
• 例外処理: for...of ループで try...catch を使用すると、反復プロセス中にスローされた例外をキャッチできます。

1: for…of を使用して配列を走査します

let numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
    console.log(number); // 依次输出 1 到 5
}
1
2
3
4
5

2: for…of を使用して文字列を走査します

let str = "Hello";

for (let char of str) {
    console.log(char); // 依次输出 'H', 'e', 'l', 'l', 'o'
}
1
2
3
4
5

3: カスタム反復子

let myIterable = {
    [Symbol.iterator]: function* () {
        yield 1;
        yield 2;
        yield 3;
    }
};

for (let value of myIterable) {
    console.log(value); // 依次输出 1, 2, 3
}
1
2
3
4
5
6
7
8
9
10
11

4: カスタム反復子で for…of を使用する

function* numberIterator(max) {
    let current = 1;
    while (current <= max) {
        yield current++;
    }
}

for (let number of numberIterator(5)) {
    console.log(number); // 依次输出 1 到 5
}
1
2
3
4
5
6
7
8
9
10

5: 例外をキャッチするには for…of を使用します

let iterable = [1, 2, 3, 4, 'error', 6];

for (let item of iterable) {
    try {
        if (typeof item === 'string') {
            throw new Error('Invalid value');
        }
        console.log(item * 2); // 依次输出 2, 4, 6, 8
    } catch (e) {
        console.error(e.message); // 输出：Invalid value
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

6: Array.from を使用して反復可能なオブジェクトを配列に変換する

let str = "Iterator";

let arrayFromIterable = Array.from(str);
console.log(arrayFromIterable); // 输出：['I', 't', 'e', 'r', 'a', 't', 'o', 'r']
1
2
3
4

知らせ

互換性:for…of ループは最新のブラウザと Node.js でサポートされていますが、一部の古い JavaScript 環境ではサポートされていない場合があります。
パフォーマンス: 大規模なコレクションの場合、各反復で反復子の next() メソッドの呼び出しが必要となるため、for...of ループは従来の for ループほど効率的ではない可能性があります。

7: 配列のシンボル.イテレータ

let arr = [1, 2, 3];

// 数组是可迭代对象，具有默认的 Symbol.iterator 属性
let iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
1
2
3
4
5
6
7
8
9

8: 文字列の Symbol.iterator

let str = "abc";

// 字符串也是可迭代对象
let strIterator = str[Symbol.iterator]();

console.log(strIterator.next()); // { value: "a", done: false }
console.log(strIterator.next()); // { value: "b", done: false }
console.log(strIterator.next()); // { value: "c", done: false }
console.log(strIterator.next()); // { value: undefined, done: true }
1
2
3
4
5
6
7
8
9

9: Symbol.iterator を手動で使用する

let myObj = {
    items: [3, 5, 7],
    [Symbol.iterator]: function* () {
        for (let item of this.items) {
            yield item * 2; // 迭代器返回值的两倍
        }
    }
};

let iterator = myObj[Symbol.iterator]();

console.log(iterator.next()); // { value: 6, done: false }
console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 14, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15