Comment itérer (boucler) sur les éléments d'un tableau en javascript ?

Exemples de comment itérer (boucler) sur les éléments d'un tableau en javascript:

Créer un tableau en javascript

Créons un tableau très simple en javascript

var data = [9,5,7,3,1,4];

Notez que nous pouvons tester s'il s'agit d'un tableau en utilisant la méthode suivante :

console.log( Array.isArray(data) );

qui donne

True

ici.

Pour obtenir la taille d'un tableau :

console.log( data.length );

donne

6

Et pour obtenir un élément donné par index :

console.log( data[0] );

donne

9

et

console.log( data[3] );

donne

3

et

console.log( data[6] );

donne

undefined

Boucle sur un tableau à l'aide d'une boucle for

Pour boucler sur un tableau en javascript, une solution simple consiste à utiliser une boucle for :

for (var i = 0; i < data.length; i++){
    console.log( data[i] );
}

donne

9
5
7
3
1
4

Avec for ... of

Une autre solution en javascript est d'utiliser for ... of

for (var item of data ){
    console.log( item );
}

donne aussi :

9
5
7
3
1
4

Avec forEach()

Une autre solution utilisant Array.prototype.forEach()

var data = [9,5,7,3,1,4];

data.forEach(item => console.log(item));

donne

9
5
7
3
1
4

Nested tableau:

Considérons maintenant un tableau nested (imbriqué) ['a','b','c'] :

var data = [9,['a','b','c'],7,3,1,4];

pour boucler sur tous les éléments, une première solution consiste à utiliser la méthode array.flat() :

var data_flatted = data.flat()

console.log( data_flatted );

donne

[9, 'a', 'b', 'c', 7, 3, 1, 4]

Alors

for (var i = 0; i < data_flatted.length; i++){
    console.log(data_flatted[i]);
}

donne

9
a
b
c
7
3
1
4

Références

• JavaScript For Loop
• Understanding Nested Arrays in JavaScript
• Loop through an array in JavaScript