tab.map

1
tab.map(function([value, index, array]){...})

Cette fonction retourne un nouveau tableau dont chaque élément a été modifié.

Ce tableau contient autant de cases que le tableau original.

la valeur retournée par la fonction correspond à la valeur mise dans le nouveau tableau.

value : représente un élément du tableau à chaque tour de boucle

index : représente l'index de l'élément du tableau à chaque tour de boucle (facultatif)

array : représente le tableau lui-même (facultatif)

ExempleDoublement des valeurs du tableau

See the Pen cours-js-array-map by BCMM-W2D (@bcmm-w2d) on CodePen.

Array : map

Équivalent avec fonction fléchée

1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = listeNombres.map((nb)=> nb * 2);
Équivalent avec forEach
1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = [];
4
listeNombres.forEach(function (nombre) {
5
  tab.push(nombre * 2);
6
});
Équivalent avec for of
1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = [];
4
for (let nombre of listeNombres) {
5
  tab.push(nombre * 2);
6
}
Équivalent avec for
1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = [];
4
for (let i = 0; i < listeNombres.length; i++) {
5
  tab[i] = listeNombres[i] * 2;
6
}
ExempleRemplace les valeurs paires par 0 et les valeurs impaires par 1
 See the Pen  cours-js-array-map-2 by BCMM-W2D (@bcmm-w2d) on CodePen. 



Array : map
Équivalent avec fonction fléchée
1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = listeNombres.map((nombre) => nombre % 2);
Équivalent avec forEach
1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = [];
4
listeNombres.forEach(function (nombre) {
5
  tab.push(nombre % 2);
6
});
Équivalent avec for of
1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = [];
4
for (let nombre of listeNombres) {
5
  tab.push(nombre % 2);
6
}
Équivalent avec for
1
const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
2
3
const tab = [];
4
for (let i = 0; i < listeNombres.length; i++) {
5
  tab[i] = listeNombres[i] % 2;
6
}
ExempleLongueur des mots
 See the Pen  cours-js-array-map-3 by BCMM-W2D (@bcmm-w2d) on CodePen. 



Array : map
Équivalent avec fonction fléchée
1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const tab = listeMots.map((mot) => mot.length);
Équivalent avec forEach
1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const tab = [];
4
listeMots.forEach(function (mot) {
5
  tab.push(mot.length);
6
});
Équivalent avec for of
1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const tab = [];
4
for (let mot of listeMots) {
5
  tab.push(mot.length);
6
}
Équivalent avec for
1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const tab = [];
4
for (let i = 0; i < listeMots.length; i++) {
5
  tab[i] = listeMots[i].length;
6
}
ExemplePremière lettre des mots
 See the Pen  cours-js-array-map-4 by BCMM-W2D (@bcmm-w2d) on CodePen. 



Array : map
Équivalent avec fonction fléchée
1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const tab = listeMots.map((mot) => mot[0]);
Équivalent avec forEach
1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const tab = [];
4
listeMots.forEach(function (mot) {
5
  tab.push(mot[0]);
6
});
Équivalent avec for of
1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const tab = [];
4
for (let mot of listeMots) {
5
  tab.push(mot[0]);
6
}
Équivalent avec for
1
const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
2
3
const tab = [];
4
for (let i = 0; i < listeMots.length; i++) {
5
  tab[i] = listeMots[i][0];
6
}
ExempleListe des noms d'une liste de tableaux associatifs (objet)
 See the Pen  cours-js-array-map-5 by BCMM-W2D (@bcmm-w2d) on CodePen. 



Array : map
Équivalent avec fonction fléchée
1
const listePersonnes = [
2
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
3
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
4
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
5
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
6
];
7
8
const tab = listePersonnes.map((personne) => personne.nom);
Équivalent avec forEach
1
const listePersonnes = [
2
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
3
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
4
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
5
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
6
];
7
8
const tab = [];
9
listePersonnes.forEach(function (personne) {
10
  tab.push(personne.nom);
11
});
Équivalent avec for of
1
const listePersonnes = [
2
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
3
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
4
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
5
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
6
];
7
8
const tab = [];
9
for (let personne of listePersonnes) {
10
  tab.push(personne.nom);
11
}
Équivalent avec for
1
const listePersonnes = [
2
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
3
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
4
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
5
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
6
];
7
8
const tab = [];
9
for (let i = 0; i < listePersonnes.length; i++) {
10
  tab[i] = listePersonnes[i].nom;
11
}