Partage de technologie

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

Caractéristiques de l'itérateur :

• Interface unifiée : Qu'il s'agisse d'un tableau, d'une chaîne ou d'un objet personnalisé, tant qu'ils ont un itérateur par défaut, vous pouvez utiliser la boucle for...of pour parcourir.
• Objets itérables : les objets avec l'attribut [Symbol.iterator] sont considérés comme itérables. [Symbol.iterator] est une méthode qui renvoie un itérateur.
• Objet itérateur : un itérateur est un objet avec une méthode next() qui renvoie un objet contenant une valeur et des propriétés terminées. value est la valeur de l'itération en cours et done est une valeur booléenne indiquant si l'itération est terminée.

pour…des caractéristiques de la boucle :

• Syntaxe concise : utilisez for...of pour parcourir chaque élément d'un objet itérable sans écrire de logique d'itération supplémentaire.
• Itération automatique : la boucle for...of appelle automatiquement la méthode next() de l'itérateur pour obtenir la valeur suivante.
• Gestion des exceptions : vous pouvez utiliser try...catch dans la boucle for...of pour intercepter les exceptions levées pendant le processus d'itération.

1 : utiliser for…of pour parcourir le tableau

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

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

2 : Utiliser for…of pour parcourir la chaîne

let str = "Hello";

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

3 : Itérateur personnalisé

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 : Utiliser pour… de avec un itérateur personnalisé

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 : Utiliser pour…de pour intercepter les exceptions

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 : Utilisez Array.from pour convertir des objets itérables en tableaux

let str = "Iterator";

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

Avis

compatibilitéLes boucles :for…of sont prises en charge dans les navigateurs modernes et Node.js, mais certains environnements JavaScript plus anciens peuvent ne pas le faire.
performance: Pour les grandes collections, une boucle for...of peut ne pas être aussi efficace qu'une boucle for traditionnelle car chaque itération nécessite un appel à la méthode next() de l'itérateur.

7 : Symbol.iterator du tableau

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 : Symbole.iterateur de chaîne

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 : Utiliser manuellement 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