Méthodes d'itération de tableaux JavaScript

Bienvenu dans notre site web www.exam-lib.com, c'est un site éducatif qui contient une panoplie des exercices avec solutions pour tous les niveaux (primaire,secondaire, collège, lycée et même pour les étudiants de l'OFPPT au Maroc). vous pouvez naviguer sur notre site et choisir le niveau qui vous convient puis vous pouvez suivez l'exercices ou aussi le cours souhaité. si vous avez des questions vous pouvez toujours laisser un commentaire sur notre site et un de nos professeurs va se charger de répondre à toutes vos questions.
SUIVEZ NOTRE CHAINE YOUTUBE: قم بالتسجيل في قناتنا عبر هذا الرابط

https://www.youtube.com/channel/UCCITRMWPcElh-96wCS3EyUg

abdelouafi

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

Array.forEach ()
La méthode forEach () appelle une fonction (une fonction de rappel) une fois pour chaque élément du tableau.

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
    txt = txt + value + "<br>";
}
</script>

</body>
</html>

Notez que la fonction prend 3 arguments:

  • La valeur de l'objet
  • L'index d'article
  • Le tableau lui-même
  • L'exemple ci-dessus utilise uniquement le paramètre value. L'exemple peut être réécrit pour:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
    txt = txt + value + "<br>";
}
</script>

</body>
</html>


Array.forEach () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure:
upload_2018-11-6_15-57-1.png


Array.map ()
La méthode map () crée un nouveau tableau en effectuant une fonction sur chaque élément du tableau.

La méthode map () n'exécute pas la fonction pour les éléments de tableau sans valeurs.

La méthode map () ne modifie pas le tableau d'origine.

Cet exemple multiplie chaque valeur de tableau par 2:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
    return value * 2;
}
</script>

</body>
</html>

Notez que la fonction prend 3 arguments:

  • La valeur de l'objet
  • L'index d'article
  • Le tableau lui-même
Lorsqu'une fonction de rappel utilise uniquement le paramètre value, les paramètres index et array peuvent être omis:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value) {
    return value * 2;
}
</script>

</body>
</html>

Array.map () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.
upload_2018-11-6_15-58-37.png


Array.filter ()
La méthode filter () crée un nouveau tableau avec des éléments de tableau qui passent un test.

Cet exemple crée un nouveau tableau à partir d'éléments avec une valeur supérieure à 18:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
    return value > 18;
}
</script>

</body>
</html>

Notez que la fonction prend 3 arguments:

  • La valeur de l'objet
  • L'index d'article
  • Le tableau lui-même
Dans l'exemple ci-dessus, la fonction de rappel n'utilise pas les paramètres index et array, ils peuvent donc être omis:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value) {
    return value > 18;
}
</script>

</body>
</html>


Array.filter () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.
upload_2018-11-6_15-59-58.png


Array.reduce ()
La méthode reduction () exécute une fonction sur chaque élément du tableau pour produire (la réduire à) une valeur unique.

La méthode reduction () fonctionne de gauche à droite dans le tableau. Voir aussi reductionRight ().

La méthode reduction () ne réduit pas le tableau d'origine.

Cet exemple trouve la somme de tous les nombres d'un tableau:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
    return total + value;
}
</script>

</body>
</html>


Notez que la fonction prend 4 arguments:

Le total (la valeur initiale / la valeur précédemment renvoyée)
  • La valeur de l'objet
  • L'index d'article
  • Le tableau lui-même
L'exemple ci-dessus n'utilise pas les paramètres index et array. Il peut être réécrit pour:

Exemple

Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
    return total + value;
}
</script>

</body>
</html>


La méthode reduction () peut accepter une valeur initiale:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction, 100);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
    return total + value;
}
</script>

</body>
</html>

Array.reduce () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.
upload_2018-11-6_16-1-52.png


Array.reduceRight ()
La méthode reductionRight () exécute une fonction sur chaque élément du tableau pour produire (la réduire à) une valeur unique.

ReductionRight () fonctionne de droite à gauche dans le tableau. Voir aussi réduction ().

La méthode reductionRight () ne réduit pas le tableau d'origine.

Cet exemple trouve la somme de tous les nombres d'un tableau:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduceRight()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
    return total + value;
}
</script>

</body>
</html>

Notez que la fonction prend 4 arguments:

