Array avancé

5

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 un élément dans un tableau respecte une condition.

Some - Tableau de base

Par exemple, pour savoir si au moins un des films de la saga Infinity a franchi X millions de profits:

const moviesList = [623.3, 678.8, 459];

moviesList.some(movie => movie > 500);
// true

moviesList.some(movie => movie > 700);
// false

Some - Tableau d'objets

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

const moviesList = [
  {
    name: "The Avengers",
    $: 623.3
  },
  {
    name: "Infinity War",
    $: 678.8
  },
  {
    name: "Age of Ultron",
    $: 459
  },
];

moviesList.some(movie => movie.$ > 500);
// true

moviesList.some(movie => movie.$ > 700);
// false

Pour en savoir plus, voir cet article de MDN🦖 sur some().

Every

Retourne un booléen (true/false) indiquant si tous les éléments dans un tableau respectent une condition.

Every - Tableau de base

Par exemple, pour savoir si tous les films de la saga Infinity ont franchi X millions de profits:

const moviesList = [623.3, 678.8, 459];

moviesList.every(movie => movie > 500);
// false

moviesList.every(movie => movie > 400);
// true

Every - Tableau d'objets

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

const moviesList = [
  {
    name: "The Avengers",
    $: 623.3
  },
  {
    name: "Infinity War",
    $: 678.8
  },
  {
    name: "Age of Ultron",
    $: 459
  },
];

moviesList.every(movie => movie.$ > 500);
// false

moviesList.every(movie => movie.$ > 400);
// true

Pour en savoir plus, voir cet article de MDN🦖 sur every().

Filter

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

Filter - Tableau de base

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

const moviesList = [2012, 2022, 2018, 2015];

moviesList.filter(movie => movie < 2020);
// [2012, 2018, 2015]

Filter - Tableau d'objets

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

const moviesList = [
  {
    name: "The Avengers",
    $: 623.3
  },
  {
    name: "Infinity War",
    $: 678.8
  },
  {
    name: "Age of Ultron",
    $: 459
  },
];

moviesList.filter(movie => movie.$ > 500);
// [{name:"The Avengers", $:623.3},{name:"Infinity War", $:678.8}]

Pour en savoir plus, voir cet article de MDN🦖 sur filter().

Map

Permets de créer un nouveau tableau à partir d'un tableau existant, tout en lui apportant des modifications.

Map - Tableau de base

Par exemple, si le coût de production de chaque film était de 200 millions et que nous désirions obtenir le profit net de chaque film, soit: profits bruts - coûts de production:

const moviesList = [623.3, 678.8, 459];

moviesList.map(movie => movie - 200);
// [423.3, 478.8, 259]

Map - Tableau d'objets

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

const moviesList = [
  {
    name: "The Avengers",
    $: 623.3
  },
  {
    name: "Infinity War",
    $: 678.8
  },
  {
    name: "Age of Ultron",
    $: 459
  },
];

moviesList.map(movie => movie.$ - 200);
// [423.3, 478.8, 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é $ moins 200 qui est ensuite inséré dans le nouveau tableau.

Pour en savoir plus, voir cet article de MDN🦖 sur reduce().

Reduce

Permets de cumuler la valeur de plusieurs éléments d'un tableau.

Reduce - Tableau de base

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

const moviesList = [623.3, 678.8, 459];

moviesList.reduce((total, movie) => total + movie);
// 1761.1

Reduce - Tableau d'objets

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

const moviesList = [
  {
    name: "The Avengers",
    $: 623.3
  },
  {
    name: "Infinity War",
    $: 678.8
  },
  {
    name: "Age of Ultron",
    $: 459
  },
];

moviesList.reduce((total, movie) => total + movie.$, 0);
// 1761.1

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

Reduce additionne chacun des éléments du tableau un à un, en partant de cette valeur pour finalement arrivé au total de 1761.1

0 + 623.3 // 623.3
623.3 + 678.8 // 1302.1
1302.1 + 459 // 1761.1

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

Par exemple: 1040 si les profits générés par la série Iron Man devaient être inclus, ce qui aurait donné 2801.1 💰

Pour en savoir plus, voir cet article de MDN🦖 sur reduce().

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme