Dans ce tutoriel, vous découvrirez JavaScript pour… of loop à l'aide d'exemples.
En JavaScript, il existe trois façons d'utiliser une forboucle.
- JavaScript pour boucle
- JavaScript pour… en boucle
- JavaScript pour… de boucle
La for… ofboucle a été introduite dans les versions ultérieures de JavaScript ES6 .
La for… ofboucle en JavaScript vous permet d'itérer sur des objets itérables (tableaux, ensembles, cartes, chaînes, etc.).
JavaScript pour… de boucle
La syntaxe de la for… ofboucle est:
for (element of iterable) ( // body of for… of )
Ici,
- iterable - un objet itérable (tableau, ensemble, chaînes, etc.).
- élément - éléments de l'itérable
En anglais simple, vous pouvez lire le code ci-dessus comme suit: pour chaque élément de l'itérable, exécutez le corps de la boucle.
for… of with Arrays
La for… ofboucle peut être utilisée pour parcourir un tableau. Par exemple,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Production
John Sara Jack
Dans le programme ci-dessus, la for… ofboucle est utilisée pour parcourir l'objet tableau des étudiants et afficher toutes ses valeurs.
for… of with Strings
Vous pouvez utiliser une for… ofboucle pour parcourir des valeurs de chaîne. Par exemple,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Production
code
pour… sur avec Sets
Vous pouvez parcourir les éléments Set en utilisant la for… ofboucle. Par exemple,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Production
1 2 3
pour… ou avec Maps
Vous pouvez parcourir les éléments de la carte à l'aide de la for… ofboucle. Par exemple,
// define Map let map = new Map(); // inserting elements map.set('name', 'Jack'); map.set('age', '27'); // looping through Map for (let (key, value) of map) ( console.log(key + '- ' + value); )
Production
nom - Jack âge - 27 ans
Itérateurs définis par l'utilisateur
Vous pouvez créer un itérateur manuellement et utiliser la for… ofboucle pour parcourir les itérateurs. Par exemple,
// creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) // iterating using for… of for (const i of iterableObj) ( console.log(i); )
Production
1 2 3
pour… ou avec générateurs
Étant donné que les générateurs sont itérables, vous pouvez implémenter un itérateur de manière plus simple. Ensuite, vous pouvez parcourir les générateurs en utilisant la for… ofboucle. Par exemple,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Production
10 20 30
pour… de Vs pour… en
| pour… de | pour… dans |
|---|---|
La for… ofboucle est utilisée pour parcourir les valeurs d'un itérable. | La for… inboucle est utilisée pour parcourir les clés d'un objet. |
La for… ofboucle ne peut pas être utilisée pour parcourir un objet. | Vous pouvez utiliser for… inpour itérer sur un itérable de tels tableaux et chaînes, mais vous devriez éviter d'utiliser for… inpour les itérables. |
La for… ofboucle a été introduite dans ES6 . Certains navigateurs peuvent ne pas prendre en charge son utilisation. Pour en savoir plus, visitez JavaScript pour… du support.
