Technologieaustausch

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

Iteratorfunktionen:

• Einheitliche Schnittstelle: Unabhängig davon, ob es sich um ein Array, eine Zeichenfolge oder ein benutzerdefiniertes Objekt handelt, können Sie zum Durchlaufen die for...of-Schleife verwenden, solange sie über einen Standarditerator verfügen.
• Iterierbare Objekte: Objekte mit dem Attribut [Symbol.iterator] gelten als iterierbar. [Symbol.iterator] ist eine Methode, die einen Iterator zurückgibt.
• Iteratorobjekt: Ein Iterator ist ein Objekt mit einer next()-Methode, die ein Objekt zurückgibt, das die Eigenschaften „value“ und „done“ enthält. value ist der Wert der aktuellen Iteration und done ist ein boolescher Wert, der angibt, ob die Iteration abgeschlossen ist.

for…von Schleifeneigenschaften:

• Prägnante Syntax: Verwenden Sie for...of, um jedes Element in einem iterierbaren Objekt zu durchlaufen, ohne zusätzliche Iterationslogik zu schreiben.
• Automatische Iteration: Die for...of-Schleife ruft automatisch die next()-Methode des Iterators auf, um den nächsten Wert zu erhalten.
• Ausnahmebehandlung: Sie können try...catch in der for...of-Schleife verwenden, um während des Iterationsprozesses ausgelöste Ausnahmen abzufangen.

1: Verwenden Sie for…of, um das Array zu durchlaufen

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

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

2: Verwenden Sie for…of, um die Zeichenfolge zu durchlaufen

let str = "Hello";

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

3: Benutzerdefinierter Iterator

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: Verwendung von for…of mit benutzerdefiniertem Iterator

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: Verwenden Sie for…of, um Ausnahmen abzufangen

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: Verwenden Sie Array.from, um iterierbare Objekte in Arrays zu konvertieren

let str = "Iterator";

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

Beachten

Kompatibilität:for…of-Schleifen werden in modernen Browsern und Node.js unterstützt, einige ältere JavaScript-Umgebungen jedoch möglicherweise nicht.
Leistung: Bei großen Sammlungen ist eine for...of-Schleife möglicherweise nicht so effizient wie eine herkömmliche for-Schleife, da jede Iteration einen Aufruf der next()-Methode des Iterators erfordert.

7: Symbol.iterator des Arrays

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 der Zeichenfolge

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: Verwenden Sie Symbol.iterator manuell

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