L'objet Array avancé

L'objet global Array, grâce à ses multiples méthodes, permet de manipuler les tableaux (array). Dans cet article, nous allons regarder les manipulations un peu plus avancées les plus populaires.

some()

Retourne un booléen (true/false) indiquant si au moins une entrée dans un tableau respecte une condition.

Tableau d'entrées simples

Par exemple, pour savoir si au moins un des films de la saga Infinity a franchi 500 ou 700 millions de profits au box-office:

const boxOfficeArr = [623, 678, 459];

boxOfficeArr.some(profits => profits > 500); // true
boxOfficeArr.some(profits => profits > 700); // false

Tableau d'objets

Reprenons l'exemple précédent, mais sous forme d'un tableau d'objets:

const boxOfficeArr = [
  {
    name: "The Avengers",
    profits: 623
  },
  {
    name: "Infinity War",
    profits: 678
  },
  {
    name: "Age of Ultron",
    profits: 459
  },
];

boxOfficeArr.some(movie => movie.profits > 500); // true
boxOfficeArr.some(movie => movie.profits > 700); // false

every()

À l'opposée de some(), every() retourne un booléen (true/false) indiquant si tous les entrées dans un tableau respectent une condition.

Tableau d'entrées simples

Par exemple, pour savoir si tous les films de la saga Infinity ont franchi 500 ou 400 millions de profits au box-office:

const boxOfficeArr = [623, 678, 459];

boxOfficeArr.every(profits => profits > 500); // false
boxOfficeArr.every(profits => profits > 400); // true

Tableau d'objets

Reprenons l'exemple précédent, mais sous forme d'un tableau d'objets:

const boxOfficeArr = [
  {
    name: "The Avengers",
    profits: 623
  },
  {
    name: "Infinity War",
    profits: 678
  },
  {
    name: "Age of Ultron",
    profits: 459
  },
];

boxOfficeArr.every(movie => movie.profits > 500); // false
boxOfficeArr.every(movie => movie.profits > 400); // true

filter()

Permets de filtrer un tableau afin d'en retourner un nouveau tableau contenant uniquement les entrées respectant une condition.

Tableau d'entrées simples

Par exemple, pour obtenir un tableau des films inclut dans la saga Infinity se terminant avant 2020 uniquement:

const boxOfficeArr = [2012, 2022, 2018];

boxOfficeArr.filter(year => year < 2020); // [2012, 2018]

Tableau d'objets

Par exemple, pour obtenir un tableau des films ayant dépassé la barre des 500 millions:

const boxOfficeArr = [
  {
    name: "The Avengers",
    profits: 623
  },
  {
    name: "Infinity War",
    profits: 678
  },
  {
    name: "Age of Ultron",
    profits: 459
  },
];

boxOfficeArr.filter(movie => movie.profits > 500);
/* [
  {name:"The Avengers", profits:623},
  {name:"Infinity War", profits:678}
] */

map()

Permets de parcourir chaque élément d'un tableau, d'appliquer une opération sur chacun d'entre eux, et de renvoyer une nouveau tableau. En d'autres termes, elle permet de "mapper" chaque élément dans un nouveau tableau en effectuant la modification désirée.

Tableau d'entrées simples

Par exemple, si le coût de production de chaque film était de 200 millions et que nous désirions obtenir un nouveau tableau correspondant au profit profit net de chaque film, il serait possible de faire:

const boxOfficeArr = [623, 678, 459];

const netProfitArr = boxOfficeArr.map(profits => profits - 200); 
// [423, 478, 259]

Tableau d'objets

Reprenons l'exemple précédent, mais sous forme d'un tableau d'objets:

const boxOfficeArr = [
  {
    name: "The Avengers",
    profits: 623
  },
  {
    name: "Infinity War",
    profits: 678
  },
  {
    name: "Age of Ultron",
    profits: 459
  },
];

boxOfficeArr.map(movie => movie.profits - 200); // [423, 478, 259]

map effectue une opération sur chaque entrée du tableau et retourne le résultat qui est ensuite inséré dans le nouveau tableau.

Dans l'exemple précédent, map boucle sur chaque film et retourne le résultat de la propriété profits moins 200 qui est ensuite inséré dans le nouveau tableau.

reduce()

Permets de cumuler la valeur de plusieurs entrées d'un tableau.

Tableau d'entrées simples

Par exemple, pour obtenir le total des profits engendrés par les films de la saga Infinity 💰:

const boxOfficeArr = [623, 678, 459];

boxOfficeArr.reduce((total, profits) => total + profits); // 1760

Tableau d'objets

Reprenons l'exemple précédent, mais sous forme d'un tableau d'objets:

const boxOfficeArr = [
  {
    name: "The Avengers",
    profits: 623
  },
  {
    name: "Infinity War",
    profits: 678
  },
  {
    name: "Age of Ultron",
    profits: 459
  },
];

moviesList.reduce((total, movie) => total + movie.profits, 0); // 1760

Remarquez, le paramètre 0. Ce paramètre correspond à la valeur de départ donnée à total.

reduce() additionne la propriété profits de chacune des entrées du tableau une à une, en partant de cette valeur pour finalement arrivé au total de 1760.

0 + 623 // 623
623 + 678 // 1301
1301 + 459 // 1760

Si désiré, il aurait été possible de débuter avec une valeur autre que 0.

Par exemple: 1040 si les profits générés par la série de films Iron Man devaient être ajoutés à notre calcul:

moviesList.reduce((total, movie) => total + movie.profits, 1040); // 2800