Les itérables sont des objets et des structures de données dont on peut parcourir les valeurs.

Les tableaux (Array) en javascript sont évidemment itérables, ainsi que les chaînes de caractères (String).

Il existe d'autres structures de données itérables. Parmi elles, on retrouve les Set et les Map, et aussi certains objets parmi ce qu'on nomme Array-like en JavaScript.

Un Array-like est un objet qui ressemble à un tableau mais qui n'en est pas un, comme les listes retournées par certaines méthodes du DOM, comme document.getElementsByClassName() ou document.querySelectorAll() ou bien l’objet arguments. Les Array-like sont cependant facilement transformables en Array avec la méthode statique Array.from() (introduite dans ES2015).

Tous ces objets (itérables) et on peut donc utiliser la boucle for..of pour les parcourir.

Les tableaux

Les tableaux (Array) en JavaScript permettent de mettre dans un objet une liste ordonnée de valeurs :

const numbers = [1, 2, 3, 4, 5] // numbers est un Array
typeof numbers // 'object'
numbers instanceof Object // true
numbers instanceof Array // true

On peut accéder à la valeur d'un index particulier d'un tableau avec la syntaxe à crochet si et seulement si l’expression donnée à l’intérieur des crochets est évaluée à un entier positif :

numbers[0] // 1 - la numérotation des index commence à 0
numbers[4] // 5

On peut accéder à la longueur du tableau avec sa propriété length

numbers.length // 5

On peut parcourir le tableau de différentes façons, nous allons voir la boucle for..of

La boucle for-of

La boucle for-of est très lisible :

const numbers = [1, 2, 3, 4, 5]
const onlyOddNumbers = []

for (const number of numbers) {
 if (number % 2 === 1) {
    onlyOddNumbers.push(number)
 }
}
onlyOddNumbers // [1, 3, 5]