Itération des tableaux JavaScript

Les méthodes d'itération d'array opèrent sur chaque élément de l'array.

Array.forEach()

forEach() la méthode appelle la fonction (fonction callback) une fois pour chaque élément de l'array.

Exemple

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

Essayez-le vous-même

Remarque :Cette fonction accepte 3 paramètres :

  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

Dans l'exemple ci-dessus, seuls les paramètres value ont été utilisés. Cet exemple peut être réécrit comme suit :

Exemple

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Essayez-le vous-même

Tous les navigateurs le supportent Array.forEach()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Array.map()

map() la méthode crée un nouveau tableau en exécutant une fonction sur chaque élément de l'array.

map() la méthode ne Executes la fonction sur les éléments de l'array sans valeur.

map() la méthode ne change pas l'array original.

cet exemple multiplie chaque valeur de l'array par 2 :

Exemple

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

Essayez-le vous-même

Veuillez noter que cette fonction a 3 paramètres :

  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

quand la fonction callback utilise uniquement le paramètre value, les paramètres index et array peuvent être omis :

Exemple

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Essayez-le vous-même

Tous les navigateurs le supportent Array.map()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Array.filter()

filter() la méthode crée un nouveau tableau contenant les éléments de l'array qui passent le test.

cet exemple crée un nouveau tableau avec des éléments de valeur supérieure à 18 :

Exemple

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Essayez-le vous-même

Veuillez noter que cette fonction accepte 3 paramètres :

  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

Dans l'exemple ci-dessus, la fonction callback ne utilise pas les paramètres index et array, donc ils peuvent être omis :

Exemple

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Essayez-le vous-même

Tous les navigateurs le supportent Array.filter()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Array.reduce()

reduce() la méthode exécute une fonction sur chaque élément de l'array pour générer (réduire) une valeur unique.

reduce() la méthode fonctionne à partir de la gauche vers la droite dans l'array. Voir également reduceRight().

reduce() la méthode ne réduit pas l'array original.

cet exemple détermine la somme de tous les nombres dans le tableau :

Exemple

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Essayez-le vous-même

Veuillez noter que cette fonction accepte 4 paramètres :

  • Total (valeur initiale / valeur précédemment retournée)
  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

Dans l'exemple précédent, les paramètres index et array n'ont pas été utilisés. Il peut être modifié comme suit :

Exemple

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Essayez-le vous-même

reduce() la méthode peut accepter une valeur initiale :

Exemple

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

Essayez-le vous-même

Tous les navigateurs le supportent Array.reduce()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Array.reduceRight()

reduceRight() la méthode exécute une fonction sur chaque élément de l'array pour générer (réduire) une valeur unique.

reduceRight() la méthode fonctionne à partir de la droite vers la gauche dans l'array. Voir également reduce().

reduceRight() la méthode ne réduit pas l'array original.

cet exemple détermine la somme de tous les nombres dans le tableau :

Exemple

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Essayez-le vous-même

Veuillez noter que cette fonction accepte 4 paramètres :

  • Total (valeur initiale / valeur précédemment retournée)
  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

Dans l'exemple précédent, les paramètres index et array n'ont pas été utilisés. Il peut être modifié comme suit :

Exemple

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Essayez-le vous-même

Tous les navigateurs le supportent Array.reduceRight()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Array.every()

every() La méthode vérifie si toutes les valeurs de l'array passent le test.

Dans cet exemple, il s'agit de vérifier si toutes les valeurs de l'array sont supérieures à 18 :

Exemple

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Essayez-le vous-même

Veuillez noter que cette fonction accepte 3 paramètres :

  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

Si le callback utilise uniquement le premier paramètre (valeur), les autres paramètres peuvent être omis :

Exemple

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Essayez-le vous-même

Tous les navigateurs le supportent Array.every()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Array.some()

some() La méthode vérifie si certaines valeurs de l'array passent le test.

Dans cet exemple, il s'agit de vérifier si certaines valeurs de l'array sont supérieures à 18 :

Exemple

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Essayez-le vous-même

Veuillez noter que cette fonction accepte 3 paramètres :

  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

Tous les navigateurs le supportent Array.some()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Array.indexOf()

indexOf() La méthode recherche l'élément dans l'array et retourne sa position.

Remarque :La position du premier élément est 0, la position du deuxième élément est 1, etc.

Exemple

Recherche de l'élément "Apple" dans l'array :

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Essayez-le vous-même

Tous les navigateurs le supportent Array.indexOf()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Syntaxe

array.indexOf(élément, début)
élément Obligatoire. L'élément à rechercher.
début Optionnel. D'où commencer la recherche. Un nombre négatif commence à partir de la fin de l'array à la position donnée et recherche jusqu'à la fin.

Si l'élément n'est pas trouvé,Array.indexOf() Retourne -1.

Retourne la position de la première occurrence de l'élément si il apparaît plusieurs fois.

Array.lastIndexOf()

Array.lastIndexOf() et Array.indexOf() Similaire, mais commence à chercher à partir de la fin de l'array.

Exemple

Recherche de l'élément "Apple" dans l'array :

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Essayez-le vous-même

Tous les navigateurs le supportent Array.lastIndexOf()，sauf Internet Explorer 8 ou versions antérieures :

Oui 9.0 Oui Oui Oui

Syntaxe

array.lastIndexOf(élément, début)
élément Obligatoire. L'élément à rechercher.
début Optionnel. D'où commencer la recherche. Un nombre négatif commence à partir de la fin et recherche jusqu'au début.

Array.find()

find() La méthode retourne la valeur du premier élément de l'array qui passe le test de la fonction de test.

Cet exemple recherche (retourne) la valeur du premier élément supérieur à 18 :

Exemple

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Essayez-le vous-même

Veuillez noter que cette fonction accepte 3 paramètres :

  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

Les navigateurs anciens ne prennent pas en charge Array.find()Voici la liste des premières versions de navigateurs qui prennent en charge cette méthode :

45 12 25 8 32

Array.findIndex()

findIndex() La méthode retourne l'index du premier élément de l'array qui passe le test de la fonction de test.

Cet exemple recherche l'index du premier élément supérieur à 18 :

Exemple

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Essayez-le vous-même

Veuillez noter que cette fonction accepte 3 paramètres :

  • Valeur de l'élément
  • Index de l'élément
  • L'array lui-même

Les navigateurs anciens ne prennent pas en charge Array.findIndex()Voici la liste des premières versions de navigateurs qui prennent en charge cette méthode :

45 12 25 8 32