Les enchantements transformateurs d'Elyse

En JavaScript, la classe Array dispose de nombreuses méthodes natives très puissantes pour transformer des tableaux. Ces méthodes permettent de convertir un tableau en un autre bien plus facilement qu'avec une simple boucle for ou une manipulation plus directe.

Certaines méthodes sont pures, ce qui signifie qu'elles ne modifient pas le tableau d'origine. Elles en renvoient un nouveau à la place. D'autres méthodes, en revanche, manipulent le tableau sur lequel elles sont appelées et ne renvoient pas le tableau modifié.

Quelques-unes des méthodes les plus couramment utilisées pour transformer des tableaux sont présentées ci-dessous. La liste complète des méthodes disponibles se trouve dans la documentation MDN.

map (pure)

Crée un nouveau tableau en transformant chaque élément selon une fonction passée en argument. Ces fonctions de rappel sont souvent écrites sous la forme de fonctions fléchées.

let arr = [1, 2, 3, 4];

const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]

Il est bon de noter que le tableau obtenu aura toujours la même longueur que le tableau d'origine.

filter (pure)

Crée un tableau en filtrant le tableau courant, à l'aide d'une fonction de filtrage (qui renvoie vrai si l'élément doit être conservé et faux s'il doit être supprimé).

let arr = [1, 2, 3, 4];

arr.filter((value) => value % 2 === 0);
// => [2, 4]

reduce (pure)

Réduit le tableau à une seule valeur à l'aide d'une fonction qui prend un accumulateur et l'élément courant du tableau en paramètres. Cette fonction indique comment l'élément courant doit être fusionné dans l'accumulateur, et renvoie l'accumulateur qui sera utilisé à l'itération suivante.

let arr = [1, 2, 3, 4];

// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10

// Classify the numbers by whether they are odd or not
arr.reduce(
  (accumulator, currentValue) => {
    if (currentValue % 2 === 0) {
      accumulator.even.push(currentValue);
    } else {
      accumulator.odd.push(currentValue);
    }

    return accumulator;
  },
  { even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }

reverse

Inverse les éléments d'un tableau.

const arr = [1, 2, 3, 4];

arr.reverse();
// => [4, 3, 2, 1]

Cette méthode modifie le tableau sur lequel elle est appelée.

slice (pure)

À partir d'un indice de début et d'un indice de fin, crée un sous-tableau du tableau passé en paramètre.

L'élément situé à l'indice de fin ne sera pas inclus. De plus, tous les paramètres sont facultatifs : l'indice de début vaut 0 par défaut, et l'indice de fin correspond par défaut à la longueur du tableau.

const arr = [1, 2, 3, 4];

arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]

splice

Supprime, remplace et/ou ajoute de nouveaux éléments d'un tableau.

Elle prend les paramètres suivants :

• l'indice de l'élément à partir duquel commencer à modifier le tableau
• le nombre d'éléments à supprimer
• les éléments à insérer dans le tableau (facultatif)

splice renvoie les éléments qui ont été supprimés.

const arr = ['1', '2', '5', '6'];

// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']

// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']

// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']

sort

Par défaut, sort trie les éléments d'un tableau en les convertissant d'abord en strings, puis en appliquant une comparaison de strings (voir le concept Comparaison). Le tri se fait en place, ce qui signifie que le tableau d'origine est modifié. sort renvoie aussi ce tableau modifié, ce qui est pratique si tu veux y enchaîner d'autres méthodes.

const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']

Pour personnaliser le comportement du tri, tu peux passer une fonction de comparaison en argument. Cette fonction de comparaison est elle-même appelée avec deux arguments, qui sont deux éléments du tableau. Elle doit alors renvoyer ce qui suit :

• un nombre négatif si le premier argument doit être trié avant le second
• un nombre positif si le premier argument doit être trié après le second
• 0 si l'ordre des éléments doit rester le même

Voici un exemple d'utilisation d'une fonction de comparaison personnalisée pour trier un tableau d'objets.

const arr = [
  { name: 'Lydia', age: 7 },
  { name: 'Anne', age: 34 },
  { name: 'Holger', age: 59 },
];

arr.sort((item1, item2) => {
  if (item1.name < item2.name) {
    return -1;
  }
  if (item1.name > item2.name) {
    return 1;
  }
  return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]