Itération de tableau JavaScript
Les méthodes d’itération de tableau fonctionnent sur chaque élément du tableau.
Tableau JavaScript pour chaque()
Le forEach() La méthode appelle une fonction (une fonction de rappel) une fois pour chaque élément du tableau.
Exemple
nombres constants = [45, 4, 9, 16, 25];
laissez txt = « » ;
nombres.forEach(myFunction);
function maFonction(valeur, index, tableau) {
txt += valeur + «
» ;
}
Essayez-le vous-même »
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
L’exemple ci-dessus utilise uniquement le paramètre value. L’exemple peut être réécrit en :
Exemple
nombres constants = [45, 4, 9, 16, 25];
laissez txt = « » ;
nombres.forEach(myFunction);
function maFonction(valeur) {
txt += valeur + «
» ;
}
Essayez-le vous-même »
Carte de tableau JavaScript()
Le map() La méthode crée un nouveau tableau en exécutant une fonction sur chaque élément du tableau.
Le map() La méthode n’exécute pas la fonction pour les éléments de tableau sans valeurs.
Le map() La méthode ne modifie pas le tableau d’origine.
Cet exemple multiplie chaque valeur de tableau par 2 :
Exemple
nombres const1 = [45, 4, 9, 16, 25];
const nombres2 = nombres1.map(maFonction);
function maFonction(valeur, index, tableau) {
valeur de retour * 2 ;
}
Essayez-le vous-même »
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- 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
nombres const1 = [45, 4, 9, 16, 25];
const nombres2 = nombres1.map(maFonction);
function maFonction(valeur) {
valeur de retour * 2 ;
}
Essayez-le vous-même »
Tableau JavaScript flatMap()
ES2019 a ajouté le tableau flatMap() méthode à JavaScript.
Le flatMap() La méthode mappe d’abord tous les éléments d’un tableau, puis crée un nouveau tableau en aplatissant le tableau.
Exemple
const maArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);
Essayez-le vous-même »
Prise en charge du navigateur
Tableau JavaScript flatMap() est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :
| Chrome 69 | Bord 79 | Firefox 62 | Safari 12 | Opéra 56 |
| Septembre 2018 | janvier 2020 | Septembre 2018 | Septembre 2018 | Septembre 2018 |
Filtre de tableau JavaScript()
Le filter() La méthode crée un nouveau tableau avec des éléments de tableau qui réussissent un test.
Cet exemple crée un nouveau tableau à partir d’éléments dont la valeur est supérieure à 18 :
Exemple
nombres constants = [45, 4, 9, 16, 25];
const over18 = nombres.filter(myFunction);
function maFonction(valeur, index, tableau) {
valeur de retour > 18 ;
}
Essayez-le vous-même »
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
Dans l’exemple ci-dessus, la fonction de rappel n’utilise pas les paramètres d’index et de tableau, ils peuvent donc être omis :
Exemple
nombres constants = [45, 4, 9, 16, 25];
const over18 = nombres.filter(myFunction);
function maFonction(valeur) {
valeur de retour > 18 ;
}
Essayez-le vous-même »
Réduire le tableau JavaScript ()
Le reduce() La méthode exécute une fonction sur chaque élément du tableau pour produire (le réduire à) une valeur unique.
Le reduce() La méthode fonctionne de gauche à droite dans le tableau. Voir également reduceRight().
Le reduce() méthode ne réduit pas le tableau d’origine.
Cet exemple trouve la somme de tous les nombres dans un tableau :
Exemple
nombres constants = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function maFonction(total, valeur, index, tableau) {
renvoie total + valeur ;
}
Essayez-le vous-même »
Notez que la fonction prend 4 arguments :
- Le total (la valeur initiale / la valeur précédemment renvoyée)
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
L’exemple ci-dessus n’utilise pas les paramètres d’index et de tableau. Il peut être réécrit en :
Exemple
nombres constants = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function maFonction(total, valeur) {
renvoie total + valeur ;
}
Essayez-le vous-même »
Le reduce() méthode peut accepter une valeur initiale :
Exemple
nombres constants = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
function maFonction(total, valeur) {
renvoie total + valeur ;
}
Essayez-le vous-même »
Tableau JavaScript reduceRight()
Le reduceRight() La méthode exécute une fonction sur chaque élément du tableau pour produire (le réduire à) une valeur unique.
Le reduceRight() fonctionne de droite à gauche dans le tableau. Voir également reduce().
Le reduceRight() méthode ne réduit pas le tableau d’origine.
Cet exemple trouve la somme de tous les nombres dans un tableau :
Exemple
nombres constants = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function maFonction(total, valeur, index, tableau) {
renvoie total + valeur ;
}
Essayez-le vous-même »
Notez que la fonction prend 4 arguments :
- Le total (la valeur initiale / la valeur précédemment renvoyée)
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
L’exemple ci-dessus n’utilise pas les paramètres d’index et de tableau. Il peut être réécrit en :
Exemple
nombres constants = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function maFonction(total, valeur) {
renvoie total + valeur ;
}
Essayez-le vous-même »
Tableau JavaScript chaque()
Le every() La méthode vérifie si toutes les valeurs du tableau réussissent un test.
Cet exemple vérifie si toutes les valeurs du tableau sont supérieures à 18 :
Exemple
nombres constants = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function maFonction(valeur, index, tableau) {
valeur de retour > 18 ;
}
Essayez-le vous-même »
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- 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
nombres constants = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function maFonction(valeur) {
valeur de retour > 18 ;
}
Essayez-le vous-même »
Tableau JavaScript certains()
Le some() La méthode vérifie si certaines valeurs de tableau réussissent un test.
Cet exemple vérifie si certaines valeurs de tableau sont supérieures à 18 :
Exemple
nombres constants = [45, 4, 9, 16, 25];
laissez someOver18 = numbers.some(myFunction);
function maFonction(valeur, index, tableau) {
valeur de retour > 18 ;
}
Essayez-le vous-même »
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
Tableau JavaScript indexOf()
Le indexOf() La méthode recherche dans un tableau une valeur d’élément et renvoie sa position.
Note: Le premier élément a la position 0, le deuxième élément a la position 1, et ainsi de suite.
Exemple
Rechercher un tableau pour l’élément « Apple »:
const fruits = [« Apple », « Orange », « Apple », « Mango »];
let position = fruits.indexOf(« Pomme ») + 1;
Essayez-le vous-même »
Syntaxe
déployer.Indice de(article, commencer)
| article | Requis. L’élément à rechercher. |
| commencer | Facultatif. Par 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 plus d’une fois, il renvoie la position de la première occurrence.
Tableau JavaScript lastIndexOf()
Array.lastIndexOf() est le même que Array.indexOf()mais renvoie la position de la dernière occurrence de l’élément spécifié.
Exemple
Rechercher un tableau pour l’élément « Apple »:
const fruits = [« Apple », « Orange », « Apple », « Mango »];
let position = fruits.lastIndexOf(« Pomme ») + 1;
Essayez-le vous-même »
Syntaxe
déployer.dernierIndexDe(article, commencer)
| article | Requis. L’élément à rechercher |
| commencer | Facultatif. Par où commencer la recherche. Les valeurs négatives commenceront à la position donnée en comptant à partir de la fin et rechercheront jusqu’au début |
Recherche de tableau JavaScript ()
Le find() La méthode renvoie la valeur du premier élément du tableau qui réussit une fonction de test.
Cet exemple trouve (renvoie la valeur de) le premier élément supérieur à 18 :
Exemple
nombres constants = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
function maFonction(valeur, index, tableau) {
valeur de retour > 18 ;
}
Essayez-le vous-même »
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
Prise en charge du navigateur
find() est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Bord | Firefox | Safari | Opéra |
| Oui | Oui | Oui | Oui | Oui |
find() n’est pas pris en charge dans Internet Explorer.
Tableau JavaScript findIndex()
Le findIndex() La méthode renvoie l’indice du premier élément du tableau qui réussit une fonction de test.
Cet exemple trouve l’index du premier élément supérieur à 18 :
Exemple
nombres constants = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
function maFonction(valeur, index, tableau) {
valeur de retour > 18 ;
}
Essayez-le vous-même »
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
Prise en charge du navigateur
findIndex() est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Bord | Firefox | Safari | Opéra |
| Oui | Oui | Oui | Oui | Oui |
findIndex() n’est pas pris en charge dans Internet Explorer.
Tableau JavaScript.from()
Le Array.from() renvoie un objet Array à partir de n’importe quel objet avec une propriété de longueur ou de n’importe quel objet itérable.
Prise en charge du navigateur
from() est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Bord | Firefox | Safari | Opéra |
| Oui | Oui | Oui | Oui | Oui |
from() n’est pas pris en charge dans Internet Explorer.
Clés de tableau JavaScript()
Le Array.keys() renvoie un objet Array Iterator avec les clés d’un tableau.
Exemple
Créez un objet Array Iterator, contenant les clés du tableau :
const fruits = [« Banana », « Orange », « Apple », « Mango »];
clés const = fruits.keys();
pour (let x de clés) {
texte += x + «
» ;
}
Essayez-le vous-même »
Prise en charge du navigateur
keys() est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Bord | Firefox | Safari | Opéra |
| Oui | Oui | Oui | Oui | Oui |
keys() n’est pas pris en charge dans Internet Explorer.
Entrées du tableau JavaScript()
Exemple
Créez un Array Iterator, puis parcourez les paires clé/valeur :
const fruits = [« Banana », « Orange », « Apple », « Mango »];
const f = fruits.entries();
pour (soit x de f) {
document.getElementById(« démo »).innerHTML += x;
}
Le entries() renvoie un objet Array Iterator avec des paires clé/valeur :
[0, « Banana »]
[1, « Orange »]
[2, « Apple »]
[3, « Mango »]
Le entries() La méthode ne modifie pas le tableau d’origine.
Prise en charge du navigateur
entries() est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Bord | Firefox | Safari | Opéra |
| Oui | Oui | Oui | Oui | Oui |
entries() n’est pas pris en charge dans Internet Explorer.
Le tableau JavaScript inclut()
ECMAScript 2016 introduit Array.includes() aux tableaux. Cela nous permet de vérifier si un élément est présent dans un tableau (y compris NaN, contrairement à indexOf).
Exemple
const fruits = [« Banana », « Orange », « Apple », « Mango »];
fruits.includes(« Mangue »); // est vrai
Essayez-le vous-même »
Syntaxe
déployer.inclut(élément de recherche)
Array.includes() permet de vérifier les valeurs NaN. Contrairement à Array.indexOf().
Prise en charge du navigateur
includes() est une fonctionnalité ECMAScript 2016.
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Bord | Firefox | Safari | Opéra |
| Oui | Oui | Oui | Oui | Oui |
includes() n’est pas pris en charge dans Internet Explorer.
Répartition des tableaux JavaScript (…)
L’opérateur … développe un itérable (comme un tableau) en plusieurs éléments :
Exemple
const q1 = [« Jan », « Feb », « Mar »];
const q2 = [« Apr », « May », « Jun »];
const q3 = [« Jul », « Aug », « Sep »];
const q4 = [« Oct », « Nov », « May »];
année constante = […q1, …q2, …q3, …q4];
Prise en charge du navigateur
... est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Bord | Firefox | Safari | Opéra |
| Oui | Oui | Oui | Oui | Oui |
... n’est pas pris en charge dans Internet Explorer.
Référence complète de la baie
Pour une référence Array complète, rendez-vous sur :
Référence complète du tableau JavaScript.
La référence contient des descriptions et des exemples de toutes les propriétés et méthodes Array.
#Itération #tableau #JavaScript