tab.filter [Initiation au JavaScript]

tab.filter

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

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

Cette fonction retourne un nouveau tableau ne contenant que les éléments dont la fonction à retournée true.

Ce tableau ne contient pas forcément autant de cases que le tableau original.

la valeur retournée par la fonction est le booléen true ou false.

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)

Exemple : Garde les valeurs multiples de 3

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

Array : filter

Équivalent avec fonction fléchée

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
const tab = listeNombres.filter((nombre)=> nombre % 3 == 0);

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];

const tab = listeNombres.filter((nombre)=> nombre % 3 == 0);

Équivalent avec forEach

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
const tab = [];
listeNombres.forEach(function (nombre) {
  if(nombre % 3 == 0) tab.push(nombre);
});

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];

const tab = [];
listeNombres.forEach(function (nombre) {
  if(nombre % 3 == 0) tab.push(nombre);
});

Équivalent avec for of

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
const tab = [];
for (let nombre of listeNombres) {
  if(nombre % 3 == 0) tab.push(nombre);
}

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];

const tab = [];
for (let nombre of listeNombres) {
  if(nombre % 3 == 0) tab.push(nombre);
}

Équivalent avec for

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
const tab = [];
for (let i = 0; i < listeNombres.length; i++) {
  if(listeNombres[i] % 3 == 0) tab[i] = listeNombres[i];
}

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];

const tab = [];
for (let i = 0; i < listeNombres.length; i++) {
  if(listeNombres[i] % 3 == 0) tab[i] = listeNombres[i];
}

Exemple : Garde les nombres entre 6 et 13

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

Array : filter

Équivalent avec fonction fléchée

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
const tab = listeNombres.filter((nombre) => nombre > 6 && nombre < 13);

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];

const tab = listeNombres.filter((nombre) => nombre > 6 && nombre < 13);

Équivalent avec forEach

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
const tab = [];
listeNombres.forEach(function (nombre) {
  if(nombre > 6 && $nombre < 13) tab.push(nombre);
});

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];

const tab = [];
listeNombres.forEach(function (nombre) {
  if(nombre > 6 && $nombre < 13) tab.push(nombre);
});

Équivalent avec for of

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
const tab = [];
for (let nombre of listeNombres) {
  if(nombre > 6 && $nombre < 13) tab.push(nombre);
}

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];

const tab = [];
for (let nombre of listeNombres) {
  if(nombre > 6 && $nombre < 13) tab.push(nombre);
}

Équivalent avec for

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];
const tab = [];
for (let i = 0; i < listeNombres.length; i++) {
  if(listeNombres[i] > 6 && listeNombres[i] < 13) tab[i] = listeNombres[i];
}

const listeNombres = [5, 12, 7, 9, 3, 17, 8, 2, 15, 14];

const tab = [];
for (let i = 0; i < listeNombres.length; i++) {
  if(listeNombres[i] > 6 && listeNombres[i] < 13) tab[i] = listeNombres[i];
}

Exemple : Garde les mots de moins de 6 caractères

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

Array : filter

Équivalent avec fonction fléchée

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
const tab = listeMots.filter((mot) => mot.length < 6);

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];

const tab = listeMots.filter((mot) => mot.length < 6);

Équivalent avec forEach

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
const tab = [];
listeMots.forEach(function (mot) {
  if(mot.length < 6) tab.push(mot);
});

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];

const tab = [];
listeMots.forEach(function (mot) {
  if(mot.length < 6) tab.push(mot);
});

Équivalent avec for of

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
const tab = [];
for (let mot of listeMots) {
  if(mot.length < 6) tab.push(mot);
}

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];

const tab = [];
for (let mot of listeMots) {
  if(mot.length < 6) tab.push(mot);
}

Équivalent avec for

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
const tab = [];
for (let i = 0; i < listeMots.length; i++) {
  if(listeMots[i].length < 6) tab[i] = listeMots[i];
}

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];

const tab = [];
for (let i = 0; i < listeMots.length; i++) {
  if(listeMots[i].length < 6) tab[i] = listeMots[i];
}

Exemple : Garde les mots commençant par "m"

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

Array : filter

Équivalent avec fonction fléchée

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
const tab = listeMots.filter((mot) => mot[0] == 'm');

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];

const tab = listeMots.filter((mot) => mot[0] == 'm');

Équivalent avec forEach

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
const tab = [];
listeMots.forEach(function (mot) {
  if(mot[0] == 'm') tab.push(mot);
});

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];

const tab = [];
listeMots.forEach(function (mot) {
  if(mot[0] == 'm') tab.push(mot);
});

Équivalent avec for of

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
const tab = [];
for (let mot of listeMots) {
  if(mot[0] == 'm') tab.push(mot);
}

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];

const tab = [];
for (let mot of listeMots) {
  if(mot[0] == 'm') tab.push(mot);
}

Équivalent avec for

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];
const tab = [];
for (let i = 0; i < listeMots.length; i++) {
  if(listeMots[i][0] == 'm') tab[i] = listeMots[i];
}

const listeMots = ['bonjour', 'hello', 'matin', 'soir', 'journée', 'maintenant', 'après'];

const tab = [];
for (let i = 0; i < listeMots.length; i++) {
  if(listeMots[i][0] == 'm') tab[i] = listeMots[i];
}

Exemple : Garde les majeurs d'une liste de tableaux associatifs (objet)

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

Array : filter

Équivalent avec fonction fléchée

const listePersonnes = [
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
];
const tab = listePersonnes.filter((personne) => personne.age >= 18);

const listePersonnes = [
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
];

const tab = listePersonnes.filter((personne) => personne.age >= 18);

Équivalent avec forEach

const listePersonnes = [
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
];
const tab = [];
listePersonnes.forEach(function (personne) {
  if(personne.age >= 18) tab.push(personne);
});

const listePersonnes = [
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
];

const tab = [];
listePersonnes.forEach(function (personne) {
  if(personne.age >= 18) tab.push(personne);
});

Équivalent avec for of

const listePersonnes = [
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
];
const tab = [];
for (let personne of listePersonnes) {
  if(personne.age >= 18) tab.push(personne);
}

const listePersonnes = [
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
];

const tab = [];
for (let personne of listePersonnes) {
  if(personne.age >= 18) tab.push(personne);
}

Équivalent avec for

const listePersonnes = [
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
];
const tab = [];
for (let i = 0; i < listePersonnes.length; i++) {
  if(listePersonnes[i].age >= 18) tab[i] = listePersonnes[i];
}

const listePersonnes = [
  {id : 8, nom : 'Aule', prenom : 'Lucie', age : 45},
  {id : 9, nom  : 'Ball', prenom : 'Annie', age : 24},
  {id : 10, nom : 'Bon', prenom : 'Jean', age : 65},
  {id : 11, nom : 'Braisile', prenom : 'France', age : 13}
];

const tab = [];
for (let i = 0; i < listePersonnes.length; i++) {
  if(listePersonnes[i].age >= 18) tab[i] = listePersonnes[i];
}