Le total (la valeur initiale / la valeur précédemment renvoyée)
La valeur de l'objet
L'index d'article
Le tableau lui-même
L'exemple ci-dessus n'utilise pas les paramètres index et array. Il peut être réécrit pour:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduceRight()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
    return total + value;
}
</script>

</body>
</html>



Array.every ()
La méthode every () vérifie si toutes les valeurs du tableau passent un test.

Cet exemple vérifie si toutes les valeurs de tableau sont supérieures à 18:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.every()</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value, index, array) {
    return value > 18;
}
</script>

</body>
</html>

Notez que la fonction prend 3 arguments:

  • La valeur de l'objet
  • L'index d'article
  • Le tableau lui-même
Lorsqu'une fonction de rappel utilise uniquement le premier paramètre (valeur), les autres paramètres peuvent être omis:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.every()</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value) {
    return value > 18;
}
</script>

</body>
</html>

Array.every () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.

upload_2018-11-6_16-4-24.png


Array.some ()
La méthode some () vérifie si certaines valeurs de tableau passent un test.

Cet exemple vérifie si certaines valeurs de tableau sont supérieures à 18:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.some()</h2>

<p>The some() method checks if some array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + allOver18;

function myFunction(value, index, array) {
    return value > 18;
}
</script>

</body>
</html>

Notez que la fonction prend 3 arguments:

  • La valeur de l'objet
  • L'index d'article
  • Le tableau lui-même
Array.some () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.
upload_2018-11-6_16-5-18.png




Array.indexOf ()
Recherchez dans un tableau une valeur d'élément et retourne sa position.

Remarque: le premier élément a la position 0, le deuxième élément a la position 1, etc.

Exemple
Rechercher un tableau pour l'élément "Apple":
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.indexOf()</h2>


<p id="demo"></p>

<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
</script>

<p>The indexOf() does not work in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

Syntaxe:
Code:
array.indexOf(item, start)

  • item: requis. L'élément à rechercher.
  • start: facultatif. Où commencer la recherche. Les valeurs négatives commenceront à la position donnée en comptant à partir de la fin et rechercheront jusqu'à la fin.


array.indexOf () renvoie -1 si l'élément n'est pas trouvé.
Si l'élément est présent plusieurs fois, il renvoie la position de la première occurrence.


Array.lastIndexOf ()
Array.lastIndexOf () est identique à Array.indexOf (), mais effectue une recherche à partir de la fin du tableau.

Exemple
Rechercher un tableau pour l'élément "Apple":
Code:
<! DOCTYPE html>
<html>
<body>

<h2> JavaScript Array.lastIndexOf () </ h2>


<p id = "demo"> </ p>

<script>
var fruits = ["pomme", "orange", "pomme", "mangue"];
var a = fruits.lastIndexOf ("Apple");
document.getElementById ("demo"). innerHTML = "Apple se trouve en position" + (a + 1);
[CODE]array.lastIndexOf(item, start)
</ script>

<p> lastIndexOf () ne fonctionne pas dans Internet Explorer 8 et les versions antérieures. </ p>

</ body>
</ html>[/CODE]

Syntaxe:
Code:
array.lastIndexOf(item, start)



Array.find ()
La méthode find () renvoie la valeur du premier élément de tableau qui passe une fonction de test.

Cet exemple trouve (retourne la valeur de) le premier élément supérieur à 18:

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.find()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
    return value > 18;
}
</script>

</body>
</html>

Notez que la fonction prend 3 arguments:

La valeur de l'objet
L'index d'article
Le tableau lui-même


Array.find () n'est pas pris en charge par les anciens navigateurs. Les premières versions de navigateur avec prise en charge complète sont répertoriées ci-dessous.
upload_2018-11-6_16-9-45.png





Array.findIndex ()
La méthode findIndex () renvoie l'index du premier élément de tableau qui passe une fonction de test.

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

Exemple
Code:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.findIndex()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 has index " + first;

function myFunction(value, index, array) {
    return value > 18;
}
</script>

</body>
</html>

Notez que la fonction prend 3 arguments:

La valeur de l'objet
L'index d'article
Le tableau lui-même
Array.findIndex () n'est pas pris en charge par les anciens navigateurs. Les premières versions de navigateur avec prise en charge complète sont répertoriées ci-dessous.
upload_2018-11-6_16-10-51.png
 
Top